Generic Syntax Highlighter - Làm đẹp code cực nhẹ và nhanh cho Blog

Làm đẹp code thường được các Blog về thủ thuật áp dụng. Có nhiều script được dùng để làm việc này, Generic Syntax Highlighter là một trong số đó. Đây là script có dung lượng rất nhỏ (3KB), đủ đáp ứng được yêu cầu cơ bản. Bước 1: Đăng nhập Blogger › Mẫu › Chỉnh sửa HTML.

Bước 2: Thêm đoạn script bên dưới vào trước thẻ </body>:

<script type='text/javascript'>
!function(e){function t(e){return e=e.replace(/&quot;/g,'"').replace(/&apos;/g,"'").replace(/&#34;/g,'"').replace(/&#39;/g,"'"),'<span style="color:#000000">'+e.replace(RegExp("<.*?>|&lt;!\\-\\-[\\s\\S]*?\\-\\-&gt;|\\/\\/[^\\n]+|#\\s+[^\\n]+|\\/\\*[\\s\\S]*?\\*\\/|\"(?:\\\\.|[^\"\\n])*\"|'(?:\\\\.|[^'\\n])*'|`(?:\\\\.|[^`])*`|&lt;\\/?[\\w:!-]+.*?&gt;|&lt;\\?\\S*|\\?&gt;|\\/[^\\n]+\\/[gimuy]*|\\$\\w+|&amp;[^\\s;]+;|\\b(?:true|false|null)\\b|(?:\\d*\\.)?\\d+|\\b(?:a(?:bstract|lias|nd|rguments|rray|s(?:m|sert)?|uto)|b(?:ase|egin|ool(?:ean)?|reak|yte)|c(?:ase|atch|har|hecked|lass|lone|ompl|onst|ontinue)|de(?:bugger|cimal|clare|f(?:ault|er)?|init|l(?:egate|ete)?)|do|double|e(?:cho|ls?if|lse(?:if)?|nd|nsure|num|vent|x(?:cept|ec|p(?:licit|ort)|te(?:nds|nsion|rn)))|f(?:allthrough|alse|inal(?:ly)?|ixed|loat|or(?:each)?|riend|rom|unc(?:tion)?)|global|goto|guard|i(?:f|mp(?:lements|licit|ort)|n(?:it|clude(?:_once)?|line|out|stanceof|t(?:erface|ernal)?)?|s)|l(?:ambda|et|ock|ong)|m(?:odule|utable)|NaN|n(?:amespace|ative|ext|ew|il|ot|ull)|o(?:bject|perator|r|ut|verride)|p(?:ackage|arams|rivate|rotected|rotocol|ublic)|r(?:aise|e(?:adonly|do|f|gister|peat|quire(?:_once)?|scue|strict|try|turn))|s(?:byte|ealed|elf|hort|igned|izeof|tatic|tring|truct|ubscript|uper|ynchronized|witch)|t(?:emplate|hen|his|hrows?|ransient|rue|ry|ype(?:alias|def|id|name|of))|u(?:n(?:checked|def(?:ined)?|ion|less|signed|til)|se|sing)|v(?:ar|irtual|oid|olatile)|w(?:char_t|hen|here|hile|ith)|xor|yield)\\b","g"),function(e){return e&&("<"===e[0]&&">"===e.slice(-1)||/^\W$/.test(e)||(e="&lt;?"===e.slice(0,5)||"?&gt;"===e||"&lt;!--"===e.slice(0,7)?'<span style="color:#008000;font-style:italic;">'+e+"</span>":"&lt;!"===e.slice(0,5)?'<span style="color:#4682B4;font-style:italic;">'+e+"</span>":"&lt;"===e.slice(0,4)&&"&gt;"===e.slice(-4)?'<span style="color:inherit;">'+n(e)+"</span>":"/"!==e[0]&&"#"!==e[0]||!/^(\/\/|#\s+|\/\*)/.test(e)?-1!=="\"'`".indexOf(e[0])?'<span style="color:#008000;">'+e+"</span>":"/"===e[0]?'<span style="color:#4682B4;">'+e+"</span>":/^(\d*\.)?\d+$/.test(e)?'<span style="color:#0000FF;">'+e+"</span>":"true"===e||"false"===e||"null"===e?'<span style="color:#A52A2A;font-weight:bold;">'+e+"</span>":"$"===e[0]?'<span style="font-weight:bold;">'+e+"</span>":"&amp;"===e.slice(0,5)&&";"===e.slice(-1)?'<span style="color:#FF4500;">'+e+"</span>":'<span style="color:#FF0000;">'+e+"</span>":'<span style="color:#808080;font-style:italic;">'+e+"</span>")),e})+"</span>"}function n(e){return e.replace(/&lt;(\/?)(\S+)(\s.*?)?&gt;/g,function(e,t,n,l){return n='<span style="color:#800080;font-weight:bold;">'+n+"</span>",l=l?l.replace(/(\s+)([^\s=]+)(?:=("(?:\\.|[^"])*"|'(?:\\.|[^'])*'|[^\s"']+))?/g,function(e,t,n,l){var s=t+'<span style="font-weight:bold;">'+n+"</span>";return l&&(s+='=<span style="color:#0000FF;">'+l+"</span>"),s}):"","&lt;"+t+n+l+"&gt;"})}e.GSH=function(e){if(e){e.nodeName&&(e=[e]);for(var n,l=0,s=e.length;s>l;++l)n=e[l],n.innerHTML=t(n.innerHTML)}},e.SH=t,e.SH_TAG=n}(window,document);
</script>
<script>
window.addEventListener("DOMContentLoaded", function() {
    GSH(document.querySelectorAll('pre > code:not(.no-highlight)'));
});
</script>

Bước 3: Lưu mẫu.
Bước 4: Cách dùng

• Đặt code đã được chuyển đổi về HTML code vào trong thẻ <pre><code>...</code></pre>
• Đặt class no-highlight cho thẻ nếu không muốn làm đẹp code

Nguồn: Tovic