MIS 腳印 logo

MIS 腳印

記錄 IT 學習的軌跡

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

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

WordPress.ORG

安裝外掛

至後台 > 外掛 > 安裝外掛,搜尋外掛 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:

設定啟始行號

啟始行號從 3 開始:

不顯示行號

高亮行號

設定單行

設定第 3 行高亮:

設定多行

使用 [] 方式來設定多行,例如設定第 2、3 和 4 行高亮:

設定程式的名稱

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

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

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

參考

發表迴響