ポク太郎です。
Google運営のBloggerは他のサービスと異なる事情が点在。その事情を鑑みたBloggerでのソースコード表示について書きました。
本記事では下で示す理由により「Google code-prettify」でなく「SyntaxHighlighter」を採用。
その使い方と非装備言語への対応方法について書いてあります。
少しややこしいBloggerの事情
Bloggerは内部にjs、cssファイル置けない
Bloggerは画像以外のファイルを内部に置けない仕様。必要なら.jsや.cssはGoogleドライブに置き外部ファイルとして参照しないといけません。
が、GoogleのサービスはIPv6。IPv4の閲覧者がアクセスした際、時によって極端に読み込みが遅くなる危険性。このトラブルが解決したのか不明。かなり根が深い問題。
つまり、Googleドライブに置くやり方は危険。
ファイル名必須なGoogle code-prettify＝非装備言語の対応不可
こういったソースのキーワード強調を行う場合、一般的に使用するのは「Google code-prettify」。
非標準装備の言語（例えばUWSC、Verilog、VHDL他）の場合、独自に作ることになりますが、code-prettifyは呼び出し名＝ファイル名としないといけない仕様。
ファイル名が必要だからと外部に置くと劇遅の可能性。では“Bloggerの内部”とは“ガジェットにテキスト貼り付け”＝ファイル名無し。
つまり、Bloggerでcode-prettifyだと非装備言語の対応は不可能。
SyntaxHighlighterの準備と使い方
事前準備
まず、リンク先の記述のため使うべき名称をメモ。
好みのテーマを選び、.cssのファイル名…※1をメモる。
標準で存在の言語で必要なもの選び、表中のBrush aliasesとFile name…※2をメモる。
HTMLを編集
HTMLの編集画面へ入ります。
以下のコードを<body>～</body>内に貼り付ける。
ただし、
4行目の******.jsを上で選んだFile name（※2）に書き換え。複数ある場合は、行を追加。
<link href="//agorbatchev.typepad.com/pub/sh/3_0_83/styles/shCore.css" rel="stylesheet" type="text/css"/> <link href="//agorbatchev.typepad.com/pub/sh/3_0_83/styles/******.css" rel="stylesheet" type="text/css"/> <script src="//agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shCore.js" type="text/javascript"/> <script src="//agorbatchev.typepad.com/pub/sh/3_0_83/scripts/******.js" type="text/javascript"/> <script type="text/javascript"> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.all(); </script>
<script>タグにasync=”async”属性を入れると動かなくなるので注意。
ブログの記事を編集
プログラムを実際に表示したい記事内で以下のように記述。
ただし、1行目の***は、上で調べたBrush aliases（※2）の名前に書き換え。
<pre class="brush: ***; first-line: 1; highlight: [,];" title=""> ここに表示したいソース </pre>
非サポート言語の.jsを作成＆ガジェットに貼り付け
独自の言語.jsを作り、それをアップロードするのでなくブロガーのガジェットに貼り付けて適用させる方法です。
前項でシンタックスハイライターが動くことを確認しておきます。
作業全体の流れ
作業の流れは、
○サイトから雛形とする******.jsをコピー。
○その内容をテキストエディタで編集、改変。
○Bloggerのガジェットまたはフッター等に貼り付け。
○個別記事に<pre class=”brush: 作成したBrush aliases名”>として記述。
雛形に適する.jsをコピー
これを雛形とするのがよいと思います。
https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushCpp.js
コピーして、編集可能なメモ帳等のテキストエディタに貼り付けます。
.jsを編集、改変
下から5行目くらいにこうありますが、
Brush.aliases = [‘cpp’, ‘c’];
SyntaxHighlighter.brushes.Cpp = Brush;
これを自分が作る独自のものに変更。ここではuwscとしました。
Brush.aliases = [‘uwsc‘];
SyntaxHighlighter.brushes.Uwsc = Brush;
関数の中を眺めると、これで始まる定義文が三つ。
var datatypes = ‘
var keywords = ‘
var functions = ‘
この中にハイライトするべきキーワードが並んでいます。
これを作りたいものに合わせ、ジャカジャカ書き換えて行きます。
JavaScriptを知ってる方は分かると思いますが、途中で’ + ‘とし、見やすく行を区切ってあります。なのでそこは壊さないよう注意。
各キーワード間は半角スペースで区切る決まりのようです。
出来上がったら、<script>タグで挟みます。
<script type="text/javascript"> ここに作った上記.js </script>
これがガジェットに貼り付ける全内容…※★。
ブロガーのガジェットに貼り付け
ファイルを内部に置けないので、ガジェットに貼り付けます。
ガジェットの作成は、
小窓が開くので、HTML/JavaScriptを選択して作成。
上で作成した全内容※★を貼り付け→保存。
忘れちゃいけないのがそのガジェットのモバイル表示。スマホでも同じように適用させないといけません。
もう一度HTMLの編集画面へ入り、該当のガジェットを探してモバイルにも適用。??部分が場合によって異なるので探して下さい。
<b:widget id=’HTML??‘ locked=’false’ title=” type=’HTML’>
↓
<b:widget id=’HTML??‘ mobile=’yes’ locked=’false’ title=” type=’HTML’>
これで準備は完了。
個別記事の作成
プログラムを実際に表示したい記事内で以下のように記述。
1行目のbrush: ***;の***部分を、上で改変したBrush aliasesの名前に書き換え。ここではuwscとしました。
<pre class="brush: uwsc; first-line: 1; highlight: [,];" title=""> ここにプログラムのソース </pre>
結果は、こうなりました。
FOR i=0 TO 10
n=モジュール名.関数名(引数1,引数2,…,引数n)
IF n=(何か)
(色んな処理)
ENDIF
NEXT
MODULE モジュール名
PUBLIC pi=3.14159265359
PUBLIC et=2.71828182846
PUBLIC msg="これはエラーです。"
FUNCTION 関数名(引数1,引数2,…,引数n)
(色んな処理)
RESULT=ほにゃらら
FEND
ENDMODULE
以上のように、独自に作成したハイライトルールが適用されました。
Googleのブロガーって、これが無料か！？て位の大盤振る舞いのサービスなのに、できて当たり前のことができずに酷い苦労をさせられます。
コメント