ブログにソースコードを貼り付けてハイライト表示にする方法

今回は、以下のようにソースコードを構文ごとにハイライト表示する方法をご紹介します。
表示に使用するライブラリはSyntaxHighlighterというもので、これを導入すればpreタグに囲まれたソースコードを、以下のようなハイライト表示にしてくれます。

<script type="text/javascript">
$(function(){
    var text = $('#comment').text();

    text = text.replace(/ +/, '');
    alert(text);
});
</script>

では以下に導入手順を書きます。
(作者様がスクリプトファイルのホスティングまでされているので、これを利用させていただきます)

SyntaxHighlighter導入手順
CSS・コアスクリプト読込追加

HTMLの<HEAD>タグ内に、SyntaxHighlighterスタイルシートのリンクを挿入する。
同<HEAD>タグ内に、SyntaxHighlighterのコアJavaScriptファイルを追加する。

<link rel="stylesheet" type="text/css" href="http://alexgorbatchev.com/pub/sh/current/styles/shCoreEclipse.css"/>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js"></script>

上のタグを<HEAD>タグ内に挿入してください。
また、スタイルに応じて1行目のスタイルシートファイルの名前(shCoreEclipse.css)を変更してください。

スタイルシートのファイル名は以下の表を参考にしてください。

ファイル名表示例
shCoreDefault.cssdefault
shCoreDjango.cssDjango
shCoreEclipse.csseclipse
shCoreEmacs.cssEmacs
shCoreFadeToGrey.cssFadeToGrey
shCoreMDUltra.cssMDUltra
shCoreMidnight.cssMidnight
shCoreRDark.cssRDark
言語ごとのスクリプト読込追加

CSS・コアスクリプト読込追加 で追加したタグの直下に、ソースコード言語ごとのJavaScriptライブラリ読み込みを追加する。

<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js"></script>

上のタグを導入手順1で追加したタグの直下に挿入してください。
※使用する言語が複数の場合、言語分複数行追加する必要があります。
表示したいソースコードの言語ごとに、jsファイルのファイル名(shBrushXml.js)を以下のように変更してください。

・言語ごとのjsファイル名

言語ファイル名言語ファイル名言語ファイル名
AppleScriptshBrushAppleScript.js ActionScript3shBrushAS3.js BashshBrushBash.js
ColdFusionshBrushColdFusion.js C
C++
shBrushCpp.js C#shBrushCSharp.js
CSSshBrushCss.js Delphi
Pascal
shBrushDelphi.js 差分ファイルshBrushDiff.js
ErlangshBrushErlang.js GroovyshBrushGroovy.js JavashBrushJava.js
JavaFXshBrushJavaFX.js JavaScriptshBrushJScript.js PerlshBrushPerl.js
PHPshBrushPhp.js テキストshBrushPlain.js PowerShellshBrushPowerShell.js
PythonshBrushPython.js RubyshBrushRuby.js SassshBrushSass.js
VisualBasicshBrushVb.js SQLshBrushSql.js Scala
shBrushScala.js
HTML
XML
shBrushXml.js

ライブラリ読み込みの追加が終わったら、直下に以下のコードを追加してください。
(このコードで、整形処理を実行しているので、これが抜けると動きません)

<script type="text/javascript">SyntaxHighlighter.all();</script>
使用方法

実際にブログなどに貼り付けたいソースコードを、以下のように<pre>タグで囲ってください。
<pre>タグのclass値(brush:javascript)をソースコードに応じて変更します。

<pre class="brush:html">
<script type="text/javascript">
$(function(){
    var text = $('#comment').text();

    text = text.replace(/ +/, '');
    alert(text);
});
</script>
</pre>

<pre>タグのclass値については、以下の表を参考にしてください。

言語class値言語class値言語class値
AppleScriptbrush:applescript ActionScript3brush:as3 Bashbrush:bash
ColdFusionbrush:cf

C
C++

brush:c
brush:cpp

C#brush:c#
CSSbrush:css

Delphi
Pascal

brush:delphi
brush:pascal
差分ファイルbrush:diff
Erlangbrush:erl Groovybrush:groovy Javabrush:java
JavaFXbrush:jfx JavaScriptbrush:js Perlbrush:perl
PHPbrush:php テキストbrush:text PowerShellbrush:ps
Pythonbrush:py Rubybrush:ruby Sassbrush:sass
VisualBasicbrush:vb SQLbrush:sql Scalabrush:scala
HTML
XML
brush:html
brush:xml
さいごに

以上の手順を踏めば、きっと分かりやすいソースコードが実現できるはずです!
ちなみに、コードはコード領域をダブルクリックすると全選択状態にすることができます。

以上で説明を終わります。
お役に立てれば幸いです。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする