ปกติ 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;}
```จบนะ!!!
