ใส่สีให้ 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);
});
});ลองนำไปใช้งานกันดูนะ ผู้เขียนไปละ บาย
