prism-highlighter.html
3.11 KB
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
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="prism-import.html">
<!--
Syntax highlighting via [Prism](http://prismjs.com/).
Place a `<prism-highlighter>` in your document, preferably as a direct child of
`<body>`. It will listen for `syntax-highlight` events on its parent element,
and annotate the code being provided via that event.
The `syntax-highlight` event's detail is expected to have a `code` property
containing the source to highlight. The event detail can optionally contain a
`lang` property, containing a string like `"html"`, `"js"`, etc.
This flow is supported by [`<marked-element>`](https://github.com/PolymerElements/marked-element).
-->
<script>
(function() {
'use strict';
var HIGHLIGHT_EVENT = 'syntax-highlight';
Polymer({
is: 'prism-highlighter',
ready: function() {
this._handler = this._highlight.bind(this);
},
attached: function() {
(this.parentElement || this.parentNode.host).addEventListener(HIGHLIGHT_EVENT, this._handler);
},
detached: function() {
(this.parentElement || this.parentNode.host).removeEventListener(HIGHLIGHT_EVENT, this._handler);
},
/**
* Handle the highlighting event, if we can.
*
* @param {!CustomEvent} event
*/
_highlight: function(event) {
if (!event.detail || !event.detail.code) {
console.warn('Malformed', HIGHLIGHT_EVENT, 'event:', event.detail);
return;
}
var detail = event.detail;
detail.code = Prism.highlight(detail.code, this._detectLang(detail.code, detail.lang));
},
/**
* Picks a Prism formatter based on the `lang` hint and `code`.
*
* @param {string} code The source being highlighted.
* @param {string=} lang A language hint (e.g. ````LANG`).
* @return {!prism.Lang}
*/
_detectLang: function(code, lang) {
if (!lang) {
// Stupid simple detection if we have no lang, courtesy of:
// https://github.com/robdodson/mark-down/blob/ac2eaa/mark-down.html#L93-101
return code.match(/^\s*</) ? Prism.languages.markup : Prism.languages.javascript;
}
if (lang === 'js' || lang.substr(0, 2) === 'es') {
return Prism.languages.javascript;
} else if (lang === 'css') {
return Prism.languages.css;
} else if (lang === 'c') {
return Prism.langauges.clike;
} else {
// The assumption is that you're mostly documenting HTML when in HTML.
return Prism.languages.markup;
}
},
});
})();
</script>