BloggerのSyntaxHighlighterにLaTeXのbrushを入れてみる。

主観情報処理研究所さんのSyntaxhighlighter関連TipsにSyntaxHighlighterのLaTeX用Brushがあるよという情報があったので、うちでもBloggerに適用してみました。

\documentclass[uplatex,dvipdfmx,ja=standard,a4paper]{bxjsarticle}

\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\usepackage[dvipdfmx]{graphicx}
\usepackage{hyperref}
\usepackage[dvipdfmx]{pxjahyper}
\usepackage{comment}

\setlength{\parindent}{0pt}
\setlength{\parskip}{2ex plus 0.5ex minus 0.2ex}

\begin{document}
こんにちは、世界。
\end{document}

ほほう。

やったことは、以下の通り。

LaTeX for SyntaxHighligther 3のページから、jsへのリンクへ飛んで、ソースをクリップボードにコピーします。

BloggerのテーマでHTML編集を開いて、"/head" の前に <script>（コピーした内容を貼り付け）</script> を入れて保存。

class指定で "brush:latex" する。

です。

TeXの処理系の表記。

Mathjax で \(\rm \TeX\) の表記を行うには、インラインの場合には

\(\rm \TeX\)

と、また独立させたい場合には

$$\rm \TeX{}$$

などと表記します。

じゃあその他の\(\rm TeX\)処理系はどこまで使えるんだろうということで、やってみます。

$$\rm \TeX{}, \LaTeX{}, \XeTeX{}, \pTeX{}, \MikTeX{}, \LuaTeX{}, \BibTeX{} $$

どうもダメみたいですね。

それから LaTeX で使用できるシンボル（文字記号）の一覧を見つけたのでついでに。
The Comprehensive LATEX Symbol List

Bloggerでhighlight.jsを使う。

BloggerでSyntaxHighlighterを使う。で SyntaxHighlighter を使ってみているんですが、どうも重たいようなので、軽いと評判のhighlight.jsに切り替えてみようかな、と思いました。

Usageを参照するといろいろと使い方が書いてあり、Getting highlight.jsに詳細の説明があります。CDNJS からホスティングされているようなので、このままいけるかな。
CDNJS を使う場合には、以下のコードを </head> タグの前に入れてやればいいようです。

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

実際には CDNJS からスクリプトタグとしてコピー＆ペーストしていく形になります。
必要なのは、CDNJSのリストで一番上にある highlight.min.js。それから languages にある言語設定ファイル、下の方にある styles のスタイルファイルになります。
スタイルファイルのデモは、highlight.js demoにあるので、好きなスタイルを選べばよいでしょう。
最後に initHighlightingOnLoad() を呼び出します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js" integrity="sha256-aYTdUrn6Ow1DDgh5JTc3aDGnnju48y/1c8s1dgkYPQ8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/tomorrow-night-eighties.min.css" integrity="sha256-VeRq5fe7DQWoI4BTnuxQBub1iKtAtH4J69kUO3fD288=" crossorigin="anonymous" />
<script>hljs.initHighlightingOnLoad();</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/languages/bash.min.js" integrity="sha256-zXrlim8wsIvcEFjsD3THiAfTvtPZifqx8q0rxegiWQc=" crossorigin="anonymous"></script>

こんな感じで用意しておいて、これを使います。"integrity" のところは、万が一 CDNJS で改竄された場合にセキュリティを確保するために入れています。
これでできるかな？

以下に highlight.js の pre でコードを載せてみます。

#include <stdio.h>
void main(void) {
    printf("Hello, World!\n");
}

どうやらちゃんと機能しているようです。
ただ、行番号についてはポリシーとしてサポートしていない、ということが説明されていました。

まとめてみると、

• Crayon Syntax Highlighter
  ツールバーが出てコピーコードなどが利用できる。機能がリッチ。でも重たい。
• SyntaxHighlighter
  ツールバーが出ない。コピーはマウスでセレクト＆コピー。行番号が使える。
• highlight.js
  シンプルでとても軽い。でも行番号もツールバーも出ない。

という感じでしょうか。

VSCodeで整形する。

テキストファイルの整形というと二種類あって、72桁で並べ替える、というようなものと、特定の記法に従ってプログラムの論理構造を整理する、というようなものに分かれます。

