Bloggerでのソースコード表示と非サポート言語へのカスタマイズ｜シンタックスハイライターで綺麗にUWSC、Verilog他プログラム

Google運営のBloggerでプログラムのソースコードを綺麗に表示する話題です。

ポク太郎です。

Google運営のBloggerは他のサービスと異なる事情が点在。その事情を鑑みたBloggerでのソースコード表示について書きました。

本記事では下で示す理由により「Google code-prettify」でなく「SyntaxHighlighter」を採用。

その使い方と非装備言語への対応方法について書いてあります。


少しややこしいBloggerの事情

本項目は「Google code-prettify」ではダメな理由。

Bloggerは内部にjs、cssファイル置けない

Bloggerは画像以外のファイルを内部に置けない仕様。必要なら.jsや.cssはGoogleドライブに置き外部ファイルとして参照しないといけません。

が、GoogleのサービスはIPv6。IPv4の閲覧者がアクセスした際、時によって極端に読み込みが遅くなる危険性。このトラブルが解決したのか不明。かなり根が深い問題。

つまり、Googleドライブに置くやり方は危険。

ファイル名必須なGoogle code-prettify＝非装備言語の対応不可

こういったソースのキーワード強調を行う場合、一般的に使用するのは「Google code-prettify」。

非標準装備の言語（例えばUWSC、Verilog、VHDL他）の場合、独自に作ることになりますが、code-prettifyは呼び出し名＝ファイル名としないといけない仕様。

例：呼び出し名uwsc、ファイル名lang-uwsc.js

ファイル名が必要だからと外部に置くと劇遅の可能性。では“Bloggerの内部”とは“ガジェットにテキスト貼り付け”＝ファイル名無し。

つまり、Bloggerでcode-prettifyだと非装備言語の対応は不可能。

へ

SyntaxHighlighterの準備と使い方

事前準備

まず、リンク先の記述のため使うべき名称をメモ。
好みのテーマを選び、.cssのファイル名…※1をメモる。
標準で存在の言語で必要なもの選び、表中のBrush aliasesとFile name…※2をメモる。

HTMLを編集

HTMLの編集画面へ入ります。

Bloggerのトップ（管理画面）の左側メニューから、テンプレート　＞　HTMLの編集　ボタン

以下のコードを<body>～</body>内に貼り付ける。
ただし、

2行目の******.cssを上で選んだファイル名（※1）に書き換え。
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>

これがガジェットに貼り付ける全内容…※★。

ブロガーのガジェットに貼り付け

ファイルを内部に置けないので、ガジェットに貼り付けます。
ガジェットの作成は、

Bloggerのトップ（管理画面）の左側メニューから、レイアウト　＞　サイドメニューやフッター等の　ガジェットを追加　を押す

小窓が開くので、HTML/JavaScriptを選択して作成。

Blogger｜非サポート言語のソースコードを綺麗に表示｜シンタックスハイライターのカスタマイズ｜UWSC、Verilog他のプログラム

上で作成した全内容※★を貼り付け→保存。

忘れちゃいけないのがそのガジェットのモバイル表示。スマホでも同じように適用させないといけません。

もう一度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のブロガーって、これが無料か！？て位の大盤振る舞いのサービスなのに、できて当たり前のことができずに酷い苦労をさせられます。

コメント

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