部落格要放程式碼的時候，需要一些套件幫忙換顏色什麼的，讓程式碼更容易閱讀些
我的部落格很久以前就在用 SyntaxHighlighter 3
不過今天突然發現本來用的網域服務要收掉了，必須要把 SyntaxHighlighter 的 JavaScript 換地方放
此外同時也發現 SyntaxHighlighter 4 出現在 Github [1] 上，所以就順便嘗試了升級。
要使用 SyntaxHighlighter 4，需要多做一點事，因為現在它改成要用 building tool。
簡要來說，要做的事情可以參考 SyntaxHighlighter 官方的文件 [2]，有以下幾項：
- 從 Github 上把程式碼下載下來
- 透過 npm 把 SyntaxHighlighter 的 JS 和 CSS 檔產生出來
- 把建置出來的 JS 和 CSS 檔上傳到網路上
- 在部落格上更新原始碼，讓部落格連結到上傳的 JS 和 CSS
安裝 npm
因為我的電腦沒有 npm 指令，因此最開始需要先安裝 npm（node.js 的套件管理工具）。
在 Windows 上也蠻單純的，就是去 node.js 官網上下載安裝檔 [3]，然後安裝就好了。
安裝完可以開 cmd 之類的命令列，用以下的指令測試一下。
C:\>npm -v 3.10.10
npm 運作正常的話，應該會像上面這樣印出版本。
以 Git Bash 下載程式碼並產生 SyntaxHighlighter 程式
接著因為需要使用 git 指令下載程式碼，因此建議用 Git Bash 做以下的動作。
不過其實也只有最開始的動作是 git 指令，只是後面方便起見就直接在 Git Bash 上一起做完了～。
git clone https://github.com/syntaxhighlighter/syntaxhighlighter.git cd syntaxhighlighter npm install ./node_modules/gulp/bin/gulp.js setup-project
上述的指令中，第一行是把程式碼從 Github 上下載下來，接著後面就是按照 SyntaxHighlighter 官方文件 [2] 的指示做了 XD
比較需要注意的是，setup-project 那個指令會執行很久….。
執行完環境建置後，接下來就要開始產生程式了。
./node_modules/gulp/bin/gulp.js --brushes=all --theme=default build
build 執行後，會在 ./dist 目錄中產生四個檔案，包含 index.html、syntaxhighlighter.js、syntaxhighlighter.js.map 和 theme.css
其中其實我也不知道 .map 檔到底是不是有用的東西，不過反正我還是有把它上傳到網路上就是了。
上傳 SyntaxHighlighter 到網路空間
因為檔案本身是靜態檔案，因此我是直接選擇放在 Github.io～XD
速度會遠比之前放在免費的網路空間快，而且又是免費的。
這裡我放的是 syntaxhighlighter.js、syntaxhighlighter.js.map 和 theme.css 三個檔案，可以直接參考這裡 XD
在部落格上設定引用 SyntaxHighlighter
各個部落格設定方法不太一樣，不過總之就是讓部落格的每一頁的 <head> 裡都有下面這兩行就是了。
<script type="text/javascript" src="syntaxhighlighter.js" /> <link type="text/css" rel="stylesheet" href="theme.css" />
其中當然路徑需要調整成自己的路徑。也就是 src=”….” 和 href=”….”那裡。
沒有留言:
張貼留言