syntaxHighlighter

home > lab. > syntaxHighlighter

syntaxHighlighterの概要

ウェブページでコードをうまいことハイライトして見やすく表示。

syntaxHighlighterの使い方

【1】ココから一式ダウンロード。

【2】<head>〜</head>の間でshCore.js を読込。

【3】<head>〜</head>の間で必要なbrushのjsを読込。今回はshBrushXml.js、shBrushCss.js、shBrushJScript.jsを使用。全brushのサンプルはココ

【4】<head>〜</head>の間でshCore.css を読込。

【5】<head>〜</head>の間で必要なスタイルを読込。今回はshCoreDefault.cssを使用。themeのサンプルはココ

【6】<head>〜</head>の間でjavascriptを呼び出す。

        <script type="text/javascript" src="js/shCore.js"></script>
        <script type="text/javascript" src="css/shBrushXml.js"></script>
        <script type="text/javascript" src="css/shBrushCss.js"></script>
        <script type="text/javascript" src="css/shBrushJScript.js"></script>
        <link href="css/shCore.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" type="text/css" href="css/shCoreDefault.css" />
        <script type="text/javascript">
           SyntaxHighlighter.all()
        </script>
      

【7】<body>〜</body>に<pre>ではさんでコードを書く。<pre>にはbrushの内容を指定したクラス名をつける。「brush:js」とか「brush:xml」とか。

        <pre class="brush:js">
           /* なんかコードとかそういうのココに書く */
        </pre>
      

【注意】IE6だとなんかjsエラー。だが気にしない。

syntaxHighlighterのソース

http://alexgorbatchev.com/SyntaxHighlighter/

syntaxHighlighterのサンプル

      /**
       * SyntaxHighlighter
       */
      function foo()
      {
          if (counter <= 10)
              return;
          // it works!
      }