forked from highlightjs/highlight.js
/
vue.js
63 lines (58 loc) · 1.67 KB
/
vue.js
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
// @ts-nocheck
import { escapeHTML } from "../lib/utils";
function hasValueOrEmptyAttribute(value) {
return Boolean(value || value === "");
}
export const Component = {
props: ["language", "code", "autodetect"],
data: function() {
return {
detectedLanguage: "",
unknownLanguage: false
};
},
computed: {
className() {
if (this.unknownLanguage) return "";
return "hljs " + this.detectedLanguage;
},
highlighted() {
// no idea what language to use, return raw code
if (!this.autoDetect && !hljs.getLanguage(this.language)) {
console.warn(`The language "${this.language}" you specified could not be found.`);
this.unknownLanguage = true;
return escapeHTML(this.code);
}
let result;
if (this.autoDetect) {
result = hljs.highlightAuto(this.code);
this.detectedLanguage = result.language;
} else {
result = hljs.highlight(this.language, this.code, this.ignoreIllegals);
this.detectedLanguage = this.language;
}
return result.value;
},
autoDetect() {
return !this.language || hasValueOrEmptyAttribute(this.autodetect);
},
ignoreIllegals() {
return true;
}
},
// this avoids needing to use a whole Vue compilation pipeline just
// to build Highlight.js
render(createElement) {
return createElement("pre", {}, [
createElement("code", {
class: this.className,
domProps: { innerHTML: this.highlighted }})
]);
}
// template: `<pre><code :class="className" v-html="highlighted"></code></pre>`
};
export const VuePlugin = {
install(Vue) {
Vue.component('highlightjs', Component);
}
};