1. 程式人生 > >[WordPress]TekTea’s Blog啟用程式碼高亮外掛SyntaxHighlighter Evolved

[WordPress]TekTea’s Blog啟用程式碼高亮外掛SyntaxHighlighter Evolved

對於像TekTea這樣的技術部落格,是需要經常在文章裡貼各種程式語言的程式碼,預設的code標籤是不會高亮程式碼的關鍵詞,這樣就會影響程式碼在文章中的美觀和可讀性。本站啟用的程式碼高亮外掛則是“SyntaxHighlighter Evolved”,它是一個程式碼高亮、模式化的工具,能讓你的程式碼在網頁上以類似IDE編輯器裡的樣子高亮關鍵字這篇文章將詳細講解如何使用“SyntaxHighlighter Evolved”。

一、外掛用法:

  • 在程式碼前根據程式碼語言的不同加上不同的[%Lang]在程式碼後加上[/%Lang],%Lang = 你用的語言對應的Brush aliases(具體對應羅列於下)。例如[@cpp]#include <stdio.h>[/cpp](@去掉)。
  • 或者只用一次%Lang,[@code lang=%Lang]你的程式碼[/code]或者[@source lang=%Lang]你的程式碼[@source lang=%Lang],其中lang都可以換成language。

注意:
1. 新增新文章時就就需要手工編輯下了,還有一點要記住的是在插入程式碼前,要將編輯器切換到”HTML”模式
2. 建議使用這種格式:[@code lang=%Lang]你的程式碼[/code] (將code前的@去掉,同時將%Lang替換為你所需要高亮的程式碼語言,比如:c/java/ruby/shell/python)

二、功能說明:

1. 顯示程式碼行數
2. 支援收縮程式碼框
3. 支援在手機終端上顯示該外掛樣式

三、效果演示: