ここがQiitaなら、きみはMarkdown

第4話 あまたのタグ、EPUBのごとく

ところで、カクヨム記法はどのように実装されているのでしょうか。

第2話のHTMLのソースを見ると、カクヨム記法は以下のように変換されているのがわかります。

<p id="p7">ルビは<ruby><rb>こんな奴</rb><rp>（</rp><rt>ルビのサンプル</rt><rp>）</rp></ruby>です。傍点は<em class="emphasisDots"><span>こ</span><span>ん</span><span>な</span><span>奴</span></em>です。

</p>

<p id="p8">ルビ文字には<ruby><rb>絵文字</rb><rp>（</rp><rt>😇😂😨😷</rt><rp>）</rp></ruby>でも使えそうです。</p>

<p id="p9" class="blank"><br /></p>

なるほどという感じですね。「<p><br /></p>」はキモいという方もいるかもしれませんが、日本語EPUB3などでは標準的に使われている空行の記法です。

そんなこともあって、全般的にはEPUBぽいような作りですが、細かく見るとだいぶ違ってるようにも見えますね（……今回のタイトルはあんまり適切ではなかったかも。まあでも気にせずそのままにしておきます）。emphasisDotsはカクヨムオリジナルと思われます。いちいちspan要素で囲っているのは傍点のレンダリングに問題があるんでしょうか（電書協EPUB制作ガイドでは「<span class="em-sesame">テキスト</span>」みたいに書きます）。

もっとも、編集画面にはプレビュー機能があり、こちらでは（当然ながら）サーバサイドの方では変換されず、JavaScriptで記法を解釈してルビや傍点に見えるように変換しているようです。

……ということの説明に、その「変換前のテキスト」を紹介しながら話を進めたかったわけですが、残念ながらこれをカクヨムで表現することはできないのでした。エスケープ記法やpre記法（整形済みテキストとして表示するための記法）がないからです。どうしてくれよう……。最悪画像が使えるのであれば画像化して貼れるのですが、それも駄目なのでつらみしかありません。