2016-01-27

在網頁裡放程式碼(SyntaxHighlighter)

01:33 Posted by ZMH , , 1 comment

前言:

這篇教學利用SyntaxHighlighter使得網頁能呈現經過處理的程式碼(易於閱讀)。內容主要來自官方說明文件

基本步驟:

  1. 在網頁內引入 shCore.js、shThemeDefault.css和 shCore.css
  2. 加入你所寫程式對應的"brushes"，這裡有所有的brushes
    (舉例， shBrushJScript.js 用於 JavaScript)
  3. 有兩種方式: <pre /> 或 <script /> (請見下面範例)
  4. 呼叫 SyntaxHighlighter.all() JavaScript 語法即生成

範例:

  1. 在網頁<head>與</head>之間引入:
  2. 在<pre> </pre>之間打入想要的程式，並指定class="brush: js"(這邊用javascript舉例)
        /**
     * SyntaxHighlighter
     */
    function foo()
    {
        if (counter <= 10)
            return;
        // it works!
    }

<pre /> 或 <script />差異:

...建構中

1 則留言: