Cách Tạo Khung Chứa Code Cực Đẹp Cho Blogspot Của Bạn

Cách Tạo Khung Chứa Code Cực Đẹp Cho Blogspot Của Bạn

Trung thu rồi có ai ở nhà giống mình không ? Không đi chơi nên ở nhà viết bài cho các bạn nè . Việc làm đẹp cho blog của bạn chắc hẳn ai cũng quan tâm đúng không nào .Blog của bạn đẹp khi tất cả các thành phần trong blog phải đẹp mắt đúng không nào ? Vậy thì bài viết là 1 trong số đó . Hôm nay mình sẽ hướng dẫn các bạn cách thêm khung chứa code cho blog cực chất .



Cách tạo khung chứa code cho blog .


Bước 1 : Chọn Chủ Đề -> Chỉnh Sửa HTML .

Bước 2 Dán đoạn CSS sau trong tag style - /style hoặc bên trên tag /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;
}

Bước 3 : Thêm đoạn Javascrip sau bên trên tag /head hoặc /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, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").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: /&lt;!--[wW]*?--(&gt;|&gt;)/g, prolog: /&lt;?.+??&gt;/, doctype: /&lt;!DOCTYPE.+?&gt;/, cdata: /&lt;![CDATA[[wW]+?]]&gt;/i, tag: { pattern: /&lt;/?[w:-]+s*[wW]*?&gt;/gi, inside: { tag: { pattern: /^&lt;/?[w:-]+/i, inside: { punctuation: /^&lt;/?/, namespace: /^[w-]+?:/ } }, "attr-value": { pattern: /=(('|")[wW]*?(2)|[^s>]+)/gi, inside: { punctuation: /=/g } }, punctuation: //?&gt;/g, "attr-name": { pattern: /[w:-]+/g, inside: { namespace: /^[w-]+?:/ } } } }, entity: /&amp;#?[da-z]{1,8};/gi }, Prism.hooks.add("wrap", function (a) { "entity" === a.type && (a.attributes.title = a.content.replace(/&amp;/, "&")) }), 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: /(&lt;|<)style[wW]*?(>|&gt;)[wW]*?(&lt;|<)/style(>|&gt;)/gi, inside: { tag: { pattern: /(&lt;|<)style[wW]*?(>|&gt;)|(&lt;|<)/style(>|&gt;)/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}|!|=?&lt;|=?&gt;|={1,2}|(&amp;){1,2}||?||?|*|//g, ignore: /&(lt|gt|amp);/gi, punctuation: /[{}[];(),.:]/g }, Prism.languages.markup && Prism.languages.insertBefore("markup", "tag", { script: { pattern: /(&lt;|<)script[wW]*?(>|&gt;)[wW]*?(&lt;|<)/script(>|&gt;)/gi, inside: { tag: { pattern: /(&lt;|<)script[wW]*?(>|&gt;)|(&lt;|<)/script(>|&gt;)/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}|!|=?&lt;|=?&gt;|={1,2}|(&amp;){1,2}||?||?|*|/|%|^|(&lt;){2}|($gt;){2,3}|:|~)/g, lookbehind: !0 }, ignore: /&(lt|gt|amp);/gi, punctuation: /[{}[];(),.:]/g }; 
//]]>
</script>

Bước 4 : Lưu lại chủ đề là xong rồi .


Cách sử dụng .


Để sử dụng bạn chỉ cần thếm đoạn code sau vào văn bản :

<pre><code class="language-markup"></code></pre>
: Mã HTML
<pre><code class="language-css"></code></pre>
: Mã CSS
<pre><code class="language-javascrip"></code></pre>
: Mã Javascrip

Chúc các bạn thành công !