BloggerのDynamicViewでSyntaxHighlighterを使う

参考にしたのはこちらのブログ。

http://kevin-junghans.blogspot.jp/2013/01/adding-syntaxhighlighter-to-blogger.html


  1. SyntaxHighlighterのスクリプトを作る
  2. こちらのブログSyntax Highlighter Scripts Generatorで簡単に作成できます。 私はこんな感じになりました。
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
    <script language='javascript' type='text/javascript'>
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
    </script>
    

  3. ブログのヘッダにスクリプト埋め込む
  4. ブログ設定の「テンプレート」→「HTMLの編集」でコード内に上のスクリプトを貼り付けます。</head>の直前に書くようにとのこと。

  5. 投稿記事のHTMLソースにコードを埋め込む
  6. <script type="text/javascript">
    SyntaxHighlighter.highlight();
    </script>
    

  7. あとは普通に使うだけ
  8. ↓はSyntaxHighlighterのホームページから拝借してきたサンプルコード。こんな感じにHTMLで本文を書くときちんと表示されます。
    <pre class="brush: js">
        /**
         * SyntaxHighlighter
         */
        function foo()
        {
            if (counter <= 10)
                return;
            // it works!
        }
    </pre>
    


毎度記事末尾にコード書くのが面倒ですがまあよしとします。

このブログの人気の投稿

zsh 設定 - プロンプト -

運転免許失効〜再取得までの奮闘記 - 期限切れ -

運転免許失効〜再取得までの奮闘記 - 路上練習 -