%0D%0A<%2Fsvg>');
33 | background-size: 1em 1em;
34 | }
35 |
36 | code[class*="language-"] {
37 | background: black;
38 | color: white;
39 | box-shadow: -.3em 0 0 .3em black, .3em 0 0 .3em black;
40 | }
41 |
42 | /* Inline code */
43 | :not(pre) > code[class*="language-"] {
44 | padding: .2em;
45 | border-radius: .3em;
46 | box-shadow: none;
47 | white-space: normal;
48 | }
49 |
50 | .token.comment,
51 | .token.prolog,
52 | .token.doctype,
53 | .token.cdata {
54 | color: #aaa;
55 | }
56 |
57 | .token.punctuation {
58 | color: #999;
59 | }
60 |
61 | .namespace {
62 | opacity: .7;
63 | }
64 |
65 | .token.property,
66 | .token.tag,
67 | .token.boolean,
68 | .token.number,
69 | .token.constant,
70 | .token.symbol {
71 | color: #0cf;
72 | }
73 |
74 | .token.selector,
75 | .token.attr-name,
76 | .token.string,
77 | .token.char,
78 | .token.builtin {
79 | color: yellow;
80 | }
81 |
82 | .token.operator,
83 | .token.entity,
84 | .token.url,
85 | .language-css .token.string,
86 | .toke.variable,
87 | .token.inserted {
88 | color: yellowgreen;
89 | }
90 |
91 | .token.atrule,
92 | .token.attr-value,
93 | .token.keyword {
94 | color: deeppink;
95 | }
96 |
97 | .token.regex,
98 | .token.important {
99 | color: orange;
100 | }
101 |
102 | .token.important,
103 | .token.bold {
104 | font-weight: bold;
105 | }
106 | .token.italic {
107 | font-style: italic;
108 | }
109 |
110 | .token.entity {
111 | cursor: help;
112 | }
113 |
114 | .token.deleted {
115 | color: red;
116 | }
117 |
--------------------------------------------------------------------------------
/themes/prism-dark.css:
--------------------------------------------------------------------------------
1 | /**
2 | * prism.js Dark theme for JavaScript, CSS and HTML
3 | * Based on the slides of the talk “/Reg(exp){2}lained/”
4 | * @author Lea Verou
5 | */
6 |
7 | code[class*="language-"],
8 | pre[class*="language-"] {
9 | color: white;
10 | background: none;
11 | text-shadow: 0 -.1em .2em black;
12 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
13 | text-align: left;
14 | white-space: pre;
15 | word-spacing: normal;
16 | word-break: normal;
17 | word-wrap: normal;
18 | line-height: 1.5;
19 |
20 | -moz-tab-size: 4;
21 | -o-tab-size: 4;
22 | tab-size: 4;
23 |
24 | -webkit-hyphens: none;
25 | -moz-hyphens: none;
26 | -ms-hyphens: none;
27 | hyphens: none;
28 | }
29 |
30 | @media print {
31 | code[class*="language-"],
32 | pre[class*="language-"] {
33 | text-shadow: none;
34 | }
35 | }
36 |
37 | pre[class*="language-"],
38 | :not(pre) > code[class*="language-"] {
39 | background: hsl(30, 20%, 25%);
40 | }
41 |
42 | /* Code blocks */
43 | pre[class*="language-"] {
44 | padding: 1em;
45 | margin: .5em 0;
46 | overflow: auto;
47 | border: .3em solid hsl(30, 20%, 40%);
48 | border-radius: .5em;
49 | box-shadow: 1px 1px .5em black inset;
50 | }
51 |
52 | /* Inline code */
53 | :not(pre) > code[class*="language-"] {
54 | padding: .15em .2em .05em;
55 | border-radius: .3em;
56 | border: .13em solid hsl(30, 20%, 40%);
57 | box-shadow: 1px 1px .3em -.1em black inset;
58 | white-space: normal;
59 | }
60 |
61 | .token.comment,
62 | .token.prolog,
63 | .token.doctype,
64 | .token.cdata {
65 | color: hsl(30, 20%, 50%);
66 | }
67 |
68 | .token.punctuation {
69 | opacity: .7;
70 | }
71 |
72 | .namespace {
73 | opacity: .7;
74 | }
75 |
76 | .token.property,
77 | .token.tag,
78 | .token.boolean,
79 | .token.number,
80 | .token.constant,
81 | .token.symbol {
82 | color: hsl(350, 40%, 70%);
83 | }
84 |
85 | .token.selector,
86 | .token.attr-name,
87 | .token.string,
88 | .token.char,
89 | .token.builtin,
90 | .token.inserted {
91 | color: hsl(75, 70%, 60%);
92 | }
93 |
94 | .token.operator,
95 | .token.entity,
96 | .token.url,
97 | .language-css .token.string,
98 | .style .token.string,
99 | .token.variable {
100 | color: hsl(40, 90%, 60%);
101 | }
102 |
103 | .token.atrule,
104 | .token.attr-value,
105 | .token.keyword {
106 | color: hsl(350, 40%, 70%);
107 | }
108 |
109 | .token.regex,
110 | .token.important {
111 | color: #e90;
112 | }
113 |
114 | .token.important,
115 | .token.bold {
116 | font-weight: bold;
117 | }
118 | .token.italic {
119 | font-style: italic;
120 | }
121 |
122 | .token.entity {
123 | cursor: help;
124 | }
125 |
126 | .token.deleted {
127 | color: red;
128 | }
129 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # vue-code-highlight
2 |
3 | > Beautiful code syntax highlighting as Vue.js component.
4 |
5 | ## Examples
6 | https://codesandbox.io/s/vue-code-highlight-example-63h5m
7 | 
8 |
9 | ## Usage
10 |
11 | ```
12 | npm install vue-code-highlight --save
13 | ```
14 |
15 | Now, you can use this module in two diferrent ways, as a component or as a directive.
16 |
17 | ### Component
18 | In any component:
19 |
20 | ```js
21 | // You have to extract the component from the module
22 | import { component as VueCodeHighlight } from 'vue-code-highlight';
23 |
24 | components:{
25 | VueCodeHighlight,
26 | ...
27 | }
28 | ```
29 |
30 | ```html
31 |
32 |
33 | //Paste your code here
34 |
35 |
36 | ```
37 | **Props**
38 | |Prop |Description
39 | |:--------------|:------------------------------------------|
40 | | **language** | Pass language name you want to highlight. Options: https://prismjs.com/#supported-languages |
41 |
42 | Your content will be highlighted dynamically when it updates.
43 |
44 | The `` tag is required to preserve newline characters (They're stripped by default in Vue).
45 |
46 | Window styles are already present in a component mode, but you will need to select and include a theme to properly highlight your code. (See the themes section.)
47 |
48 | ### Directive
49 | In your main file:
50 | ```js
51 | import VueCodeHighlight from 'vue-code-highlight';
52 |
53 | Vue.use(VueCodeHighlight) //registers the v-highlight directive
54 |
55 | ```
56 | And then in any Vue component:
57 |
58 | ```html
59 |
60 | ...
61 |
62 | ```
63 | All markup under the div element having the following structure will be syntax highlighted.
64 |
65 | ```html
66 |
67 |
68 | //your code goes here
69 |
70 |
71 | ```
72 |
73 | To give the highlighter a window look in a directive mode, also don't forget to include the `./node_modules/vue-code-highlight/themes/window.css` file somewhere in your app.
74 |
75 | ## Themes
76 | In order to visually higlight your code, you need to select a theme from `./node_modules/vue-code-highlight/themes/` and import it somewhere into your component/application. These are just regular prism themes, so feel free to improvise.
77 |
78 | 
79 |
80 | ## Other languages
81 |
82 | Any of the [supported languages](https://prismjs.com/index.html#supported-languages) in Prism may be used. To enable support
83 | for them, you must import them explicitly as well as Prism's markup templating.
84 |
85 | For example, to include PHP highlighting in your application:
86 |
87 | ```jsx
88 | import 'prism-es6/components/prism-markup-templating';
89 | import 'prism-es6/components/prism-php';
90 | ```
91 |
--------------------------------------------------------------------------------
/demo/js/app.878e9d7a.js:
--------------------------------------------------------------------------------
1 | (function(e){function t(t){for(var r,i,u=t[0],a=t[1],c=t[2],f=0,d=[];f {\n let [length, result] = [word.length, true];\n\n for (let i = 0; i < length / 2; i++) {\n if (word[i] !== word[length - 1 - i]) result = false;\n }\n return result;\n }\n\n module.exports = isPalindrome;\n")])},l=[],i=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:"codeBlock"},[n("pre",{class:e.languageClass},[n("code",[e._t("default")],2)])])},u=[],a=(n("pIFo"),n("eLaB")),c={name:"code-highlight",props:{language:{type:String,default:"javascript"}},computed:{languageClass:function(){return"language-".concat(this.language)}},mounted:function(){a["a"].highlightAllUnder(this.$refs.codeBlock)},beforeUpdate:function(){var e=this.$slots.default[0].text.replace(/^[\r\n\s]*|[\r\n\s]*$/g,"");this.$el.querySelector("code").textContent=e,a["a"].highlightAllUnder(this.$refs.codeBlock)}},s=c,f=n("KHd+"),d=Object(f["a"])(s,i,u,!1,null,null,null),p=d.exports,h={name:"app",components:{CodeHighlight:p},data:function(){return{dynamicCode:"Type here to see me change below
"}}},g=h,v=(n("A0++"),Object(f["a"])(g,o,l,!1,null,null,null)),b=v.exports;r["a"].config.productionTip=!1,new r["a"]({render:function(e){return e(b)}}).$mount("#app")}});
2 | //# sourceMappingURL=app.878e9d7a.js.map
--------------------------------------------------------------------------------
/themes/prism.css:
--------------------------------------------------------------------------------
1 | /**
2 | * prism.js default theme for JavaScript, CSS and HTML
3 | * Based on dabblet (http://dabblet.com)
4 | * @author Lea Verou
5 | */
6 |
7 | code[class*="language-"],
8 | pre[class*="language-"] {
9 | color: black;
10 | background: none;
11 | text-shadow: 0 1px white;
12 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
13 | text-align: left;
14 | white-space: pre;
15 | word-spacing: normal;
16 | word-break: normal;
17 | word-wrap: normal;
18 | line-height: 1.5;
19 |
20 | -moz-tab-size: 4;
21 | -o-tab-size: 4;
22 | tab-size: 4;
23 |
24 | -webkit-hyphens: none;
25 | -moz-hyphens: none;
26 | -ms-hyphens: none;
27 | hyphens: none;
28 | }
29 |
30 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
31 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
32 | text-shadow: none;
33 | background: #b3d4fc;
34 | }
35 |
36 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
37 | code[class*="language-"]::selection, code[class*="language-"] ::selection {
38 | text-shadow: none;
39 | background: #b3d4fc;
40 | }
41 |
42 | @media print {
43 | code[class*="language-"],
44 | pre[class*="language-"] {
45 | text-shadow: none;
46 | }
47 | }
48 |
49 | /* Code blocks */
50 | pre[class*="language-"] {
51 | padding: 1em;
52 | margin: .5em 0;
53 | overflow: auto;
54 | }
55 |
56 | :not(pre) > code[class*="language-"],
57 | pre[class*="language-"] {
58 | background: #f5f2f0;
59 | }
60 |
61 | /* Inline code */
62 | :not(pre) > code[class*="language-"] {
63 | padding: .1em;
64 | border-radius: .3em;
65 | white-space: normal;
66 | }
67 |
68 | .token.comment,
69 | .token.prolog,
70 | .token.doctype,
71 | .token.cdata {
72 | color: slategray;
73 | }
74 |
75 | .token.punctuation {
76 | color: #999;
77 | }
78 |
79 | .namespace {
80 | opacity: .7;
81 | }
82 |
83 | .token.property,
84 | .token.tag,
85 | .token.boolean,
86 | .token.number,
87 | .token.constant,
88 | .token.symbol,
89 | .token.deleted {
90 | color: #905;
91 | }
92 |
93 | .token.selector,
94 | .token.attr-name,
95 | .token.string,
96 | .token.char,
97 | .token.builtin,
98 | .token.inserted {
99 | color: #690;
100 | }
101 |
102 | .token.operator,
103 | .token.entity,
104 | .token.url,
105 | .language-css .token.string,
106 | .style .token.string {
107 | color: #9a6e3a;
108 | background: hsla(0, 0%, 100%, .5);
109 | }
110 |
111 | .token.atrule,
112 | .token.attr-value,
113 | .token.keyword {
114 | color: #07a;
115 | }
116 |
117 | .token.function,
118 | .token.class-name {
119 | color: #DD4A68;
120 | }
121 |
122 | .token.regex,
123 | .token.important,
124 | .token.variable {
125 | color: #e90;
126 | }
127 |
128 | .token.important,
129 | .token.bold {
130 | font-weight: bold;
131 | }
132 | .token.italic {
133 | font-style: italic;
134 | }
135 |
136 | .token.entity {
137 | cursor: help;
138 | }
139 |
--------------------------------------------------------------------------------
/demo/css/app.67e415ed.css:
--------------------------------------------------------------------------------
1 | code[class*=language-],pre[class*=language-]{-moz-tab-size:4;-ms-hyphens:none;-o-tab-size:4;-webkit-hyphens:none;background:#1d262f;color:#57718e;direction:ltr;font-family:Hack,Consolas,Menlo,Monaco,Andale Mono WT,Andale Mono,Lucida Console,Lucida Sans Typewriter,DejaVu Sans Mono,Bitstream Vera Sans Mono,Liberation Mono,Nimbus Mono L,Courier New,Courier,monospace;font-size:14px;hyphens:none;line-height:1.375;tab-size:4;text-align:left;white-space:pre;word-break:normal;word-spacing:normal}code[class*=language-]::-moz-selection,code[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection{background:#004a9e;text-shadow:none}code[class*=language-]::selection,code[class*=language-] ::selection,pre[class*=language-]::selection,pre[class*=language-] ::selection{background:#004a9e;text-shadow:none}pre[class*=language-]{margin:.5em 0;overflow:auto;padding:1em}:not(pre)>code[class*=language-]{border-radius:.3em;padding:.1em}.token.cdata,.token.comment,.token.doctype,.token.prolog,.token.punctuation{color:#4a5f78}.token.namespace{opacity:.7}.token.number,.token.operator,.token.tag{color:#0aa370}.token.function,.token.property{color:#57718e}.token.atrule-id,.token.selector,.token.tag-id{color:#ebf4ff}.token.attr-name,code.language-javascript{color:#7eb6f6}.language-css .token.string,.language-scss .token.string,.style .token.string,.token.atrule,.token.attr-value,.token.boolean,.token.control,.token.directive,.token.entity,.token.keyword,.token.placeholder,.token.regex,.token.statement,.token.string,.token.unit,.token.url,.token.variable,code.language-css,code.language-scss{color:#47ebb4}.token.deleted{text-decoration:line-through}.token.inserted{border-bottom:1px dotted #ebf4ff;text-decoration:none}.token.italic{font-style:italic}.token.bold,.token.important{font-weight:700}.token.important{color:#7eb6f6}.token.entity{cursor:help}pre>code.highlight{outline:.4em solid #34659d;outline-offset:.4em}.line-numbers .line-numbers-rows{border-right-color:#1f2932}.line-numbers-rows>span:before{color:#2c3847}.line-highlight{background:rgba(10,163,112,.2);background:-webkit-gradient(linear,left top,right top,color-stop(70%,rgba(10,163,112,.2)),to(rgba(10,163,112,0)));background:linear-gradient(90deg,rgba(10,163,112,.2) 70%,rgba(10,163,112,0))}div pre[class*=language-]{-webkit-box-shadow:5px 5px 15px 0 rgba(50,50,50,.75);background-image:url('data:image/svg+xml;utf8, \n\n \n\n\n","import mod from \"-!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib/index.js!../node_modules/vue-loader/lib/index.js??vue-loader-options!./CodeHighlight.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib/index.js!../node_modules/vue-loader/lib/index.js??vue-loader-options!./CodeHighlight.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./CodeHighlight.vue?vue&type=template&id=18ebe8d4&\"\nimport script from \"./CodeHighlight.vue?vue&type=script&lang=js&\"\nexport * from \"./CodeHighlight.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","\n \n let isPalindrome = (word) => {\n let [length, result] = [word.length, true];\n\n for (let i = 0; i < length / 2; i++) {\n if (word[i] !== word[length - 1 - i]) result = false;\n }\n return result;\n }\n\n module.exports = isPalindrome;\n \n \n\n\n\n\n","import mod from \"-!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib/index.js!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib/index.js!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./App.vue?vue&type=template&id=2d90a974&\"\nimport script from \"./App.vue?vue&type=script&lang=js&\"\nexport * from \"./App.vue?vue&type=script&lang=js&\"\nimport style0 from \"./App.vue?vue&type=style&index=0&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","import Vue from 'vue';\nimport App from './App.vue';\n\nVue.config.productionTip = false;\n\nnew Vue({\n render: h => h(App),\n}).$mount('#app');\n"],"sourceRoot":""}
--------------------------------------------------------------------------------
/dist/vue-code-highlight.esm.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | /* **********************************************
3 | Begin prism-core.js
4 | ********************************************** */
5 |
6 | var _self = {};
7 |
8 | /**
9 | * Prism: Lightweight, robust, elegant syntax highlighting
10 | * MIT license http://www.opensource.org/licenses/mit-license.php/
11 | * @author Lea Verou http://lea.verou.me
12 | */
13 |
14 | var Prism = (function () {
15 | // Private helper vars
16 | var lang = /\blang(?:uage)?-([\w-]+)\b/i;
17 | var uniqueId = 0;
18 |
19 | var _ = _self.Prism = {
20 | manual: _self.Prism && _self.Prism.manual,
21 | disableWorkerMessageHandler: _self.Prism && _self.Prism.disableWorkerMessageHandler,
22 | util: {
23 | encode: function encode (tokens) {
24 | if (tokens instanceof Token) {
25 | return new Token(tokens.type, _.util.encode(tokens.content), tokens.alias);
26 | } else if (_.util.type(tokens) === 'Array') {
27 | return tokens.map(_.util.encode);
28 | } else {
29 | return tokens.replace(/&/g, '&').replace(/ text.length) {
321 | // Something went terribly wrong, ABORT, ABORT!
322 | return;
323 | }
324 |
325 | if (str instanceof Token) {
326 | continue;
327 | }
328 |
329 | if (greedy && i != strarr.length - 1) {
330 | pattern.lastIndex = pos;
331 | var match = pattern.exec(text);
332 | if (!match) {
333 | break;
334 | }
335 |
336 | var from = match.index + (lookbehind ? match[1].length : 0),
337 | to = match.index + match[0].length,
338 | k = i,
339 | p = pos;
340 |
341 | for (var len = strarr.length; k < len && (p < to || (!strarr[k].type && !strarr[k - 1].greedy)); ++k) {
342 | p += strarr[k].length;
343 | // Move the index i to the element in strarr that is closest to from
344 | if (from >= p) {
345 | ++i;
346 | pos = p;
347 | }
348 | }
349 |
350 | // If strarr[i] is a Token, then the match starts inside another Token, which is invalid
351 | if (strarr[i] instanceof Token) {
352 | continue;
353 | }
354 |
355 | // Number of tokens to delete and replace with the new match
356 | delNum = k - i;
357 | str = text.slice(pos, p);
358 | match.index -= pos;
359 | } else {
360 | pattern.lastIndex = 0;
361 |
362 | var match = pattern.exec(str),
363 | delNum = 1;
364 | }
365 |
366 | if (!match) {
367 | if (oneshot) {
368 | break;
369 | }
370 |
371 | continue;
372 | }
373 |
374 | if(lookbehind) {
375 | lookbehindLength = match[1] ? match[1].length : 0;
376 | }
377 |
378 | var from = match.index + lookbehindLength,
379 | match = match[0].slice(lookbehindLength),
380 | to = from + match.length,
381 | before = str.slice(0, from),
382 | after = str.slice(to);
383 |
384 | var args = [i, delNum];
385 |
386 | if (before) {
387 | ++i;
388 | pos += before.length;
389 | args.push(before);
390 | }
391 |
392 | var wrapped = new Token(token, inside? _.tokenize(match, inside) : match, alias, match, greedy);
393 |
394 | args.push(wrapped);
395 |
396 | if (after) {
397 | args.push(after);
398 | }
399 |
400 | Array.prototype.splice.apply(strarr, args);
401 |
402 | if (delNum != 1)
403 | { _.matchGrammar(text, strarr, grammar, i, pos, true, token); }
404 |
405 | if (oneshot)
406 | { break; }
407 | }
408 | }
409 | }
410 | },
411 |
412 | tokenize: function tokenize(text, grammar, language) {
413 | var strarr = [text];
414 |
415 | var rest = grammar.rest;
416 |
417 | if (rest) {
418 | for (var token in rest) {
419 | grammar[token] = rest[token];
420 | }
421 |
422 | delete grammar.rest;
423 | }
424 |
425 | _.matchGrammar(text, strarr, grammar, 0, 0, false);
426 |
427 | return strarr;
428 | },
429 |
430 | hooks: {
431 | all: {},
432 |
433 | add: function add (name, callback) {
434 | var hooks = _.hooks.all;
435 |
436 | hooks[name] = hooks[name] || [];
437 |
438 | hooks[name].push(callback);
439 | },
440 |
441 | run: function run (name, env) {
442 | var callbacks = _.hooks.all[name];
443 |
444 | if (!callbacks || !callbacks.length) {
445 | return;
446 | }
447 |
448 | for (var i=0, callback; callback = callbacks[i++];) {
449 | callback(env);
450 | }
451 | },
452 | },
453 | };
454 |
455 | var Token = _.Token = function (type, content, alias, matchedStr, greedy) {
456 | this.type = type;
457 | this.content = content;
458 | this.alias = alias;
459 | // Copy of the full string this token was created from
460 | this.length = (matchedStr || '').length | 0;
461 | this.greedy = !!greedy;
462 | };
463 |
464 | Token.stringify = function (o, language, parent) {
465 | if (typeof o === 'string') {
466 | return o;
467 | }
468 |
469 | if (_.util.type(o) === 'Array') {
470 | return o.map(function (element) {
471 | return Token.stringify(element, language, o);
472 | }).join('');
473 | }
474 |
475 | var env = {
476 | type: o.type,
477 | content: Token.stringify(o.content, language, parent),
478 | tag: 'span',
479 | classes: ['token', o.type],
480 | attributes: {},
481 | language: language,
482 | parent: parent,
483 | };
484 |
485 | if (o.alias) {
486 | var aliases = _.util.type(o.alias) === 'Array' ? o.alias : [o.alias];
487 | Array.prototype.push.apply(env.classes, aliases);
488 | }
489 |
490 | _.hooks.run('wrap', env);
491 |
492 | var attributes = Object.keys(env.attributes).map(function (name) {
493 | return name + '="' + (env.attributes[name] || '').replace(/"/g, '"') + '"';
494 | }).join(' ');
495 |
496 | return ("<" + (env.tag) + " class=\"" + (env.classes.join(' ')) + "\"" + (attributes ? ' ' + attributes : '') + ">" + (env.content) + "");
497 | };
498 |
499 | if (!_self.document) {
500 | if (!_self.addEventListener) {
501 | // in Node.js
502 | return _self.Prism;
503 | }
504 |
505 | if (!_.disableWorkerMessageHandler) {
506 | // In worker
507 | _self.addEventListener('message', function (evt) {
508 | var message = JSON.parse(evt.data),
509 | lang = message.language,
510 | code = message.code,
511 | immediateClose = message.immediateClose;
512 |
513 | _self.postMessage(_.highlight(code, _.languages[lang], lang));
514 | if (immediateClose) {
515 | _self.close();
516 | }
517 | }, false);
518 | }
519 |
520 | return _self.Prism;
521 | }
522 |
523 | // Get current script and highlight
524 | // let script = document.currentScript || [].slice.call(document.getElementsByTagName('script')).pop();
525 |
526 | // if (script) {
527 | // _.filename = script.src;
528 |
529 | // if (!_.manual && !script.hasAttribute('data-manual')) {
530 | // if (document.readyState !== 'loading') {
531 | // if (window.requestAnimationFrame) {
532 | // window.requestAnimationFrame(_.highlightAll);
533 | // } else {
534 | // window.setTimeout(_.highlightAll, 16);
535 | // }
536 | // } else {
537 | // document.addEventListener('DOMContentLoaded', _.highlightAll);
538 | // }
539 | // }
540 | // }
541 |
542 | return _self.Prism;
543 | }());
544 |
545 | if (typeof module !== 'undefined' && module.exports) {
546 | module.exports = Prism;
547 | }
548 |
549 | // hack for components to work correctly in node.js
550 | if (typeof global !== 'undefined') {
551 | global.Prism = Prism;
552 | }
553 |
554 |
555 | /* **********************************************
556 | Begin prism-markup.js
557 | ********************************************** */
558 |
559 | Prism.languages.markup = {
560 | comment: //,
561 | prolog: /<\?[\s\S]+?\?>/,
562 | doctype: //i,
563 | cdata: //i,
564 | tag: {
565 | pattern: /<\/?(?!\d)[^\s>\/=$<%]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i,
566 | greedy: true,
567 | inside: {
568 | tag: {
569 | pattern: /^<\/?[^\s>\/]+/i,
570 | inside: {
571 | punctuation: /^<\/?/,
572 | namespace: /^[^\s>\/:]+:/,
573 | },
574 | },
575 | 'attr-value': {
576 | pattern: /=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+)/i,
577 | inside: {
578 | punctuation: [
579 | /^=/,
580 | {
581 | pattern: /(^|[^\\])["']/,
582 | lookbehind: true,
583 | } ],
584 | },
585 | },
586 | punctuation: /\/?>/,
587 | 'attr-name': {
588 | pattern: /[^\s>\/]+/,
589 | inside: {
590 | namespace: /^[^\s>\/:]+:/,
591 | },
592 | },
593 |
594 | },
595 | },
596 | entity: /&#?[\da-z]{1,8};/i,
597 | };
598 |
599 | Prism.languages.markup.tag.inside['attr-value'].inside.entity = Prism.languages.markup.entity;
600 |
601 | // Plugin to make entity title show the real entity, idea by Roman Komarov
602 | Prism.hooks.add('wrap', function (env) {
603 |
604 | if (env.type === 'entity') {
605 | env.attributes['title'] = env.content.replace(/&/, '&');
606 | }
607 | });
608 |
609 | Prism.languages.xml = Prism.languages.markup;
610 | Prism.languages.html = Prism.languages.markup;
611 | Prism.languages.mathml = Prism.languages.markup;
612 | Prism.languages.svg = Prism.languages.markup;
613 |
614 |
615 | /* **********************************************
616 | Begin prism-css.js
617 | ********************************************** */
618 |
619 | Prism.languages.css = {
620 | comment: /\/\*[\s\S]*?\*\//,
621 | atrule: {
622 | pattern: /@[\w-]+?.*?(?:;|(?=\s*\{))/i,
623 | inside: {
624 | rule: /@[\w-]+/,
625 | // See rest below
626 | },
627 | },
628 | url: /url\((?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,
629 | selector: /[^{}\s][^{};]*?(?=\s*\{)/,
630 | string: {
631 | pattern: /("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
632 | greedy: true,
633 | },
634 | property: /[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,
635 | important: /\B!important\b/i,
636 | function: /[-a-z0-9]+(?=\()/i,
637 | punctuation: /[(){};:]/,
638 | };
639 |
640 | Prism.languages.css.atrule.inside.rest = Prism.languages.css;
641 |
642 | if (Prism.languages.markup) {
643 | Prism.languages.insertBefore('markup', 'tag', {
644 | style: {
645 | pattern: /()[\s\S]*?(?=<\/style>)/i,
646 | lookbehind: true,
647 | inside: Prism.languages.css,
648 | alias: 'language-css',
649 | greedy: true,
650 | },
651 | });
652 |
653 | Prism.languages.insertBefore('inside', 'attr-value', {
654 | 'style-attr': {
655 | pattern: /\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,
656 | inside: {
657 | 'attr-name': {
658 | pattern: /^\s*style/i,
659 | inside: Prism.languages.markup.tag.inside,
660 | },
661 | punctuation: /^\s*=\s*['"]|['"]\s*$/,
662 | 'attr-value': {
663 | pattern: /.+/i,
664 | inside: Prism.languages.css,
665 | },
666 | },
667 | alias: 'language-css',
668 | },
669 | }, Prism.languages.markup.tag);
670 | }
671 |
672 | /* **********************************************
673 | Begin prism-clike.js
674 | ********************************************** */
675 |
676 | Prism.languages.clike = {
677 | comment: [
678 | {
679 | pattern: /(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,
680 | lookbehind: true,
681 | },
682 | {
683 | pattern: /(^|[^\\:])\/\/.*/,
684 | lookbehind: true,
685 | greedy: true,
686 | } ],
687 | string: {
688 | pattern: /(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
689 | greedy: true,
690 | },
691 | 'class-name': {
692 | pattern: /((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[\w.\\]+/i,
693 | lookbehind: true,
694 | inside: {
695 | punctuation: /[.\\]/,
696 | },
697 | },
698 | keyword: /\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,
699 | boolean: /\b(?:true|false)\b/,
700 | function: /[a-z0-9_]+(?=\()/i,
701 | number: /\b0x[\da-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:e[+-]?\d+)?/i,
702 | operator: /--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,
703 | punctuation: /[{}[\];(),.:]/,
704 | };
705 |
706 |
707 | /* **********************************************
708 | Begin prism-javascript.js
709 | ********************************************** */
710 |
711 | Prism.languages.javascript = Prism.languages.extend('clike', {
712 | keyword: /\b(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,
713 | number: /\b(?:0[xX][\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+|NaN|Infinity)\b|(?:\b\d+\.?\d*|\B\.\d+)(?:[Ee][+-]?\d+)?/,
714 | // Allow for all non-ASCII characters (See http://stackoverflow.com/a/2008444)
715 | function: /[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*\()/i,
716 | operator: /-[-=]?|\+[+=]?|!=?=?|<>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/,
717 | });
718 |
719 | Prism.languages.insertBefore('javascript', 'keyword', {
720 | regex: {
721 | pattern: /((?:^|[^$\w\xA0-\uFFFF."'\])\s])\s*)\/(\[[^\]\r\n]+]|\\.|[^/\\\[\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})\]]))/,
722 | lookbehind: true,
723 | greedy: true,
724 | },
725 | // This must be declared before keyword because we use "function" inside the look-forward
726 | 'function-variable': {
727 | pattern: /[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=\s*(?:function\b|(?:\([^()]*\)|[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/i,
728 | alias: 'function',
729 | },
730 | constant: /\b[A-Z][A-Z\d_]*\b/,
731 | });
732 |
733 | Prism.languages.insertBefore('javascript', 'string', {
734 | 'template-string': {
735 | pattern: /`(?:\\[\s\S]|\${[^}]+}|[^\\`])*`/,
736 | greedy: true,
737 | inside: {
738 | interpolation: {
739 | pattern: /\${[^}]+}/,
740 | inside: {
741 | 'interpolation-punctuation': {
742 | pattern: /^\${|}$/,
743 | alias: 'punctuation',
744 | },
745 | rest: null, // See below
746 | },
747 | },
748 | string: /[\s\S]+/,
749 | },
750 | },
751 | });
752 | Prism.languages.javascript['template-string'].inside.interpolation.inside.rest = Prism.languages.javascript;
753 |
754 | if (Prism.languages.markup) {
755 | Prism.languages.insertBefore('markup', 'tag', {
756 | script: {
757 | pattern: /()[\s\S]*?(?=<\/script>)/i,
758 | lookbehind: true,
759 | inside: Prism.languages.javascript,
760 | alias: 'language-javascript',
761 | greedy: true,
762 | },
763 | });
764 | }
765 |
766 | Prism.languages.js = Prism.languages.javascript;
767 |
768 | (function(){ if(typeof document !== 'undefined'){ var head=document.head||document.getElementsByTagName('head')[0], style=document.createElement('style'), css=""; style.type='text/css'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style); } })();
769 |
770 | var CodeHighlight = {render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"codeBlock"},[_c('pre',{class:_vm.languageClass},[_c('code',[_vm._t("default")],2)])])},staticRenderFns: [],
771 | name: 'code-highlight',
772 | props: {
773 | language: {
774 | type: String,
775 | default: 'javascript',
776 | },
777 | },
778 | computed: {
779 | languageClass: function languageClass() {
780 | return ("language-" + (this.language));
781 | },
782 | },
783 | mounted: function mounted() {
784 | Prism.highlightAllUnder(this.$refs.codeBlock);
785 | },
786 |
787 | beforeUpdate: function beforeUpdate() {
788 | if(this.$slots.default[0].text){
789 | var newText = this.$slots.default[0].text.replace(/^[\r\n\s]*|[\r\n\s]*$/g, '');
790 | this.$el.querySelector('code').textContent = newText;
791 | Prism.highlightAllUnder(this.$refs.codeBlock);
792 | }
793 | },
794 | };
795 |
796 | function registerDirective (el) {
797 | Prism.highlightAllUnder(el);
798 | }
799 |
800 | // Import vue component
801 |
802 | // Declare install function executed by Vue.use()
803 | function install(Vue) {
804 | if (install.installed) { return; }
805 | install.installed = true;
806 | Vue.directive('highlight', registerDirective);
807 | }
808 |
809 | // Create module definition for Vue.use()
810 | var plugin = {
811 | install: install,
812 | };
813 |
814 | // Auto-install when vue is found (eg. in browser via