【FC2ブログ】SyntaxHighlighterを使ってソースコードをキレイに表示する方法【カスタマイズ】

カスタマイズネタを書いていくときに、どうしてもHTMLやプログラムのソースコードをキレイに表示させたいと思い、SyntaxHighlighterなるものを導入することにしました。

色々なブログを調べるとSyntaxHighlighterでは、エディタみたいに表示できるのでとてもキレイで見やすいようです。
さっそく導入方法を記します。

SyntaxHighlighterをダウンロードする

まずはSyntaxHighlighterを以下のサイトからダウンロードします。
http://alexgorbatchev.com/SyntaxHighlighter/

サイトにアクセスすると、右側に「Download」の表示がありますので選びます。

20151109-01

次の画面では、本文上部にある「Click here to download」から最新のバージョンをダウンロードします。

20151109-02

FC2ブログへアップロード

次はダウンロードしたファイルを解凍し、FC2ブログへアップロードします。

20151109-03.png

アップロードするのは、
・[styles]フォルダの[shCore.css]と[shCoreDefault.css]

・[scripts]フォルダ内のファイル全て
です。

[scripts]フォルダ内のファイルは必要な言語用のものだけアップロードすれば良いらしいですが、どれが必要かわからないので全部アップロードしましたw

アップロードするときに、どこにアップロードしたかメモを取っておいてください。あとあとアップロード先のアドレスが必要になります。
(http://blog-imgs-30.fc2.com/a/b/c/blog/~みたいなアドレスです)

テンプレートを編集

SyntaxHighlighterのアップロードが完了したら、次はブログのテンプレートを編集します。

まずは ヘッダー部分(<head>~</head>)に以下を挿入します。
※ [アップロード先]部分は先ほど確認したアップロード先に置き換えて下さい。

<!-- ▼▼▼開始▼▼▼-->
<link type="text/css" rel="stylesheet" href="[アップロード先]/shCore.css" />
<link type="text/css" rel="stylesheet" href="[アップロード先]/shCoreDefault.css" />
<!-- ▲▲▲終了▲▲▲ -->

次にボディ部分の最後(</body>の直前)に以下を挿入します。
※こちらも[アップロード先]部分は先ほど確認したアップロード先に置き換えて下さい。

<!-- ▼▼▼開始▼▼▼ -->
<script type="text/javascript" src="[アップロード先]/shCore.js"></script>
<script type="text/javascript" src="[アップロード先]/shAutoloader.js"></script>
<script type="text/javascript" src="[アップロード先]/shLegacy.js"></script>
<script type="text/javascript" src="[アップロード先]/shBrushXml.js"></script>
<script type="text/javascript">
SyntaxHighlighter.autoloader
(
"applescript            [アップロード先]/shBrushAppleScript.js",
"actionscript3 as3      [アップロード先]/shBrushAS3.js",
"bash shell             [アップロード先]/shBrushBash.js",
"coldfusion cf          [アップロード先]/shBrushColdFusion.js",
"cpp c                  [アップロード先]/shBrushCpp.js",
"c# c-sharp csharp      [アップロード先]/shBrushCSharp.js",
"css                    [アップロード先]/shBrushCss.js",
"delphi pascal          [アップロード先]/shBrushDelphi.js",
"diff patch pas         [アップロード先]/shBrushDiff.js",
"erl erlang             [アップロード先]/shBrushErlang.js",
"groovy                 [アップロード先]/shBrushGroovy.js",
"java                   [アップロード先]/shBrushJava.js",
"jfx javafx             [アップロード先]/shBrushJavaFX.js",
"js jscript javascript  [アップロード先]/shBrushJScript.js",
"perl pl                [アップロード先]/shBrushPerl.js",
"php                    [アップロード先]/shBrushPhp.js",
"text plain             [アップロード先]/shBrushPlain.js",
"py python              [アップロード先]/shBrushPython.js",
"ruby rails ror rb      [アップロード先]/shBrushRuby.js",
"sass scss              [アップロード先]/shBrushSass.js",
"scala                  [アップロード先]/shBrushScala.js",
"sql                    [アップロード先]/shBrushSql.js",
"vb vbnet               [アップロード先]/shBrushVb.js",
"xml xhtml xslt html    [アップロード先]/shBrushXml.js"
);
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.all();
</script>
<!-- ▲▲▲終了▲▲▲ -->

実際に使ってみよう!

設定は完了です。いよいよ使ってみましょう!
<pre class="brush:使用する言語;">ソースコード</pre>のように、<pre>タグで囲んだ部分がエディタのように表示されます。

ただし、特殊文字は下記のように変換する必要があります。
“→&quot;
&→&amp;
<→&lt;
>→&gt;

「ソースコード HTMLタグ変換」などで検索すると自動で変換してくれるツールやサイトが見つかります。是非それらを利用しましょう。

「使用する言語」に指定するコードは以下のコード表から選んで指定します。

HTMLの場合は<pre class="brush:html;">ソースコード</pre>となります。
20130225001531ae6.png

ブログカスタマイズ
スポンサーリンク
みやのひろをフォローする
プロフィール
_20161004_124319s

Author:みやのひろ
言語聴覚士。休日はさすらいの手話落語家(予定)。ポケカにガチハマり中。最近は自転車や山登りなどアウトドアにも興味が出てきたメタボリックな30代。

GO!GO!ST-言語聴覚士兼アマチュア落語家のブログ-

コメント

タイトルとURLをコピーしました