這幾天花了不少時間在研究相關的改寫和設定,
以滿足在網頁上呈現的相關需求,
原因是我使用的 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 檔案:
而產生變色則載入相關對應的 js 檔案(官網提供了十幾種列表),
但若是需求量不多,則可以載入自己看順眼的即可,
像我自己就只覺得 shBrushAS3 和 shBrushAppleScript 的顯示最好看。
當然除了載入上述程式碼,
最重要的要在 html 內增加相關的對應標籤 pre <,br/> 而 class 的名稱,則是按照不同的樣式需求選擇不同的 class ,
完成後就可以看到美化過後程式碼的樣子囉!
都必須轉換為網頁呈現上看的懂得編碼,不然就會當作是標籤來執行,
而我在 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>
看起來你已經花了不少時間在研究和應用 SyntaxHighlighter 了!這個工具確實可以讓程式碼在網頁上更美觀和易讀。使用不同版本可能會有些許差異,特別是在程式碼呈現的方式上,但好在你找到了合適的版本並且解決了相應的問題。
回覆刪除在網頁上加入 SyntaxHighlighter 的步驟看起來相當清晰,而且官方提供了多種不同的樣式和程式語言的支援,這樣可以根據需要自由地選擇適合的樣式和語言支援。從你的描述中,我能感受到你對於網頁程式碼的呈現非常謹慎和用心,這對於提升用戶體驗和程式碼閱讀性來說是非常重要的。
如果你有任何進一步的問題或者需要更多幫助,隨時都可以問我哦!
https://mehndidesignworld.com/back-hand-mehndi-design/