SyntaxHighlighter.jpg

HTMLやCSSなどのソースコードを掲載して解説しているブログ記事をよく見かけます。

Seesaaブログでも表示できないものかと思い、
Seesaa ソースコード表示」というキーワードで検索してみたところ、この「SyntaxHighlighter」が出てきました。

↓こちらの記事を参考にさせていただきました。
>> さくらのブログやSeesaaブログでSyntaxHighlighterを使う。: 俺の砂箱
情報提供ありがとうございます。m(_ _)m
 
 

HTMLファイルへのスクリプト追加


「デザイン」メニューの「HTML」から適用中のファイルを開き、<head>〜</head>間に下記のスクリプトコードを挿入する。
私は、</head>タグの直前に入れました。











  • ファイルパス指定時の注意点

私は「ファイルマネージャ」メニューから「scripts」というフォルダを作成し、その中に各スクリプトファイルやスタイルシートファイルをアップロードしました。ファイルパスは「http://digitalkoukisin.up.seesaa.net/scripts/」となっています。

当ブログのサイトのドメインは「http://digitalkoukisin.seesaa.net/」ですので、作成した「scripts」フォルダのパスはちょっと違っていますね。

初めは「http://digitalkoukisin.seesaa.net/scripts/」と間違えて指定したことでスクリプトが動作せず困惑しましたが、アップロードファイルへのパスをよく確認し、正しく指定することが重要ですね。


SyntaxHighlighterの使用方法


  • 表示させるためのHTMLコード




  •  表示したい内容




  • Brush nameを選択

  • 記述する言語形式に合わせて、<pre>タグのclass名をBrush名で指定。

    <Brush名の一例>
     ・CSS → css
     ・JavaScript → js, jscript, javascript
     ・XML → html, xhtml, xml, xslt

    その他、全部で23種類の言語を指定可能
    Brush名の詳細は、ソースコードの装飾表示方法 SyntaxHighlighterを参照


  • オプションの指定方法1

  • スクリプトコードの中に挿入して指定する方法。

    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.defaults['auto-links'] = false;


  • オプションの指定方法2

「pre」タグで「class」設定する方法。



 表示したい内容





SyntaxHighlighterの使用例


  • オプション「wrap-lines: false;」の場合



画像-A

画像-B




  • オプション「wrap-lines: true;」の場合



画像-A

画像-B




↓オプション解説サイト
>> ソースコードの装飾表示方法 SyntaxHighlighter


あとがき


無料ブログでもこんな応用が利くものなんですね。
関心が湧いたことには、どんどんチャレンジしてみましょう!


スポンサード・リンク