ソースコードを分かりやすく表示するSyntaxHighlighter
Tuesday,January 12,2016

ソースコードを分かりやすく表示するSyntaxHighlighter

SyntaxHighlighter_eye

ときどき見かける、ソースコードを見た目もカッコよく、色分けされていて読みやすい表示。
なんとかSeesaaブログにも導入できないか試してみました。

SyntaxHighlighter

Preタグのクラス要素を使って、HTMLやCSS、Javascriptその他の言語を見やすく表示したり、コピーなど再利用をしやすくしてくれるJavascriptライブラリです。

SyntaxHighlighter

自分で編集もできますが、スクリプトファイルとCSSファイルをアップロードして、HTMLに読み込ませるだけで使えるようになります。

SyntaxHighlighterをダウンロード

2011年から更新は止まっていますが、今でも十分使えます。

SyntaxHighlighter - Download

「Click here to download」のリンクをクリックして、zipファイルをダウンロードします。

Seesaaへアップロード

ダウンロードしたSyntaxHighlighterのzipファイルを展開して、必要なファイルをSeesaaブログのファイルマネージャを使ってアップロードします。

zipファイルを展開すると、このような構成になっています。

SyntaxHighlighter_folder
実際に使うのは、[script]フォルダと[styles]フォルダの2つだけです。
[script]フォルダにjavascriptファイル、[styles]フォルダにcssファイルが入っています。

Scriptsフォルダには各言語に対応したJavascriptファイルが収められています。
この中から自分が使用したい言語を選択して、Seesaaブログのサーバへアップロードします。

Syntax_script3
CSS、Javascript、HTMLの3ファイルを選んでアップロードしました。
コアファイルはどの言語使う時でも必要となるファイルです。必ずアップロードします。

stylesフォルダには、実際に表示されるスタイルテーマがCSSで収められています。
テーマの適用方法は、2つの方法あります。

Syntax_styles(1)
1つ目は、コアファイルと呼ばれる表示デザインを指定しているファイルと、カラーなどの装飾部分を担当しているテーマファイルの2つをセットで使う方法です。
色指定などを自分で変更したい場合は、こちらのほうが分かりやすいかもしれません。

Syntax_styles(2)
2つ目は、コアとテーマが一緒になっているファイルです。
1つのファイルだけで使用可能ですので、読み込みが1つで済みます。
[shCoreDefault.css]を選びました。

Seesaaブログのファイルマネージャからアップロードします。

Syntax_upload
わかりやすくするために、アップロードオプションから新たに「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は、ファイルマネージャーから取得できます。
自サイトのものに置き換えてください。

Syntax_seesaa_url1
ファイルマネージャーの各ファイル名をクリックすると、ファイル編集画面が開きます。
ファイルの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ソースを表示する

そしてとても重要な事があります。

Syntax_kaigyou
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ライブラリは、便利ですね。上手く使えば一気に自分のサイトが便利になりますね。



posted by taks at 12:23 | Comment(0) | TrackBack(0) | SeeSaaカスタマイズ
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのTrackBack URL

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。