`org-mode` 製ブログの改良 (10): WebGL 🪩, Uniorg

Jun 24, 2026

背景

ブログ生成の vibe coding シリーズです。

変更

WebGL 🪩

このブログでミラーボール (ディスコボール) が回るようになりました:

上方の灯りは、オーロラを参考画像として生成してもらいました。画像認識が強いですね。

普及性のため、 WebGPU ではなく WebGL で描画しています。 GPU が検出できない場合は非表示となります。

Uniorg

ビルドに Emacs を使うのをやめ、 TypeScript 製の org パーサである Uniorg に移行しました。 Emacs の起動を待つ必要が無くなったため、ビルドを高速化できました。

一点のみ PR を送りましたが、 battle-tested なパーサだったように思います。 Regex のコンパイルはキャッシュした方が良いかも。

主な構文のテスト (test,

KaTeX

)

Golden/snapshot テストもありますが、一応この記事でマークアップの変換結果を確認しておきます。

Inline $KaTeX$ ,

$\mathcal{F} = m \ddot{\mathbb{x}}$

Figure 2: Block

KaTeX

GitHub - toyboot4e/toyboot4e.github.io: My devlog based on Org filesMy devlog based on Org files. Contribute to toyboot4e/toyboot4e.github.io development by creating an account on GitHub.GitHub

Nani翻訳の技術的な話Zenn

build.el:L923-L925toyboot4e/toyboot4e.github.io @ c0b6bea

