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

April 11, 2018 May 18, 2018
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
Tags: #Syntax , #Highlighter, #Làm đẹp code,
Click to show more

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

Ads Above Article

Ads Inside Article 1

Ads Inside Article 2

Ads Bellow Article