MIS 腳印

記錄 IT 學習的軌跡

WordPress 程式碼語法高亮外掛 SyntaxHighlighter Evolved 的最佳方式

在 WordPress.ORG 文章和頁面貼上顯示程式碼外掛,並採用最佳方式的 pre 標籤而非短碼 (Shortcode) ,並可設定要呈現的程式語言、顯示程式碼行號與高亮的行號。


安裝外掛

至後台 > 外掛 > 安裝外掛,搜尋外掛 SyntaxHighlighter Evolved,安裝完成並啟用外掛。

設定

設定值說明:

  • Highlighter Version:要使用哪個版本 (建議使用不須 Flash 支援的 Version 3.x )。
  • Load All Brushes:程式碼語法高亮直接加載 HTML <pre> 標籤而不使用短碼 (Shortcode)。

<pre> class 常用參數表

屬性 預設 說明
brush string 要呈現哪種程式語言,如 PHP、HTML、或 CSS ... (可至 SyntaxHighlighter - Bundled Brushes 查看所有支援語言)
class-name string 自訂 HTML 的 class 屬性名稱 (如須獨立定義需求才會用到)
first-line number 1 啟始行號 (必須定義於屬性 brush 之後,否則不會生效)
gutter boolean true 是否顯示行號
highlight number|array null 要高亮的行號 (可使用單一數值設定單行或用 [] 設定多行 )
title string 程式的名稱 (就是 <table><caption> 標籤)
html-script boolean false 呈現混合的程式碼 (Web 開發混合如 HTML、CSS 與 PHP 等多種語言時使用)

<pre> 範例

設定呈現的程式語言

呈現 HTML: 

<pre class="brush: html;">
    <h1>h1</h1>
    <h2>h2</h2>
    <p>p</p>
</pre>

設定啟始行號

啟始行號從 3 開始:

<pre class="brush: html; first-line: 3;">
    <h1>h1</h1>
    <h2>h2</h2>
    <p>p</p>
</pre>

不顯示行號

<pre class="brush: html; gutter: false;">
    <h1>h1</h1>
    <h2>h2</h2>
    <p>p</p>
</pre>

高亮行號

設定單行

<pre class="brush: html; highlight: 2;">
    <h1>h1</h1>
    <h2>h2</h2>
    <p>p</p>
</pre>

設定多行

使用 [] 方式來設定多行:

<pre class="brush: html; highlight: [2, 3, 4];">
    <h1>h1</h1>
    <h2>h2</h2>
    <p>p</p>
</pre>

設定程式的名稱

<pre class="brush: html title: '這個 HTML 程式的名稱';">
    <h1>h1</h1>
    <h2>h2</h2>
    <p>p</p>
</pre>

短碼 (Shortcode) 可用方式與參數

在設定頁面下方就可看到如下圖的使用方式:

  • Shortcode Parameters:可用參數。
  • Some example shortcodes:可使用的短碼 (Shortcode) 方式。

參考資料


發表迴響