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復活していますね。)

まずここでソースコードの種類を選択してテンプレートに貼り付けるコードを生成させます。


Themeとは見え方の設定でSyntaxHighlighter - Themesで見本が見れます。

Brushesはハイライトさせる言語のことです。

CSSとJavaScript、xml、Javaをチェックしました。

(201312.22追記。ログろいどさん作成のDOSコマンドのBrushファイルshBrushBatも導入しました。Blogger:SyntaxHighlighter(7)DOSコマンドをきれいに表示させる
同じくログろいどさん作成のjQuery用のBrushファイルもshBrushJQuery.min.jsも導入しました。
Blogger:SyntaxHighlighter(8)jQuery用のBrushを導入

JavaはBloggerとは関係ないですがのちのちAndroidソースも載せたいと思うのでチェックしておきました。

「Generate」をクリックするとコードが生成されます。


「Copy To ClipBoard」をクリックしてもなぜかコピーされないので直接選択してコピーしました。

私のパソコンではSleipnir4ではなぜかThemeが選択できずFirefoxでやりました。

Bloggerの管理画面→テンプレート→HTMLの編集

HTMLソースの中をクリックした後Ctrl+Fで検索ボックスを出します。

 </head>で検索。


 </head>の上に先ほど生成したソースをペーストします。

Blogger投稿エディタでソースコードを書き込む



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

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>

参考にしたサイト


SyntaxHighlighter - Dynamic Brush Loading
本家のサイト。Exampleのところをみれば各Brushファイルのエイリアスがわかります。

この方法でしました。

テンプレートHTMLに書き込むソースを自動生成

Themeの例です。

ソースコードをハイライトするSyntaxHighlighter3.0を使いこなす | DevAchieve
投稿へのソースコードの貼り付け方

テンプレートHTMLをいじることなくガジェットで導入する方法が載っていますがブラシの選択の仕方がわからず断念しました。書き忘れ?

あなたのソースコードを彩る、Syntax Highlighterまとめ | Blog.37to.net
SyntaxHighlighter以外にいろいろコードハイライターが紹介されています。

次の関連記事:Blogger:SyntaxHighlighter(2)表示をカスタマイズ

PR

0 件のコメント:

コメントを投稿