Pages

筆記 - SyntaxHighlighter(1)

SyntaxHighlighter 是一個在網頁上美化並顯示程式碼的 javascript,
這幾天花了不少時間在研究相關的改寫和設定,
以滿足在網頁上呈現的相關需求,
原因是我使用的 3.0.83 版,和 1.5.1 版有非常大的差異,
最主要的差別就在於 3.0.83 是採用 pre 的方式表現程式碼,
而 1.5.1 是採用 textarea 來表現程式碼...
使用 pre 標籤的最大缺點,就是相關的標籤例如:html、script標籤...等,
都必須轉換為網頁呈現上看的懂得編碼,不然就會當作是標籤來執行,
而我在 Lawrence 的幫忙下,
才知道原來作者因為使用了 eval() 來做為程式的保護方式,
也導致在 pre 標籤內若有寫在 script 標籤內的語法,
也會被當作 javascript 來執行,
這也是使用這套美化程式碼 js 所必須要特別注意的地方。

加入 SyntaxHighlighter 的方式其實很簡單,
首先先到 SyntaxHighlighter 的官方網站下載相關的 js 與 css,
http://alexgorbatchev.com/SyntaxHighlighter/
styles 資料夾內的檔案為相關 style 設定,
scripts 資料夾內的檔案為相關 js 設定,
主要載入以下三組 js 檔案:

<link href='網址/styles/shCore.css' rel='Stylesheet' type='text/css'/>
<link href='網址/styles/shThemeDefault.css' rel='Stylesheet' type='text/css'/>
<script src='網址/scripts/shCore.js' type='text/javascript'/>

而產生變色則載入相關對應的 js 檔案(官網提供了十幾種列表),
但若是需求量不多,則可以載入自己看順眼的即可,
像我自己就只覺得 shBrushAS3 和 shBrushAppleScript 的顯示最好看。

<script src='網址/scripts/shBrushAS3.js' type='text/javascript'/>
<script src='網址/scripts/shBrushAppleScript.js' type='text/javascript'/>

當然除了載入上述程式碼,
最重要的要在 html 內增加相關的對應標籤 pre <,br/> 而 class 的名稱,則是按照不同的樣式需求選擇不同的 class ,
完成後就可以看到美化過後程式碼的樣子囉!

<pre class="brush:as3">
    程式碼內容
</pre>

oxxo

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

1 則留言:

  1. 看起來你已經花了不少時間在研究和應用 SyntaxHighlighter 了!這個工具確實可以讓程式碼在網頁上更美觀和易讀。使用不同版本可能會有些許差異,特別是在程式碼呈現的方式上,但好在你找到了合適的版本並且解決了相應的問題。

    在網頁上加入 SyntaxHighlighter 的步驟看起來相當清晰,而且官方提供了多種不同的樣式和程式語言的支援,這樣可以根據需要自由地選擇適合的樣式和語言支援。從你的描述中,我能感受到你對於網頁程式碼的呈現非常謹慎和用心,這對於提升用戶體驗和程式碼閱讀性來說是非常重要的。

    如果你有任何進一步的問題或者需要更多幫助,隨時都可以問我哦!
    https://mehndidesignworld.com/back-hand-mehndi-design/

    回覆刪除