Moodle Academy Moodle Admin Basics

วิธีการติดตั้ง Highlight.js

วันนี้มีโอกาสได้ทดลองใช้ตัว Syntax Highlight หลายๆ ตัว ไม่ว่าจะเป็น Highlight.js หรือ Google Code Prettify ส่วนตัวแล้วผมจะเขียนโค้ด Python เป็นหลักเลยคิดว่าเจ้า Highlight.js น่าจะเหมาะสมที่สุด เสียดายที่มันยังไม่รองรับ line number หรือเรียกง่ายๆ ก็คือให้มันแสดงลำดับของตัวเลขบรรทัดในแต่ละคำสั่ง

..........



เอาล่ะ...มาเริ่มกันเลยดีกว่า

สำหรับการติดตั้งเจ้า Highlight.js ในที่นี้ผมจะใช้กับเว็บบล็อกส่วนตัวของผม ซึ่งผมใช้ของ blogger.com อยู่ครับ เรามาดูวิธีการติดตั้งกัน

1. หลังจากเข้าที่หน้า admin ใน blogger.com แล้ว ให้คลิกที่ "แม่แบบ" จากนั้นคลิกที่ "แก้ไข HTML" (ถ้ามองรูปด้านล่างไม่ชัดให้คลิกที่รูปจะทำให้รูปใหญ่ขึ้น)



2. จากนั้นให้ทำการ copy โค้ดด้านล่างใส่ไว้ในแท็ก <head>...</head>
    <link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css' rel='stylesheet'/>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js'/>
    <script>hljs.highlightAll();</script>

** คลิกที่รูปด้านล้างถ้าไม่เข้าใจ

3. เวลาเราจะใช้งาน เราก็แค่พิมพ์คำสั่งลงไประหว่างแท็ก <pre><code>.... คำสั่ง </code></pre>

เราก็จะได้ block ของโค้ดที่เราเขียนโดยมี Syntax highlight มาให้เรียบร้อย สุโค่ย!!
import datetime, os
from datetime import date

id = 100
dbpath = 'test.txt'

def showreport():
 print('No.')
 cost = 100 * 0.07

print('Start Program')
id = id + 1
showreport()
ผมพยายามหาวิธีการเพิ่ม line number ให้กับเจ้า Highlight.js แต่ก็ไม่มี (หรือมีอยู่แล้วแต่ผมไม่เห็น) สำหรับใครที่เคยใช้เจ้า Highlight.js ที่สามารถทำ line number ได้ก็ช่วยกรุณาบอกผมที จักเป็นพระคุณอย่างสูงครับ :)

ความคิดเห็น