WordPress plugin แสดง TOC แบบรองรับหลายหน้า

การแสดง TOC แบบรองรับ multipage ด้วย plugin ชื่อ Extended Table of Contents (with nextpage support) 

 

การติดตั้งปลั๊กอิน Extended Table of Contents

เข้า WordPress admin
แล้วเลือกเมนู Plugins > Add Plugins ค้นหาด้วยคำว่า toc

จะปรากฏหน้าจอ

ทำการติดตั้งโดยกด Install Now เสร็จแล้วกด Activate

Crayon Theme

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

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

จะได้

Continue reading

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> 

จะได้

Continue reading

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;
}