ときどき見かける、ソースコードを見た目もカッコよく、色分けされていて読みやすい表示。
なんとかSeesaaブログにも導入できないか試してみました。
SyntaxHighlighter
Preタグのクラス要素を使って、HTMLやCSS、Javascriptその他の言語を見やすく表示したり、コピーなど再利用をしやすくしてくれるJavascriptライブラリです。
SyntaxHighlighter
自分で編集もできますが、スクリプトファイルとCSSファイルをアップロードして、HTMLに読み込ませるだけで使えるようになります。
SyntaxHighlighterをダウンロード
2011年から更新は止まっていますが、今でも十分使えます。
SyntaxHighlighter - Download
「Click here to download」のリンクをクリックして、zipファイルをダウンロードします。
Seesaaへアップロード
ダウンロードしたSyntaxHighlighterのzipファイルを展開して、必要なファイルをSeesaaブログのファイルマネージャを使ってアップロードします。
zipファイルを展開すると、このような構成になっています。
実際に使うのは、[script]フォルダと[styles]フォルダの2つだけです。
[script]フォルダにjavascriptファイル、[styles]フォルダにcssファイルが入っています。
Scriptsフォルダには各言語に対応したJavascriptファイルが収められています。
この中から自分が使用したい言語を選択して、Seesaaブログのサーバへアップロードします。
CSS、Javascript、HTMLの3ファイルを選んでアップロードしました。
コアファイルはどの言語使う時でも必要となるファイルです。必ずアップロードします。
stylesフォルダには、実際に表示されるスタイルテーマがCSSで収められています。
テーマの適用方法は、2つの方法あります。
1つ目は、コアファイルと呼ばれる表示デザインを指定しているファイルと、カラーなどの装飾部分を担当しているテーマファイルの2つをセットで使う方法です。
色指定などを自分で変更したい場合は、こちらのほうが分かりやすいかもしれません。
2つ目は、コアとテーマが一緒になっているファイルです。
1つのファイルだけで使用可能ですので、読み込みが1つで済みます。
[shCoreDefault.css]を選びました。
Seesaaブログのファイルマネージャからアップロードします。
わかりやすくするために、アップロードオプションから新たに「syntax」というディレクトリを追加してアップロードしました。
SyntaxHighlighterの読み込み
アップロードしたファイルをSeesaaブログのHTMLを編集して読み込みます。
Seesaaブログの[デザイン]→[HTML]から使用しているHTMLを開き、<head>タグ内に下記のように読み込みタグを記載します。
<script type="text/javascript" src="https://weblog10.up.seesaa.net/syntax/shCore.js"></script>
<script type="text/javascript" src="https://weblog10.up.seesaa.net/syntax/shBrushJScript.js"></script>
<script type="text/javascript" src="https://weblog10.up.seesaa.net/syntax/shBrushCss.js"></script>
<script type="text/javascript" src="https://weblog10.up.seesaa.net/syntax/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="https://weblog10.up.seesaa.net/syntax/shCoreDefault.css">
<script type="text/javascript" >SyntaxHighlighter.all();</script>
アップロードした各ファイルのURLは、ファイルマネージャーから取得できます。
自サイトのものに置き換えてください。
ファイルマネージャーの各ファイル名をクリックすると、ファイル編集画面が開きます。
ファイルのURLが記載されていますので、コピー貼付けして使うと確実です。
SyntaxHighlighterの使用法
SyntaxHighlighterは、<pre>タグのクラス要素で、各ソースを指定します。
今回アップロードしたHTML、CSS、Javascriptは、下記のように記述します。
<pre class="brush:html"> ホニャララ </pre> HTMLソースを表示する
<pre class="brush:css"> ホニャララ </pre> CSSソースを表示する
<pre class="brush:js"> ホニャララ </pre> JavaScriptソースを表示する
そしてとても重要な事があります。
Seesaaブログの記事投稿時は、「改行HTMLタグ変換」の項目を改行を<br/>タグに変換しないにチェックを入れてください。
大事なのでもう一度言います。改行を<br/>タグに変換しないでください。
改行されなくなります。
オプションの指定
便利なオプションも用意されています。
・指定した行をハイライト表示する
<pre class="brush:html highlight:[2,4]"> ホニャララ </pre>
ソースの変更や挿入などの説明をする時に役立ちます。
<script type="text/javascript" src="https://weblog10.up.seesaa.net/syntax/shCore.js"></script>
<script type="text/javascript" src="https://weblog10.up.seesaa.net/syntax/shBrushJScript.js"></script>
<script type="text/javascript" src="https://weblog10.up.seesaa.net/syntax/shBrushCss.js"></script>
<script type="text/javascript" src="https://weblog10.up.seesaa.net/syntax/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="https://weblog10.up.seesaa.net/syntax/shCoreDefault.css">
<script type="text/javascript" >SyntaxHighlighter.all();</script>
・開始行番号の指定
<pre class="brush:html first-line:125"> ホニャララ </pre>
行数がわかっているような場合、行番号を合わせて表示することが出来ます。
<script type="text/javascript" src="https://weblog10.up.seesaa.net/syntax/shCore.js"></script>
<script type="text/javascript" src="https://weblog10.up.seesaa.net/syntax/shBrushJScript.js"></script>
<script type="text/javascript" src="https://weblog10.up.seesaa.net/syntax/shBrushCss.js"></script>
<script type="text/javascript" src="https://weblog10.up.seesaa.net/syntax/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="https://weblog10.up.seesaa.net/syntax/shCoreDefault.css">
<script type="text/javascript" >SyntaxHighlighter.all();</script>
・オートリンク解除
<pre class="brush:html auto-links:false"> ホニャララ </pre>
ソース中にURLがある場合、自動的にリンクが貼られます。リンクを解除するオプションです。
<script type="text/javascript" src="https://weblog10.up.seesaa.net/syntax/shCore.js"></script>
<script type="text/javascript" src="https://weblog10.up.seesaa.net/syntax/shBrushJScript.js"></script>
<script type="text/javascript" src="https://weblog10.up.seesaa.net/syntax/shBrushCss.js"></script>
<script type="text/javascript" src="https://weblog10.up.seesaa.net/syntax/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="https://weblog10.up.seesaa.net/syntax/shCoreDefault.css">
<script type="text/javascript" >SyntaxHighlighter.all();</script>
・タイトルを表示する
<pre class="brush:html" title="タイトル"> ホニャララ </pre>
表示するソースにタイトルを表示します。
ホニャララ
まとめ
デフォルトテーマのCSSを入れただけですが、見た目が一気に変わりました。
数種類のテーマファイルが入っていますので、自分の環境に合わせて選ぶことが出来ます。
デザインを自分でいじることも出来ますので、自作のデザインにすることも可能です。
Javascriptライブラリは、便利ですね。上手く使えば一気に自分のサイトが便利になりますね。
狩野 祐東 SBクリエイティブ 2015-10-30
photo credit: 
