Crayon Syntax Highlighter | Phaisarn Sutheebanjard

Contents

1การติดตั้ง Crayon Syntax Highlighter
2การใช้ Crayon Syntax Highlighter
3การ Highlight บรรทัดที่ต้องการ
4Themes

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

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

การใช้ Crayon Syntax Highlighter

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

[code]
<pre>
import { Component } from ‘@angular/core’;
import { AlertController } from ‘ionic-angular’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
</pre>
[/code]

จะได้

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

import { Component } from '@angular/core';

import { AlertController } from 'ionic-angular';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

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

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

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

import { Component } from '@angular/core';

import { AlertController } from 'ionic-angular';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

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

สั่งให้ Highlight บรรทัดที่ 5 และ 6
[code]
<pre class="lang:default mark:5,6 decode:true " >
…
…
</pre>
[/code]
จะได้

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

import { Component } from '@angular/core';

import { AlertController } from 'ionic-angular';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

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

[code]
<pre class="lang:default mark:5,6 highlight:0 decode:true " >
…
…
</pre>
[/code]

จะได้

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

import { Component } from '@angular/core';

import { AlertController } from 'ionic-angular';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

Themes

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

เลือก Themes ชื่อ coda-special-board
[code]
<pre class="theme:coda-special-board lang:default mark:5,6 decode:true " >
…
…
</pre>
[/code]
จะได้

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

import { Component } from '@angular/core';

import { AlertController } from 'ionic-angular';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})