關於部落格
繪圖 | 食記 | Web前端技術 | HTML | CSS | JavaScript 研究
  • 356394

    累積人氣

  • 25

    今日人氣

    3

    追蹤人氣

SyntaxHighlighter in Yam Blog

首先看看網站的安裝說明, 只有五個步驟~

1. Add base files to your page: shCore.js and shCore.css
(載入核心檔案2支, 1支 shCore.js 和 shCore.css)
2. Add brushes that you want (for example, shBrushJScript.js for JavaScript, see the list of all available brushes)
(載入brushes檔, 就是看你分享的語言是什麼都載入什麼, ex: css, javascript, or php 等等.)
3. Include shCore.css and shThemeDefault.css
(載入核心CSS和主題CSS)
4. Create a code snippet with either <pre /> or <script /> method (see below)
(開始寫程式, 並使用<pre>或<script> tag來裝)
5. Call SyntaxHighlighter.all() JavaScript method
(呼叫SyntaxHighlighter.all函式讓你的code自動包裝起來)

OK, 整理一下, 要在Yam Blog使用此套件, 把以上五個步驟縮成四個

1.將所需的js(shCore.js、brushes js)上傳到自己的web空間(如hinet)
2.使用天空的「自訂欄位」載入剛上傳的js, 並同時執行SyntaxHighlighter.all()
※js檔案路徑請自行替換成你自己的空間↓
3.將核心CSS和主題CSS的內容完整copy,至天空的「樣版設定」中編輯樣版CSS,
將SyntaxHighlighter的CSS paste至css最上方。

4.開始使用SyntaxHighlighter!

/* 使用syntaxhighlighter的第一個share code */
alert("hello, world!");
/* you did it!*/
此後你可以使用<pre> tag來demo你自己的code,
只要在<pre>內加入特定的class即可。
如上面這則3行的demo, 原始碼是

/* 使用syntaxhighlighter的第一個share code */
alert("hello, world!");
/* you did it!*/

YES!!此後再也不必為了要demo code而吧 < 換成 &lt; 和 > 換成&gt;了...

附註:
SyntaxHighlighter官網
http://alexgorbatchev.com/SyntaxHighlighter/
套件下載(含js, css, sample code etc.)
相簿設定
標籤設定
相簿狀態