Hightlight.js เป็น syntax higlighter ที่เขียนจาก JavaScript เพื่อใช้ทำงานผ่าน web browser ได้ รองรับหลากหลายภาษา และไม่ depend กับ framework อื่น ๆ ข้อมูลอื่น ๆ | อ่านเพิ่มได้ที่ https://highlightjs.org

สำหรับ Hightlight.js มีภาษาที่เราจะต้องไปนำมาเพิ่มเองสามารถเขาไปดู Demo ได้ที่ https://highlightjs.org/demo
ใครที่ใช้ CDN ก็สามารถไปค้นหา library ต่อได้ที่ https://cdnjs.com/libraries/highlight.js

เมื่อเราเลือกได้ตามที่ต้องการแล้วก็นำมาว่าไว้ในส่วนของ tag head ใน html ได้เลย

<!-- Syntax Highlighter -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js'/>
<!-- Language -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/javascript.min.js'/>
<!-- Theme -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark-dimmed.min.css' rel='stylesheet'/>
    
<script>
document.onreadystatechange = () => {
	if(document.readyState === "complete") {
		hljs.highlightAll();
	}        
}  
</script>

วิธีการใช้งานให้เรานำ code ของเราไปวางใน tag code และ pre

<pre><code class="language-html">
วางตรงนี้ และให้ระวังเครื่องหมาย < และ >
เราจะต้องใช้ &lt; และ &gt; แทนภายใน tag code และ pre
</code></pre>