SyntaxHighlighter教學 @ 資源回收 :: 隨意窩 Xuite日誌
  • 關鍵字
    1. 沒有新回應!
  • 201007211518SyntaxHighlighter教學

    如果你喜歡在Blogger中分享程式碼,那麼你一定不可以錯過「syntaxhighlighter」這個工具,他可以讓你在你的Blogger中,排出漂亮的程式碼,另外支援列印等功能,可以說是相當地實用喔!

    Step 1.
    首先,先去SyntaxHiglighter的官方下載網頁,下載此一壓縮包,或者直接按此連結下載。而下載後,請將裡面的「Scripts」內的所有檔案,都上傳至您的網頁空間。或者直接引用官方提供的外部資源


    Step 2.
    接著,繼續加入下列程式碼,可以自己把JS載下來放到自己的網路位置或者直接引用外部資源,下方為直接引用外部資源。

    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js"> </script>
    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js"> </script>
    <link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css" />
    <link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css" />
    <script type="text/javascript">
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
    </script>


    Step 3.
    而要使用的話,只要用將程式碼用

    <pre class="brush: 程式語法;"></pre>

    包起來即可,如以下的範例。

    <pre class="brush: html"><pre class="brush: html;"><p>this is a test</p><br /></pre>


    ※pre裡面的屬性可至「此處」看

    支援的程式語法,可以去「官方的Brush列表」看

    ※注意!!請在html模式下編輯,如果程式碼有"<"需用&lt; 取代, ">"需用&gt;取代

    驗證控件介紹--Regular...|日誌首頁|沒有下一則上一篇驗證控件介紹--RegularExpressionValidator
    回應