72桁の方はぶら下がり、追い出し、ハイフネーションなどなどいろいろな処理があります。一方プログラムの方は、それぞれの言語で推奨されるコーディング規約であったりプロジェクトでの決まりであったりといろいろと方言があります。

で、話は変わって、これまではここで SyntaxHighlighter を使ってコードを表示するようにしていました。これは CDN を利用することで、外からコードを引いてきてブラウザ側で整形させるというものです。

でもやっぱり WordPress を使っていたときの Crayon Syntax Highligher のほうがいいなと思うので、ちょっとあがいてみることにしたんですが…。

Cryayon Syntax Highlighter for Bloggerのページにそれっぽいことが書いてあったので、まずはそこから crayon-min.css をダウンロードして中身を見てみることにしました。が…改行コードが入っていない css ファイル…。

そこで、それを一旦保存して、VSCode で整形してみることにしました。（もちろん Neovim とかでもいいんですが）

VSCode で読み込んで折返しをやめたところです。読みづらいです。

そこで、 ALT + SHIFT + F（VSCode の整形ショートカット） を押します。すると、画面右下にポップアップがでました。

なにそれすごい、という感じです。「できません」じゃなくて「インストールする？」というのはすごく親切。早速 "Install Formatter" ボタンをクリックすると、

こんなん出ました。
一番上の "CSS Formatter" は 22万以上もダウンロードされていて☆4つです。特にこだわりもないのでこれにしてみます。

インストールしたので、再度 ALT + SHIFT + F してみると、サッ！と整形してくれました。先頭のコメント部分はそのままでしたが。

いくつかエラーも出ているようですが、これで読みやすくなりました。

Bloggerでの画像データの扱い。

Blogger Helpでブログへの画像や動画の追加には、

ブログ内の画像は Google アルバム アーカイブに保存され、ページやブログ投稿に挿入する際に Blogger に表示されます。

とあるのですが、一方でGoogle アルバムアーカイブのほうでは、

Google+ のアルバム アーカイブ内の写真と動画は、2019 年 4 月 2 日以降に削除されます。詳細

などとあって、2019年4月2日以降削除されてしまうようなことが書いてあります。Bloggerについてはどうなってんの？と思うんですが、上記詳細のリンク先にも詳しいことは書いていないようです。
どうなってんの？

PICのタイマ機能の比較。

PICは世代ごとに実装されている機能が微妙に違ってきているので、機能をきちんと把握しないとあとで苦労することになります。
今回は自分用に、PIC16F1619とPIC16F18346のタイマ機能を比較してみました。
なお、Bloggerは組み込みのテーブルツールなどがないので、テーブルの作成は HTML Table Generator を使ってみました。

まずはLibreOffice Calcで表を作成し、これをCSVで保存します。HTML Table GeneratorにCSVファイルをインポートして、各種装飾を施し、その出力をクリップボードにコピーして貼り付けます。

まず最初にPIC16F1619。これはCuriosity Development Boardに付属してくるPICです。

PIC16F1619のタイマー構成
	TIMER0	TIMER1/3/5	TIMER2/4/6
機能	8bit Timer/Counter	16bit Timer/Counter	8bit Timer/Period
タイマーレジスタ	8 bit TMR0	16bit TMR1H/1L	8bit TMR2
ピリオドレジスタ	なし	なし	8bit PR2
プリスケーラ	3bit 1/1 – 1/256	2bit1/1, ½, ¼, 1/8	3bit 1/1 – 1/128
ポストスケーラ	-	-	4bit 1/1 – 1/16
クロック	各種選択可 EXTCLKエッジ選択	T1CKI入力 Fosc Fosc/4 LFINTOSC	4bit 12種類から選択可
ステータスフラグ
割り込み要因	オーバーフロー TMR0IF	オーバーフロー TMR1IF	マッチ PR2
リセット/リスタート		あり	14種類から選択可 T2RST
ゲート制御		ゲート極性選択 トグルモード シングルパルスモード 値ゲート ゲートイベント割り込み
その他	TMR1のゲートとして使用可	コンパレータ出力 ADCトリガー	フリーランカウンタ ワンショット モノステーブル PWMとして利用可

機能としては、大きくTIMER0、TIMER1/3/5、TIMER2/4/6で分かれていることがわかります。またTIMER0は8bitタイマ/カウンタです。

一方、PIC16F18346は以下のようになります。

