Crayon Theme

สำหรับ Themes เริ่มต้นคือ classic โดยไม่ต้องกำหนดชื่อ theme

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

จะได้

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

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

จะได้

เลือก Themes ชื่อ coy

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

จะได้

เลือก Themes ชื่อ dark-terminal

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

จะได้

เลือก Themes ชื่อ eclipse

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

จะได้

เลือก Themes ชื่อ epicgeeks

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

จะได้

เลือก Themes ชื่อ familiar

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

จะได้

เลือก Themes ชื่อ feeldesign

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

จะได้

เลือก Themes ชื่อ flatui-light

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

จะได้

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> 

จะได้

WordPress Plugin “SyntaxHighlighter Evolved”

SyntaxHighlighter Evolved

http://wordpress.org/extend/plugins/syntaxhighlighter/

เป็น Plugin ที่ช่วยให้การแสดง Source code สวยงามขึ้น

SyntaxHighlighterEvolved

โดย SyntaxHighlighter Evolved พัฒนาต่อมาจาก http://alexgorbatchev.com/SyntaxHighlighter/

การใช้งานเพียงบอกว่า sourcecode หรือ code ที่ใช้เป็นภาษาอะไร เช่น

[code language="css"]
your code here
[/code]

ใช้ language (หรือ lang) ในการกำหนดภาษาโปรแกรมที่ใช้ ภาษาที่ใช้ได้มีดังนี้ [อ้างอิง]

  • actionscript3
  • bash
  • clojure
  • coldfusion
  • cpp
  • csharp
  • css
  • delphi
  • erlang
  • fsharp
  • diff
  • groovy
  • html
  • javascript
  • java
  • javafx
  • matlab (keywords only)
  • objc
  • perl
  • php
  • text
  • powershell
  • python
  • r
  • ruby
  • scala
  • sql
  • vb
  • xml

ตัวอย่าง

Java

public class HelloJava {
	/**
	 * @param args
	 */
	public static void main(String[] args) {
		// TODO Auto-generated method stub
		System.out.println("Hello World!");
	}
}

หรือ CSS

#button {
    font-weight: bold;
    border: 2px solid #fff;
}