FC2 ブログで SyntaxHighlighter 3.0.83 を導入した時のメモ

2014年01月13日

2023年09月26日

0 コメント

2018年12月に Prism に乗り換えたので、以下の記事内容は古いものになります。

FC2 ブログの記事でソースコードをきれいに表示できるようにするため、JavaScript ライブラリ SyntaxHighlighter を導入してみました。

FC2 ブログで SyntaxHighlighter を使えるようにするにはいくつか注意する点がありましたので、その内容をまとめてみました。

SyntaxHighlighter 3.0.83 をダウンロードします。基本的に FC2 ブログではここの情報を参考にして導入すれば SyntaxHighlighter が動くようになります。

ダウンロードした SyntaxHighlighter から、styles フォルダにある css ファイル（shCore.css、shCoreDefault.css）と、scripts フォルダにある js ファイル（shCore.js、shAutoloader.js、shLegacy.js、shBrushXml.js）を FC2 ブログにアップロードして URL をメモしておきます。

さらに scripts フォルダからソースコードを表示したい言語を選びアップロードして URL をメモします。（例：JavaScript なら shBrushJScript.js）

ブログ管理画面からテンプレート設定を開き編集します。

ヘッダー部分 <head> ～ </head> にアップロードした css ファイル（shCore.css、shCoreDefault.css）の URL を挿入して読み込ませます。

ボディ部分の最後、</body> の直前にアップロードした js ファイル（shCore.js、shAutoloader.js、shLegacy.js、shBrushXml.js）とソースコードを表示する言語ファイル用 js ファイルの URL を挿入して読み込ませます。

必須ではありませんが javaScript の外部ファイル化することも可能です。

ソースコードをブログ記事に載せる前に HTML 特殊文字に変換する必要があります。ググるとソースコードを自動的に変換してくれるサイトがいくつか見つかります。今回の記事ではここでソースコードを変換しました。

ブログ記事でソースコードを表示したい場合は以下の pre タグで囲み、その中に HTML 特殊文字に変換したソースコードを挿入します。また、ソースコードの言語に応じて brush に「言語コード」を指定します。ここから該当する言語の「Brush aliases」を選んで記述します。

<pre class="brush:言語コード;">
  ソースコード
</pre>

ソースコードをもう少し見やすくするように styles フォルダ内にあった CSS ファイル shCoreDefault.css を一部書き換えます。

74 ～ 76 行目書き換え前

.syntaxhighlighter table {
  width: 100% !important;
}

74 ～ 76 行目書き換え後

.syntaxhighlighter table {
  margin:5px !important;
  border:solid 1px #EEE !important;
}

234 ～ 236 行目書き換え前

.syntaxhighlighter .line.alt2 {
  background-color: white !important;
}

234 ～ 236 行目書き換え後

.syntaxhighlighter .line.alt2 {
  background-color: #F8F8F8 !important;
}

FC2 ブログの記事設定で「改行の扱い」を「自動改行」と「HTML タグのみ」のどちらかに設定できますが、この設定によって JavaScript が動作しないことがあるようです。

下記の参考サイトに詳しい解説がありますので、もし JavaScript が動作しないようなら確認したほうがよいでしょう。

FC2 ブログでは記事を作成中にリアルタイムプレビュー、プレビュー画面を表示することができますが、JavaScript は動作しないようになっていて、記事を公開する前に確認できない点にいつも不満に感じていました。

JavaScript の動作確認をするには、すでに公開済みの記事に JavaScript を記述してみるなどして確認していたのですが、その後いろいろ調べたら下記の参考サイト先にて JavaScript プレビューの動作について詳しい解説がありました。

どうやら Chrome 系ブラウザがセキュリティ対策（XSS フィルタ）のため JavaScript が動作しないようになっていて、ちょうど使用しているブラウザが Chromium 派生ブラウザだったため、この影響を受けていたようです。

参考サイトの「X-XSS-Protection-ZERO」のインストールと、記事内の「FC2 ブログなどの登録 URL サンプル」を参考に対象ブログの URL を登録することで、プレビュー画面でも JavaScript が動作するようになりました。

Comments