PIC16F18346のタイマー構成
	TIMER0	TIMER1/3/5	TIMER2/4/6
機能	16bit Timer/Counter 8bit Timer/Counter/Period	16bit Timer/Counter	8bit Timer/Period
タイマーレジスタ	8 or 16( selectable) 16 (TMR0H/TMR0L)	16bit TMR1H/1L	8bit TMR2
ピリオドレジスタ	8bit TMR0H	なし	8bit PR2
プリスケーラ	4bit 1/1 – 1/32768	2bit 1/1, ½, ¼, 1/8	2bit 1/1, ¼, 1/16, 1/64
ポストスケーラ	4bit 1/1 – 1/16	-	4bit 1/1 – 1/16
クロック	3bit 7種から選択可	T1CKI Fosc Fosc/4	Fosc/4
割り込み要因	マッチ(8bit) またはオーバーフロー(16bit)	オーバーフロー	マッチ PR2
出力	ピンまたは他のペリフェラル
リセット/リスタート		あり
ゲート制御		ゲート極性選択 トグルモード シングルパルスモード 値ゲート ゲートイベント割り込み
その他		コンパレータ出力 ADCトリガー Capture/Compare	MSSPxのシフトクロックとして使用可

TIMER0は16bitタイマ/カウンタと8bitピリオドタイマの切り替えができるようになっています。つまり、16bitタイマ/カウンタが4つと8bitタイマが3つ、もしくは16bitタイマ/カウンタが3つと8bitタイマが4つの組み合わせから選択できることになります。

mTouchのCVD実装ではピリオドタイマとしてTMR2/4/6を選択できるようになっていましたが、PIC16F18346 を使えば TMR0 も選択肢に入れられそうです。ただし、MCCでは 2/4/6 からのみ選択できるようになっているので、その部分は自分で実装しないといけません。CuriosityでmTouchを試してみる。その4で、

他のタイマに変更できないのか、できるとすればどうすればいいのかはちょっと調べてみたいと思います。

と書きましたが、MCC上から簡単にできました。mTouchのAFAの設定でタイマを指定できるようになっています。またAFA（Automatic Frequency Adaptation）を使用しない（つまりソフトでゴリゴリ実装する）方法も選ぶことができますが、これだとタイミングを正確に取れないのでやめたほうがよさそうなのですが、もしかしてTMR0を使うならこの方法を使うしかないのかもしれません。その場合、AFAで何をやっているのかをソースを追いかけて、同様の処理をTMR0で実現すれば使えるのかも。

Bloggerでのテーブルの書き方。

Blogger は残念なことにテーブル（表）を書く機能を提供していません。

WordPress では、有名なTablePressプラグインがあって、いろいろな修飾や並べ替え、簡易データベースとして検索できるような機能を提供していて、これはなかなかすごいものがあります。

でも Blogger はテーブルを書く機能を提供していません。大切なことなので（以下略

冗談はさておき、Bloggerでテーブルを書くには、<table />、<td />、<tr />というHTMLタグを使ってゴリゴリと書いていく、という方法があるわけですが、これもめんどくさい。

こういうときには、外部のツールで表を作って、それをHTMLにエクスポートして、それをコピペすれば楽じゃん、という方向で考えてしまいます。楽できるところは苦労する必要はありません。

幸いなことに、この世には LibreOffice というすばらしいツールがあります。いわゆるオフィススイートというやつです。今回はこれを使って楽をしてしまいます。

まずLibreOfficeで表を作ります。
Write（Microsoft Wordに相当）か Calc（Microsoft Excelに相当）を起動して、好きなように表を書きます。

上はCalcで適当に書いて適当に色とかつけたものです。
ここから、表部分を範囲選択してクリップボードにコピーします。

次に Write を起動し、「新規ドキュメント」を作成します。
そこで「編集」→「形式を選択して貼り付け」→「詳細オプション」を選択します。するとダイアログが出るので、"HyperText Markup Language (HTML)" を選択して "OK" を押します。

Writer に貼り付けると以下のようになります。

そうしたら、「ファイル」→「名前を付けて保存」を選択し、デスクトップなどのわかりやすい場所に、「ファイルの種類」を "HTML ドキュメント" として保存します。確認画面が出ますから、そこは「HTMLドキュメント形式を使用」を選びます。

