Blogger:SyntaxHighlighter(1)ブログにソースコードを綺麗に表示させる

BloggerにソースコードをハイライトするSyntaxHighlighterを導入する | DevAchieve

このSyntaxHighlighterというものを導入すれば自動的にソースコードに色づけしてくれます。

(2016.7.22追記。v3.0.83からv4.0.1に入れ替えました。（linuxBean14.04(123)SyntaxHighlighter v4のブラシを作成する）v3.0.83にはUTF-8の半角スペースには2種類あるとBlogger:SyntaxHighlighter(3)iOS Safariで行番号がずれる問題を解決の問題が発生しますが、v4.では解消されています。ただし、v4の導入には自分でビルドする必要があります。)

テンプレートHTMLに貼り付けるコードを自動生成させる

Syntax Highlighter Scripts Generator ‹ Blogger Widgets | Tips | Tricks | Templates : Way2Blogging
(2013.10.28確認したところリンク切れになっています。2013.11.12復活していますね。）

ソースコードをハイライトするSyntaxHighlighter3.0を使いこなす | DevAchieve

こちらに詳しい解説があります。

scriptタグを使ったほうがソースコードをそのままコピペすればよいので簡単そうです。

でもなにかとpreタグの方がいいと解説記事に書いてあるのでpreタグを使うことにしました。

投稿エディタの作成モードでソースがちゃんと表示されることが私にとってのメリットでした。

「人気の投稿」などで抜粋を表示させていてその抜粋にpreタグが含まれると問題が起こることがあるそうです。


私の場合はこんな感じでソースが表示されました。

以下preタグの使い方です。

<pre class="brush: alias;">
// ココにソースを記述
</pre>

aliasにソースの言語を指定します。

CSSはCSS、JavaScriptはjs、xmlはxml、Javaはjavaです。

ソースの部分の「<」は「&lt;」に置換しておかないといけません。

ワードパッドなど使って置換しておきます。

早速先ほどのコード自体を表示させて見ます。

<pre class="brush: css;">
&lt;pre class="brush: alias;">
// ココにソースを記述
&lt;/pre>
</pre>

投稿エディタのHTMLモードにこれを書き込みます。


おお、かっこいいです。ちなみにプレビュー画面では動作しません。

（Blogger:SyntaxHighlighter(4)オートローダーで必要なブラシファイルのみロードするの設定をしたあとプレビュー画面でも表示されるようになりました。GoogleサイトにSyntaxHighlighterのファイルを移動させた効果がでたと思います。しかしGoogleサイトに置いたファイルの呼び込みはとても時間がかかります。結局Blogger:Googleサイトの利用をやめて表示速度を改善するとしました。）


1行が長いコードでは自動的に横スクロールバーがでてきます。

いちいち「<」を「&lt;」に置換せずにコピペだけでハイライトさせる方法

実際に使ってみるとソースコードには高頻度に「<」が含まれていて毎回ワードパッドなどを使って「<」を「&lt;」に置換するのはとても面倒です。

Bloggerの投稿エディタは作成モードで「<」を入力すると自動的にHTMLモードでは「&lt;」に置換してくれることがわかりました。

そこでまず以下のコードをすぐコピペできるように保存しておきます。alias部分は自分の使いたいものにしておいてください。ここではxmlとします。

<pre class="brush: xml;">
// ココにソースを記述
</pre>

そしてこれを投稿エディタのHTMLモードにペーストします。

そして作成モードにしてみるとこの「// ココにソースを記述」と表示されています。

この部分にハイライト表示させたいソースコードを作成モードでコピペすれば自動的に「<」を「&lt;」に置換されます。

ソースコードのペーストは「プレーンテキストとして貼り付ける」でします。


私はBlogger：投稿(1)投稿ごとに同じ文言をいれるのは面倒でみた各投稿のテンプレートに以下を入れておきました。

<pre class="brush: xml;">
// ココにソースを記述
</pre>

参考にしたサイト