ប្រើ Pre tag ដើម្បីហាយឡាយពណ៌ចម្រុះទៅលើកូដ

on
​​   ដូចដែលអ្នកទាំងអស់គ្នាដឹងរួចមកហើយថា Pre tag គឺជា tag មួយ​ ដែលវាគ្របដណ្តប់កូដទាំង មូលរាល់អ្វីៗ ដែលស្ថិតនៅក្នុង Pre tag គឺវាមានភាពស្រស់ស្អាត ហើយភាគច្រើនគេប្រើ Pre tag ដើម្បីដាក់បង្ហាញកូដភាសា ផ្សេងៗ។
   ក្នុងគន្លឹះនេះខ្ញុំនឹងប្រើ Highlight.js Plugin មួយប្រភេទ ដើម្បីធ្វើការដាក់ពណ៌ចម្រុះទៅអោយកូដ របស់អ្នកមាន ភាពស្រស់ស្អាតងាយស្រួលមើល និងទាក់ទាញផងដែរ។

១-សូមចូលទៅកាន់គណនីប្លក់របស់អ្នក
២-ចូលទៅកាន់ Theme បន្ទាប់មក Edit HTML
៣-ចម្លងកូដខាងក្រោមដាក់ពីខាងក្រោម <head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/atom-one-dark-reasonable.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
៤-ចម្លងកូដខាងក្រោមដាក់ពីខាងលើ </body> 
<script type='text/javascript'>
//<![CDATA[
// script initialisation for 'pre' tags
$(document).ready(function(){$("pre").each(function(c,h){hljs.highlightBlock(h)})});
// Single Click Syntax
var pres=document.getElementsByTagName("pre");for(var i=0;i<pres.length;i++){pres[i].addEventListener("click",function(){var selection=getSelection();var range=document.createRange();range.selectNodeContents(this);selection.removeAllRanges();selection.addRange(range)},false)};
//]]>
</script>
៥-ចុចពាក្យ Save Theme។
៦-ចម្លងកូដខាងក្រោមដាក់ចូលទៅក្នុង Blog Post(ប្តូរទៅកាន់ HTML Tab) 
<pre>Your Codes Here...</pre>
បញ្ជាក់៖ រាល់កូដភាសាទាំងអស់តម្រូវឲបម្លែងទៅជា Entity ជាមុនសិន។
៧-ចុចពាក្យ Publish ជាការស្រេច៕

Comments

Post a Comment