次に、そのファイルをテキストエディタで読み込みます。以下は秀丸で読み込んだところです。

ここから <table>～</table> で囲まれた部分を選択してコピー、Bloggerのエディタに貼り付けます。

	ほんどたぬき	あらいぐま
原産国	日本	北米
分布	日本	北米、中米、日本 欧州の一部
木登り	下手	上手

あとは幅などの体裁を整えてできあがりです。

また、これとは別に Tables Generator の HTML Table Generator を使う方法もあります。こちらのほうが好みの人もいるかも知れませんが、一応セキュリティにはご注意を。

BloggerでSyntaxHighlighterを使う。

CにしてもPythonにしてもなんにしても、Bloggerでソースコードを貼り付けるのは<pre />タグを使っても面倒だったりします。

以前にWordPressでやっていたときには、Crayon Syntax Highlighterを使っていました。最近はCDN（Content Delivery Network）という仕組みを使って、サーバにインストールしなくてもCDNへのリンクでスタイルシートや.jsファイルをロードできるので、管理がずいぶんと楽になってきています。

早速、SyntaxHighlighterを使ってソースコードをきれいにできないかとやってみました。"syntaxHighligher cdn" で検索してみると、CDNJS.COMに記述がありました。ここから必要なファイルへのリンクを拾ってきて、Bloggerのテーマファイルにコピペしてやることで使えるようになるはずです。

必要なファイルは、

• shCore.js
• shCore.css
• shThemeDefault.css
• 必要な言語のBrushファイル

です。

ファイルリストの右側にあるコピーボタンをクリックすると、"Copy Script Tag" というメニューが出るので、これでコピーしてからテーマファイルにペーストしていきます。ここでは定義は以下のようにしました。

<!-- SyntaxHighligher scripts and css -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreDefault.css" />

<!-- Brush files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushBash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCpp.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCss.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushDiff.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPhp.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPlain.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPowerShell.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPython.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.js"></script>

<!-- bloggerで使用可能にする -->
<script type="text/javascript">
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all()
</script>

最後の bloggerMode については、公式のConfigurationを参照。

これをBloggerのテーマの </head>タグの直前に置きます。

ソースコードを書くときは

<pre class="brush:cpp; ruler:true; first-line:5; highlight:[7-9]"> ソースコード </pre>

みたいな感じです。

Bloggerのテーマ変更。

なんかこのテーマ、行間があきすぎてるし文字が大きいし、読みにくくないかしら？

ちょっとフォントサイズ変えようかしら。

数式がmathjaxで表示されなかった理由。

しばらく前から、設置当初は表示されていたのに数式がいつのまにかMathjaxで処理されなくなっていたのですが、久々にmathjaxのサイトを見たら理由がわかりました。

We retired our self-hosted CDN at cdn.mathjax.org in April, 2017. We recommend using cdnjs.com which uses the same provider. The use of cdn.mathjax.org was governed by its terms of service.

2017年4月でホスティングサービスを終了し、cdnjs.comに移管したようです。

これにともなってBloggerテンプレートの設定も変える必要があるとのこと。

Bloggerの各記事に日付を入れたい。

どなたか知ってる人いませんかー。

Bloggerの投稿日付の扱い。

このブログを見れば一目瞭然なんですが、各投稿記事のところ、日付はなくてなぜか時刻のみになっています。
自分的感覚としては、投稿した時刻よりも投稿した日付のほうが重要だと思うんですが…なんでこうなっているのか。

ちなみに投稿時刻の上にマウスカーソルをホバーすると投稿日時がチップしますので、確認手段さえ知っていれば投稿日時を知ることはできますが、そこまでできるなら素直に表示してほしいところ。

ところがこれを表示するための設定項目というのがなくて、表示するためにはHTMLテンプレートをいじらないといけないようです。

ということでググって見るわけですが、引っかかってくるのは "data:post.dateHeader" を判定している部分を、判定をなくして "data:post.timestamp"を表示させればいいよ、というものばかり。ところがなぜか自分の使っているテーマではそもそも "data:post.dateHeader" を判定している部分がありません。

おそらくこちらの Show Date For All Posts in Blogger とか Bloggerで記事の公開日/最終更新日を表示してみた などがたぶん正解を示してくれているんだと思うんですが、なんか変。特に後者は2018年の記事なのに。
テーマを変更すると出てくるのかしら。