Crayon Syntax Highlighter

Crayon Syntax Highlighter

การติดตั้ง Crayon Syntax Highlighter

ให้ล็อคอินเข้าเป็น Admin แล้วไปที่เมนู Plugins
จากนั้นก็ค้นหาด้วยคำว่า Crayon Syntax Highlighter
แล้วก็เลือก Install และ Activate

การใช้ Crayon Syntax Highlighter

ทำได้ง่ายๆ เพียงแค่ใช้แท็ค <pre> </pre> ครอบโค๊ดไว้ เช่น

<pre>
import { Component } from '@angular/core';
import { AlertController } from 'ionic-angular';
 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
</pre> 

จะได้

หรือจะกดปุ่ม crayon ก็ได้ โดยหลังจากกดก็จะมี pop-up ขึ้นมาให้ใส่โค๊ด แล้วก็ Add
มันก็จะสร้างแท็ค <pre> </pre> พร้อมกำหนด class ที่ใช้ปรับแต่งการแสดงผลให้ ดังนี้

<pre class="lang:default decode:true " >
...
...
</pre> 

จากตัวอย่างเป็นค่า default เพราะฉะนั้นผลลัพธ์จะยังเหมือนเดิม

การ Highlight บรรทัดที่ต้องการ

สั่งให้ Highlight บรรทัดที่ 5 และ 6

<pre class="lang:default mark:5,6 decode:true " >
...
...
</pre> 

จะได้

สั่งให้ไม่ต้อง Highlight คำสำคัญ (keywords)

<pre class="lang:default mark:5,6 highlight:0 decode:true " >
...
...
</pre> 

จะได้

Themes

สำหรับ Themes เริ่มต้นคือ classic

เลือก Themes ชื่อ coda-special-board

<pre class="theme:coda-special-board lang:default mark:5,6 decode:true " >
...
...
</pre> 

จะได้