SyntaxHighlighterでソースコードを見た目も内容も分かりやすく表示する方法

 

ときどき見かける、ソースコードを見た目もカッコよく、色分けされていて読みやすい表示。
なんとか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="http://weblog10.up.seesaa.net/syntax/shCore.js"></script>
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shBrushJScript.js"></script>
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shBrushCss.js"></script>
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="http://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="http://weblog10.up.seesaa.net/syntax/shCore.js"></script>
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shBrushJScript.js"></script>
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shBrushCss.js"></script>
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="http://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="http://weblog10.up.seesaa.net/syntax/shCore.js"></script>
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shBrushJScript.js"></script>
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shBrushCss.js"></script>
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="http://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="http://weblog10.up.seesaa.net/syntax/shCore.js"></script>
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shBrushJScript.js"></script>
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shBrushCss.js"></script>
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="http://weblog10.up.seesaa.net/syntax/shCoreDefault.css">
<script type="text/javascript" >SyntaxHighlighter.all();</script>

タイトルを表示する

<pre class="brush:html" title="タイトル"> ホニャララ </pre>

表示するソースにタイトルを表示します。

 ホニャララ 

まとめ

デフォルトテーマのCSSを入れただけですが、見た目が一気に変わりました。
数種類のテーマファイルが入っていますので、自分の環境に合わせて選ぶことが出来ます。

デザインを自分でいじることも出来ますので、自作のデザインにすることも可能です。

Javascriptライブラリは、便利ですね。上手く使えば一気に自分のサイトが便利になりますね。

Amazonでお得に買う方法

ネット通販の代表格Amazon。Amazonプライム会員に登録すると送料無料の他にも様々な特典がついてきます。

そんなAmazonでの買い物を、さらにお得にするなら、Amazonギフト券への購入チャージをおすすめします。

 

現金でチャージするたびに、チャージ額 × 最大2.5%分のポイントがもらえます。

Amazonプライム会員の方なら是非活用して、更にお得に利用しましょう。

CHARGE NOW

コンビニ・ATM・ネットバンクが対象

1円単位で購入可能

スポンサーリンク

フォローする