เพิ่ม Syntax Highlighting และ Copy To Clipboard ให้เว็บที่ใช้ Ghost

สวัสดีครับ หากใครสังเกต จะเห็นว่าเว็บนี้มีส่วนที่เป็น Code Block มีการ highlight และก็มีปุ่ม Copy ซึ่งเป็นสิ่งที่ผมเพิ่งใส่เข้ามา นั่นเอง เนื่องจากว่าเว็บนี้ใช้ Ghost Blogging Platform สามารถเพิ่ม Syntax Highlighter ง่ายๆ โดยไม่ต้องแก้ไข Theme ก็ได้ วันนี้ก็เลยจะมาแชร์เทคนิคเล็กๆน้อยๆ ครับ

A complete guide to code snippets

Developers write code. Some developers write about writing code. But when they try to share that code on the web, everything that makes code more readable – like formatting and syntax highlighting – is gone!

TutorialsTeam Ghost

เวลาที่เราเขียนบทความ เราจะใช้ Code Block ก็คือพิมพ์ (```) แล้วกด Tab หรือ Enter

```<lang>

ทีนี้แต่ละ Theme จะ render ตัว Code Block แตกต่างกัน บาง Theme ก็ทำไว้ให้แล้ว บาง Theme ก็ยังไม่ได้รองรับ Highlight

Prism.js

เราจะใช้ Prism.js ในการทำ Code Syntax Highlight กัน สำหรับคนที่ไม่อยากแก้ไข Theme เราสามารถใช้ Code Injection ในหน้า Settings -> Advanced -> Code Injection ได้

Prism

Smashing Magazine

เพิ่ม JavaScript ในส่วน Footer (โดยใช้ link จาก CDN)

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

และเพิ่ม CSS ในส่วน Header (โดยผมใช้ Dracula Theme)

<link rel="stylesheet" href="https://unpkg.com/dracula-prism/dist/css/dracula-prism.css">

แต่ว่า มันยังไม่ detect แต่ละภาษา ของ Code Block เราต้องทำการโหลด prismjs component แต่ละภาษามาใช้ แต่ข้อดีคือ มันมี Plugin ชื่อ Autoloader มันจะ detect จาก Code Block ของเราเลย

Autoloader ▲ Prism plugins

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Copy to Clipboard

ทีนี้ผมอยากได้ปุ่ม Copy เวลาที่ user เอาเมาท์มาชี้ที่กล่อง Code Block ซึ่งก็มี Plugin อยู่แล้ว คือ Plugin Copy to Clipbaord นั่นเอง

Copy to Clipboard ▲ Prism plugins

ซึ่งตัว Plugin นี้ ก็ต้อง required Plugin อีกตัว ที่ชื่อ Toolbar

Toolbar ▲ Prism plugins

สิ่งที่ผมต้องเพิ่มคือ Toolbar และ Copy to Clipboard ผมก็เพิ่มลงไปต่อจาก prism-autoloader.min.js เลย

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

สุดท้าย เราก็จะได้ Copy to Clipboard แบบสวยๆ (อาจจะมี style ที่ 100% เพราะ theme หรือ prism css หรือ Toolbar css หรือ อะไรก็แล้วแต่ อันนี้ก็ปรับแต่งตามความสะดวกครับ อย่างเช่นของผม Button มันจะซ้อนๆ กับ span แล้วก็ background color โดน override

สรุป

หากใครใช้ Ghost และอยากมี Syntax Highligher สวยๆ พร้อม Copy to Clipboard ลองเอาไปใช้ดูนะครับ ทำได้ 2 วิธีคือ ปรับแต่ง Theme เอง หรือใช้ Code Injection

• ใช้ Prismjs ในการทำ Syntax Highlighter โหลด core และ stylesheet.
• ใช้ Plugin Autoloader เพื่อให้มัน detect ภาษาของ Code เรา ไม่ต้องโหลดแต่ละภาษาเอง
• ใช้ Plugin Toolbar และ Copy to Clibpard เพื่อทำปุ่ม Copy
• stylesheet ของ toolbar ผมไม่ได้ใช้ เนื่องจากมันตีกันกับ dracula theme ของผม

สุดท้ายแล้ว โค๊ดผมจะมีดังนี้

ส่วน Header

<link rel="stylesheet" href="https://unpkg.com/dracula-prism/dist/css/dracula-prism.css">

<!-- ส่วน toolbar css แล้วแต่ความชอบ
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.css" crossorigin="anonymous" referrerpolicy="no-referrer" /> -->

ส่วน Footer

<!-- prism.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Happy Coding ❤️