Syntax Highlighter Là Gì?
Syntax Highlighter là một tính năng của trình soạn thảo văn bản được sử dụng để hiển thị các loại ngôn ngữ lập trình, tập lệnh hoặc đánh dấu khác nhau, chẳng hạn như HTML, CSS, JavaScript, v.v.Vậy Tại Sao Nên Sử Dụng Syntax Highlighter?
Sử dụng Syntax Highlighter trên web hoặc blog có chủ đề hướng dẫn là rất quan trọng, vì bằng cách sử dụng trình chỉnh sửa tính năng này, khách truy cập có thể dễ dàng phân biệt đâu là mã CSS, HTML hoặc Javascript với cách viết thông thường và bên cạnh đó việc sắp xếp đánh dấu trong bài viết trông gọn gàng hơn. .Cách Cài Đặt Syntax Highlighter
1. Chọn Chủ Đề và chọn Chỉnh Sửa HTML
2. Dán mã CSS vào trong lệnh <style>...</style> hoặc < b: skin <[ CDATA [ ... ]]> < / b: skin >
pre {
padding: .5em 1em;
margin: .5em 0;
white-space: pre;
word-wrap: normal;
overflow: auto;
background-color: #1B2426;
}
code {
font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, Monospace;
line-height: 16px;
color: #B43D3D;
background-color: #eee;
border: 1px solid #ddd;
padding: 1px 2px;
}
pre code {
display: block;
background: none;
border: none;
color: #B9BDB6;
direction: ltr;
text-align: left;
word-spacing: normal;
padding: 0 0;
}
code .token.punctuation {
color: #83405A;
}
pre code .token.punctuation {
color: #B9BDB6;
}
code .token.comment,
code .token.prolog,
code .token.doctype,
code .token.cdata {
color: #435A4D;
}
code .namespace {
opacity: .8;
}
code .token.property,
code .token.tag,
code .token.boolean,
code .token.number {
color: #5BA1CF;
}
code .token.selector,
code .token.attr-name,
code .token.string {
color: #986A7C;
}
pre code .token.selector,
pre code .token.attr-name,
pre code .token.string {
color: #E0E8FF;
}
code .token.entity,
code .token.url,
pre .language-css .token.string,
pre .style .token.string {
color: #E0E8FF;
}
code .token.operator {
color: #878A85;
}
code .token.atrule,
code .token.attr-value {
color: #48D30F;
}
pre code .token.atrule,
pre code .token.attr-value {
color: #48E638;
}
code .token.keyword {
color: #47A1CF;
font-style: italic;
}
code .token.comment {
font-style: italic;
}
code .token.regex {
color: #B43D3D;
}
code .token.important {
font-weight: bold;
}
code .token.entity {
cursor: help;
}
3. Dán mã Javascript dưới vào trên thẻ đóng </head> hoặc trên thẻ đóng </body>
<script>
//<![CDATA[/** *
Prism: Lightweight, robust, elegant syntax highlighting * MIT license http://www.opensource.org/licenses/mit-license.php/ * @author Lea Verou http://lea.verou.me */ ! function () { var a = /blang(?:uage)?-(?!*)(w+)b/i, b = self.Prism = { languages: { insertBefore: function (a, c, d, e) { e = e || b.languages; var f = e[a], g = {}; for (var h in f) if (f.hasOwnProperty(h)) { if (h == c) for (var i in d) d.hasOwnProperty(i) && (g[i] = d[i]); g[h] = f[h] } return e[a] = g }, DFS: function (a, c) { for (var d in a) c.call(a, d, a[d]), "[object Object]" === Object.prototype.toString.call(a) && b.languages.DFS(a[d], c) } }, highlightAll: function (a, c) { for (var f, d = document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'), e = 0; f = d[e++];) b.highlightElement(f, a === !0, c) }, highlightElement: function (d, e, f) { for (var g, h, i = d; i && !a.test(i.className);) i = i.parentNode; if (i && (g = (i.className.match(a) || [, ""])[1], h = b.languages[g]), h) { d.className = d.className.replace(a, "").replace(/s+/g, " ") + " language-" + g, i = d.parentNode, /pre/i.test(i.nodeName) && (i.className = i.className.replace(a, "").replace(/s+/g, " ") + " language-" + g); var j = d.textContent.trim(); if (j) { j = j.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/u00a0/g, " "); var k = { element: d, language: g, grammar: h, code: j }; if (b.hooks.run("before-highlight", k), e && self.Worker) { var l = new Worker(b.filename); l.onmessage = function (a) { k.highlightedCode = c.stringify(JSON.parse(a.data)), k.element.innerHTML = k.highlightedCode, f && f.call(k.element), b.hooks.run("after-highlight", k) }, l.postMessage(JSON.stringify({ language: k.language, code: k.code })) } else k.highlightedCode = b.highlight(k.code, k.grammar), k.element.innerHTML = k.highlightedCode, f && f.call(d), b.hooks.run("after-highlight", k) } } }, highlight: function (a, d) { return c.stringify(b.tokenize(a, d)) }, tokenize: function (a, c) { var d = b.Token, e = [a], f = c.rest; if (f) { for (var g in f) c[g] = f[g]; delete c.rest } a: for (var g in c) if (c.hasOwnProperty(g) && c[g]) { var h = c[g], i = h.inside, j = !!h.lookbehind || 0; h = h.pattern || h; for (var k = 0; k < e.length; k++) { var l = e[k]; if (e.length > a.length) break a; if (! (l instanceof d)) { h.lastIndex = 0; var m = h.exec(l); if (m) { j && (j = m[1].length); var n = m.index - 1 + j, m = m[0].slice(j), o = m.length, p = n + o, q = l.slice(0, n + 1), r = l.slice(p + 1), s = [k, 1]; q && s.push(q); var t = new d(g, i ? b.tokenize(m, i) : m); s.push(t), r && s.push(r), Array.prototype.splice.apply(e, s) } } } } return e }, hooks: { all: {}, add: function (a, c) { var d = b.hooks.all; d[a] = d[a] || [], d[a].push(c) }, run: function (a, c) { var d = b.hooks.all[a]; if (d && d.length) for (var f, e = 0; f = d[e++];) f(c) } } }, c = b.Token = function (a, b) { this.type = a, this.content = b }; if (c.stringify = function (a) { if ("string" == typeof a) return a; if ("[object Array]" == Object.prototype.toString.call(a)) { for (var d = 0; d < a.length; d++) a[d] = c.stringify(a[d]); return a.join("") } var e = { type: a.type, content: c.stringify(a.content), tag: "span", classes: ["token", a.type], attributes: {} }; "comment" == e.type && (e.attributes.spellcheck = "true"), b.hooks.run("wrap", e); var f = ""; for (var g in e.attributes) f += g + '="' + (e.attributes[g] || "") + '"'; return "<" + e.tag + ' class="' + e.classes.join(" ") + '" ' + f + ">" + e.content + "</" + e.tag + ">" }, !self.document) return void self.addEventListener("message", function (a) { var c = JSON.parse(a.data), d = c.language, e = c.code; self.postMessage(JSON.stringify(b.tokenize(e, b.languages[d]))), self.close() }, !1); var d = document.getElementsByTagName("script"); d = d[d.length - 1], d && (b.filename = d.src, document.addEventListener && !d.hasAttribute("data-manual") && document.addEventListener("DOMContentLoaded", b.highlightAll)) } (), Prism.languages.markup = { comment: /<!--[wW]*?--(>|>)/g, prolog: /<?.+??>/, doctype: /<!DOCTYPE.+?>/, cdata: /<![CDATA[[wW]+?]]>/i, tag: { pattern: /</?[w:-]+s*[wW]*?>/gi, inside: { tag: { pattern: /^</?[w:-]+/i, inside: { punctuation: /^</?/, namespace: /^[w-]+?:/ } }, "attr-value": { pattern: /=(('|")[wW]*?(2)|[^s>]+)/gi, inside: { punctuation: /=/g } }, punctuation: //?>/g, "attr-name": { pattern: /[w:-]+/g, inside: { namespace: /^[w-]+?:/ } } } }, entity: /&#?[da-z]{1,8};/gi }, Prism.hooks.add("wrap", function (a) { "entity" === a.type && (a.attributes.title = a.content.replace(/&/, "&")) }), Prism.languages.css = { comment: //*[wW]*?*//g, atrule: /@[w-]+?(s+.+)?(?=s*{|s*;)/gi, url: /url((["']?).*?1)/gi, selector: /[^{}s][^{}]*(?=s*{)/g, property: /(b|B)[a-z-]+(?=s*:)/gi, string: /("|')(\?.)*?1/g, important: /B!importantb/gi, ignore: /&(lt|gt|amp);/gi, punctuation: /[{};:]/g }, Prism.languages.markup && Prism.languages.insertBefore("markup", "tag", { style: { pattern: /(<|<)style[wW]*?(>|>)[wW]*?(<|<)/style(>|>)/gi, inside: { tag: { pattern: /(<|<)style[wW]*?(>|>)|(<|<)/style(>|>)/gi, inside: Prism.languages.markup.tag.inside }, rest: Prism.languages.css } } }), Prism.languages.javascript = { comment: { pattern: /(^|[^\])(/*[wW]*?*/|//.*?(r?n|$))/g, lookbehind: !0 }, string: /("|')(\?.)*?1/g, regex: { pattern: /(^|[^/]) / ( ? ! / )( [. + ?] | \. | [ ^ /rn])+/[gim]{0,3}(?=s*($|[rn,.;})]))/g, lookbehind: !0 }, keyword: /b(var|let|if|else|while|do|for|return|in|instanceof|function|new|with|typeof|try|catch|finally|null|break|continue)b/g, "boolean": /b(true|false)b/g, number: /b-?(0x)?d*.?d+b/g, operator: /[-+]{1,2}|!|=?<|=?>|={1,2}|(&){1,2}||?||?|*|//g, ignore: /&(lt|gt|amp);/gi, punctuation: /[{}[];(),.:]/g }, Prism.languages.markup && Prism.languages.insertBefore("markup", "tag", { script: { pattern: /(<|<)script[wW]*?(>|>)[wW]*?(<|<)/script(>|>)/gi, inside: { tag: { pattern: /(<|<)script[wW]*?(>|>)|(<|<)/script(>|>)/gi, inside: Prism.languages.markup.tag.inside }, rest: Prism.languages.javascript } } }), Prism.languages.java = { comment: { pattern: /(^|[^\])(/*[wW]*?*/|//.*?(r?n|$))/g, lookbehind: !0 }, string: /("|')(\?.)*?1/g, keyword: /b(abstract|continue|for|new|switch|assert|default|goto|package|synchronized|boolean|do|if|private|this|break|double|implements|protected|throw|byte|else|import|public|throws|case|enum|instanceof|return|transient|catch|extends|int|short|try|char|final|interface|static|void|class|finally|long|strictfp|volatile|const|float|native|super|while)b/g, "boolean": /b(true|false)b/g, number: /b0b[01]+b|b0x[da-f]*.?[da-fp-]+b|bd*.?d+[e]?[d]*[df]b|Wd*.?d+b/gi, operator: { pattern: /([^.]|^)([-+]{1,2}|!|=?<|=?>|={1,2}|(&){1,2}||?||?|*|/|%|^|(<){2}|($gt;){2,3}|:|~)/g, lookbehind: !0 }, ignore: /&(lt|gt|amp);/gi, punctuation: /[{}[];(),.:]/g };
//]]>
</script>
4. Lưu lại giao diện
Cách Sử Dụng
Để sử dụng khi viết bài các bạn chuyển qua viết bằng HTML và sử dụng những thẻ class như sau
<pre><code class="language-markup"> ... Mã HTML ... </code></pre>
<pre><code class="language-css"> ... Mã CSS ... </code></pre>
<pre><code class="language-javascript"> ... Mã JavaScript ... </code></pre>
<pre><code class="language-java"> ... Mã Java ... </code></pre>
Mỗi loại ngôn ngữ nó sẽ tương ứng với mỗi thẻ class cụ thể:
- HTML, XML, PHP - Ứng với
language-markup - CSS - Ứng với
language-css - JavaScript Ứng với
language-javascript - Java Ứng với
language-java