ใส่สีให้ Code บนเว็บไชต์ด้วย highlight.js

การใส่สีให้กับโค้ดบนเว็บไซต์โดยใช้ highlight.js ผ่าน CDN สามารถทำได้โดยดำเนินการตามขั้นตอนต่อไปนี้:

เพิ่มลิงก์สคริปต์ของ highlight.js ด้านล่างนี้ลงในส่วน <head> ของหน้า HTML ของเว็บไซต์ของคุณ:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/pojoaque.min.css">

จากนั้นสร้าง tag script ใส่ src เป็น url ต่อไปนี้ลงไป

//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js

เมื่อเรียกดูหน้าเว็บไซต์ของคุณ โค้ดภายในแท็ก <code> จะถูกใส่สีด้วย highlight.js ตามคลาสของโค้ดที่คุณระบุ
สำหรับโค้ดภาษาที่ไม่ใช่ภาษา HTML, CSS หรือ JavaScript, คุณต้องระบุคลาสของโค้ดในแท็ก <code> เช่นเดียวกัน ตัวอย่างเช่นสำหรับ Python:

<pre><code>def greet():
    print("Hello, world!")
</code></pre>

หากคุณต้องการใช้งานภาษาโดยไม่มีคลาสที่เป็นส่วนหนึ่งของ highlight.js คุณสามารถใช้คลาส nohighlight สำหรับแท็ก <code> ได้ โดยตัวอย่างเช่น:

<pre><code class="nohighlight">
    print("Hello, world!")
</code></pre>

ตรวจสอบให้แน่ใจว่าคุณได้เพิ่มสคริปต์และลิงก์ไปยังไฟล์สไตล์ของ highlight.js และ highlight.js มาตรงกับ URL ในตัวอย่างนี้เพื่อให้การแสดงผลการใส่สีทำงานได้อย่างถูกต้องขึ้น

ตัวอย่างกันนำไปใช้งานจริงกับเว็บไชต์ของผู้เขขียนเอง

ขอแนะนำอีก 1 ตัวอย่างสำหรับการใช้ javascript ในการทำ auto highligth


document.addEventListener('DOMContentLoaded', (event) => {
    document.querySelectorAll('pre code').forEach((el) => {
        hljs.highlightElement(el);
    });
});

ลองนำไปใช้งานกันดูนะ ผู้เขียนไปละ บาย