ブログ上のシンタックスハイライトに関する悶々

はてなブログでシンタックスハイライトするのに highlight.js を使っています。ちょっとイマイチだな、と感じています。派手さが。 VS Code なんかで見るシンタックスハイライトと比較してにぎやかさがないんですよね。そこで目を付けたのが Prism.js です。

ちょっと使ってみました。とりあえず JavaScript に関して言うと highlight.js より地味。白い文字が多いです。これは面白くないですね。それにコードブロックに class="language-javascript" とか書かないと動作しません。 highlight.js は書かないでも適当に判断して動作してくれます。シンタックスハイライトされたくないときには class="nohighlight" と書いてやるんですが。 Prism.js には多くのオプション機能があって優れている面もあります。でも僕の需要とはマッチしないようです。

一番確実なのは VS Code で書いたコードをそのままはてなブログの見たまま編集にペーストすることです。 VS Code で見たままが反映されます。素晴らしいです。でも僕としては情報管理アプリ Obsidian で Markdown を使って記事を書きたいので、やはり僕の需要とはマッチしないのです。

2 番目に確実そうなのがはてな記法を使うことでしょうか。はてな記法にはスーパーpre記法（シンタックス・ハイライト）というのが用意されていて、サーバ側でシンタックスハイライトしてくれるようですから、フロントエンドで動作する highlight.js や Prism.js より高度なことができるでしょう。ただこれも、 Obsidian で書きたいという要望にマッチしないのです。はてな記法を使うには HTML 編集ができなくなりますから、 Obsidian からのペーストができないのです。

僕としては十分に満足な方法が見付からないわけですね。自分で書けと言われそうだし、そうしようかという選択肢がないわけではないのですが、ちょと面倒過ぎます。プログラミング言語の構造とかをよく理解してないと書けないでしょうから、まずはそこから始めないと。

ということで、なんだか悶々としているわけです。まぁ将来的には自分で書いてみるのもいいかもしれませんね。 JavaScript だけならどうにかなるかもしれません。

はてなブログのトップページに特定の記事を表示し続ける

はてなブログの自分のサイトでトップページに表示されるのは最新記事です。特定の記事を表示し続けることは、通常はできません。でもちょっと工夫するとできるようになります。

まずは対象の記事を公開しましょう。公開したら記事の編集ページで、右側に表示される「歯車」アイコンを選択します。そこには「投稿日時」を変更する場所があります。ここで未来の日付を指定しましょう。 100 年後くらいにしておけばいいと思います。これで常にトップに表示されるようになりました。

はてなブログのカラムを増やす

はてなブログのカラムを増やす方法です。まずは 3 カラムにしてみましょう。

操作画面の左にある「デザイン」のメニューから「スパナアイコン」のタブを選択し「サイドバー」に「モジュールの追加」から「 HTML 」を選択します。タイトルは空にして置いて下のような HTML を追加します。これでカラムが一つ増えました。右側に表示されます。

</div>
</div>
</div>
</aside>
<aside>
<div>
<div>
<div>

この下にモジュールを追加するなり広告を入れるなりすることができます。下のようにして本来のサイドバーとの距離を調節するといいでしょう。

</div>
</div>
</div>
</aside>
<aside style="margin-left: 30px;">
<div>
<div>
<div>

左側にモジュールを追加するなら下のようにします。

</div>
</div>
</div>
</aside>
<aside style="order: -1;">
<div>
<div>
<div>

同じ要領でカラムを増やしていくことができます。増やしすぎると表示要素が広くなって問題かもしれませんが。

はてなブログを改装したけどムダだった話

またやってしまった！　俺の時間を返せ、とがなり立てる相手は自分だった。時間を15時半に戻そう。もう一作業できそうな時間。何をしよう。思えばはてなブログのカテゴリーの並び順について無関心で来たけど、そろそろどうにかしようとなった。左に並んだメニューから「カテゴリー」を選択。いじり回るけど順番を変えられない。これはお得意のJavaScriptでどうにかするしかないな、となった。全てはここだった。ここでググっていればすぐに終わっていた話だった。

――親譲りの猪突猛進で子供の頃から損ばかりしている――

ググらずに突っ走った。突っ走った結果として下のようなものを書いた。

JavaScript

let categoryList = {
  "JavaScript": 1,
  "CSS": 2,
  "Obsidian": 3,
  "コンピュータ関連": 4,
  "日記": 5,
  "落書き": 6,
  "フリーライティング": 7,
  "私事": 8,
  "小説制作": 9,
  "レビュー": 10,
  "思考ノート": 11,
  "提供ウェブサービス": 12,
  "その他": 13
}
Array.from(document.querySelectorAll(".hatena-module-category")[0].querySelectorAll(".hatena-urllist")[0].children).forEach(rly => {
  rly.style.order = categoryList[rly.children[0].className.slice(9)]})

CSS

.hatena-module-category ul {
  display: flex;
  flex-direction: column;}

大したものではないけど、よく分かってないからトライ・アンド・エラーで時間がかかった。終わったときには16時半くらいだった。思いどおりにカテゴリーが並び変わっている。素晴らしい仕事をした。これは記事にしないともったいない。だけど僕は慎重だった。ここで慎重になれるのにどうして最初になれなかったのか悔やまれる。しかし慎重になった僕は同じような記事がないかググった。同じような記事が見付かった。しかも完璧だ。

「カテゴリーの順番を変える」

なんとメニューの「デザイン」からサイドバーのカテゴリーをカスタマイズできるのだ。ちょー簡単。ささっと並び替えができる。それじゃぁ僕のやったことはなんだったのか。一応のところ無意味だ。無意味だが僕の中に小さな何かが出来上がったような気がする。まるで新たなトリビアが生まれた瞬間に立ち会っているみたいだ。

まぁいいさ。僕は懲りずにやり続けるだろう。そのうち何か大きなものが生まれるかもしれない。生まれないかもしれないが、何もしないで生きることはできない。僕は何かしていないと呼吸ができなくなる生き物なんだよ。マグロみたいにね。明日に向かって生きていこう。そう思った今日だった。

Markdown の HTML 化ツール ― Obsidian + はてなブログ ―

Obsidian からはてなブログに文章をコピペすると Markdown が張り付けられてしまします。 Markdown を張り付けるモードはあるのですが、それだと「編集 Markdown 」でしか編集できなくなり、「編集見たまま」も「 HTML編集」も使えなくなります。

ちょっと不便なので Markdown を HTML に変換するライブラリを作りました。はてなブログに実装したのでご利用ください。

Markdown を張り付けると HTML に変換されます。コピーして「 HTML編集」タブに張り付けてください。

---