เพิ่ม prism syntax highlighting ใน Ghost blog

Programing Nov 28, 2018

ปกติ Ghost รองรับการเขียน code formatting ลงในบทความอยู่แล้วผ่าน markdown ซึ่งการแสดงผลก็จะมีแต่ขาวกับดำ แต่ผมอยากให้มันมีการแยกสี code ให้ด้วย ซึ่งเราสามารถใช้ Prism syntax highlighting เป็นตัวช่วยให้เราได้

ให้เราเข้าเว็บ https://cdnjs.com/libraries/prism ก่อนเพื่อจะเอาไฟล์ .css และ .js มาใช้งานผ่าน CDN

ณ. วันที่เขียนบทความผมแนะนำให้เลือกใช้ version 1.13.0 เพราะถ้าใช้สูงกว่าตัวสี highlighting มีปัญหา

สิ่งแรกที่ต้องเอามาคือ theme ที่เป็น .css

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.13.0/themes/prism-tomorrow.min.css">

แล้วนำไปที่เมนู code injection ใส่ไว้ที่ส่วนของ Blog header

สิ่งที่สองคือ prism.min.js

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.13.0/prism.min.js"></script>

แล้วนำไปที่เมนู code injection ใส่ไว้ที่ส่วนของ Blog footer

สุดท้ายให้เราเลือกว่าจะให้ syntax highlighting กับภาษาอะไรบ้าง เช่น

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.13.0/components/prism-php.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.13.0/components/prism-css.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.13.0/components/prism-javascript.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.13.0/components/prism-bash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.13.0/components/prism-docker.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.13.0/components/prism-git.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.13.0/components/prism-json.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.13.0/components/prism-markdown.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.13.0/components/prism-nginx.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.13.0/components/prism-sass.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.13.0/components/prism-yaml.min.js"></script>

แล้วนำไปที่เมนู code injection ใส่ไว้ที่ส่วนของ Blog footer เช่นกัน โดยสรุปสุดท้ายจะเป็นแบบนี้

วิธีใช้งาน

วิธีใช้งานก็เขียน markdown ปกติ แต่ให้เราตามด้วยภาษาที่ต้องการให้มัน highlight เช่น

```css
p {color: red;}
```

จบนะ!!!

Arnon Kijlerdphon

IT manager & DevOps @Twin Synergy Co.,Ltd

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.