xin-cli/markdown-behavior.html at master · rip-projects/xin-cli · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<link rel="import" href="../xin/xin.html">

<script src="./js/marked.js"></script>
<script src="./js/prism.min.js"></script>

<link rel="stylesheet" href="./css/prism.min.css">

<style>
.xin-cli-markdown-behavior table,
.xin-cli-markdown-behavior .block {
  width: 100%;
  background-color: #eeeeee;
  padding: 10px;
  margin-bottom: 8px;
  box-sizing: border-box;
}

.xin-cli-markdown-behavior table *,
.xin-cli-markdown-behavior .block * {
  font-size: 13px;
}

.xin-cli-markdown-behavior table th,
.xin-cli-markdown-behavior .block .header {
  font-size: .8em;
  font-weight: bold;
}

.xin-cli-markdown-behavior table .type,
.xin-cli-markdown-behavior .block .type {
  color: #66D9EF;
}

.xin-cli-markdown-behavior table .visibility,
.xin-cli-markdown-behavior .block .visibility {
  color: #529B2F;
}

.xin-cli-markdown-behavior table .identifier,
.xin-cli-markdown-behavior .block .identifier {
  color: #F92672;
}

.xin-cli-markdown-behavior pre {
  background-color: #eee;
  padding: 20px;
  overflow: auto;
}
</style>

<script>
(function() {
  'use strict';

  const marked = window.marked;
  const Prism = window.Prism;

  marked.setOptions({
    highlight: function(code, language) {
      if (Prism.languages[language]) {
        return Prism.highlight(code, Prism.languages[language]);
      }

      return code;
    },
  });

  xin.createBehavior('xinCli.MarkdownBehavior', {
    properties: {
      markdownUrl: {
        type: String,
        observer: '_fetchMarkdown',
      },

      markdown: {
        type: String,
        observer: 'renderMarkdown',
      },
    },

    created: function() {
      this.classList.add('xin-cli-markdown-behavior');
    },

    _fetchMarkdown: function() {
      if (!this.requestor) {
        this.requestor = document.createElement('xin-ajax');
      }
      this.requestor.request({
        url: this.markdownUrl,
      }).then(function(xhr) {
        this.set('markdown', xhr.body);
      }.bind(this));
    },

    renderMarkdown: function() {
      (this.$.content || this).innerHTML = marked(this.markdown);
    },
  });
})();
</script>