(defun my-org-html-publish-to-html (plist filename pub-dir)
  "Publish an org file to HTML, using the FILENAME as the output directory.
Skips `#+DRAFT:'-flagged files unless this is a `--draft' build."

./og-preview.html

#+TITLE: =org-mode= 製ブログの改良 (10): Uniorg
#+DATE: <2026-06-24 Wed>
#+FILETAGS: :blog:

Listing 1: org-mode highlight test,

KaTeX

(TODO: re-impl)

// Diff
+ const f = () => 42;
+ const g = () => 42; // 1
abc;

1 coderef

The document must allow coderef # 1

Listing 2: coderef

1 coderef

Hardbreak
paragraph

Hardbreak list:

　　　　　　　　　　　　　　　　　　　　 　 　 　 　 .|　　　　　 　 　 /
　　　　　　　　　　　　　　　　 　 　 　 　 　 　 　 !　　　　　　　 /
　　　　　　　　　　　　　　　　　　　　 　 　 　 　 .l　　　　＿＿/_
　　　　　　　　　　　　　　　　 　 　 　 　 　 　 　 !　　 ／　　/　＼
　　　　　　　　　　　　　　　　 　 　 　 　 　 　 　 !　／. 　　/ _ノ　 ＼
　　　　　　　　　　　　　　　　　　　　 　 　 　 　 .l │. 　　/（● ）（●）　　　　俺が見えるか！
　　　　　　　　　　　　　　　　　　　　 　 　 　 　 .| │　　/　　（__人__）
　　　　　　　　　　　　　　　　 　 　 　 　 　 　 　 ! │.　/ 　 　｀ ⌒´ﾉ
　　　　　　　　　　　　　　　　 　 　 　 　 　 　 　 ! │ /　　 　 　 　 }
　　　　　　　　　　　　　　　　 　 　 　 　 　 　 　 | ノ./ヾ.ﾍ　　　　　}
　　　　　　　　　　　　　　　　　　　　 　 　 ..=ｨﾞﾆ|　/､;i;i;ヾヘ　　_ノ
　　　　　　　　　　　　　　　.　　　　 　 : :イ/{ ／￣ヾ}l!;i;i;iLc､＞
　　　　　　　　　　　　　　　.　　　　 　 / '/,ﾑ{　∧　 }ｰ-,-､《;i〈
　　　　　　　　　　　　　　　.　　　　 　 !:.,'〃´ﾊ｛/　 ﾊ::〃,=ヾﾐ;i
　　　　　　　　　　　　　　　.　　　　 　 :.:{/' 〃ﾞヽ__ノヽi/´　　 }＼
　　　　　　　　　　　　　　　.　　　　 　 :.:|!､/　　ヽ::Y::/{　　r､/ﾑ .＼
　　　　　　　　　　　　　　　.　　　　 　 !:.!ﾑ　　　 ヽj::ノ{ 　 | ,';i;iﾑ 　 ヽ.
　　　　　　　　　　　　　　　.　　　　 　 Ⅵﾏ＼　　_ ヽ';i乂__.ｿ;i;i;i;i| 　 　 丶
　　　　　　　　　　　　　　　.　　　　 　 ﾄj0l|Y´＼{ }　 Y;i;i;i;i;i;i;i;i;i;iﾄ，　　 　 ＼
　　　　　　　　　　　　　　　.　　　　 　 `!0j;iﾄ､　 ヾ__.人;i;i;i;i;i;i;i;i;i;i;{ 　 　 　 　 ＼
　　　　　　　　　　　　　　　.　　　　 　 〈ｿ,∧　＼　 「 ! Y;i;i;i;i;i;i;i;i;iﾑ
　　　　　　　　　　　　　　　.　　　　　 　 j､;i;i;､　　＼___丿;i;i;i;i;i;i;i;i;i;iﾑ
　　　　　　　　　　　　　　　.　　　　 　 /.:::∨;i;i`i.､___ﾉ;i＼;i;i;i;i;i;i;i;i;i;i;ｉﾑ
　　　　　　　　　　　　　　　.　　　　 　 ::::::::.∨;i;i|:;i;i;i;i;i;i;i;ｉ;＼;i;i;i;i;i;i;i;i;i;ﾑ
　　　　　　　　　　　　　　　.　　　　 　 ､_:::::::∨;i|:;i;i;i;i;i;i;i;i;i;i;i;丶:;i;i;i;i;i;i;i;ﾑ
　　　　　　　　　　　　　　　.　　　　 　 ::ｰﾆ=ｲ};i:!:;i;i;i;i;i;i;i;i;i;i;i;i;i;i＼:;i;i;i;i;i;i;i〉
　　　　　　　　　　　　　　　.　　　　 　 ヽ:::::::::ﾉ;i:!:;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i＼:;i;i;/
　　　　　　　　　　　　　　　.　　　　　 　 ヽ／;ｉ;i:|:;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i＼:〉
　　　　　　　　　　　　　　　.　　　　 　 ..／;i;i;i;i;i:|:;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;ｉ;ｉ;ｉ;＼
　　　　　　　　　　　　　　　.　　　　 　 ,ゝ;i;i;i;i;i;ｉ:|:;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i/　 丶
　　　　　　　　　　　　　　　.　　　　 　 i;i;i;i;i;i;i;i;ｉ:|:;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;/　　　　＼
　　　　　　　　　　　　　　　.　　　　 　 i;i;i;i;i;i;i;ｉ;ｉ:!:;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i∧
　　　　　　　　　　　　　　　.　　　　 　 i;i;i;i;i;i;i;ｉ;ｉ:!:;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i/. ﾑ
　　　　　　　　　　　　　　　.　　　　 　 i;i;i;i;i;i;i;i;ｉ:ｌ:;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i/／ﾏ___
　　　　　　　　　　　　　　　.　　　　 　 ､i;i;i;i;i;i;i;i:|:;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;}/イ;;;;;;;;;`!
　　　　　　　　　　　　　　　.　　　　 　 ';i;i;i;i;i;i;i;ｉ:ｌ:;i;i;i;i;i;i;i;i;i;i;i;i;i;i;i;iﾑ.;;;;;;;;;;;;;;;;;〉

まとめ

背景で 🪩 が回るようになりました。馬鹿げているほど良いですが、すこしシリアスに見えるかもしれません。

org-mode 製ブログが TypeScript 製になりました。ビルド時間が 4.2s から 1.6s まで短縮した他、 JSX で HTML を生成できるなど、メリットが大きいです。

org-mode 製ブログの改良 (10): WebGL 🪩, Uniorg

背景

変更

WebGL 🪩

Uniorg

まとめ

`org-mode` 製ブログの改良 (10): WebGL 🪩, Uniorg