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

0

ปกติ 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 เช่นกัน โดยสรุปสุดท้ายจะเป็นแบบนี้

code-injection-ghost

วิธีใช้งาน

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

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

จบนะ!!!

ทิ้งคำตอบไว้

Please enter your comment!
Please enter your name here

10 + 2 =