起こったこと

growi.docs 執筆時、 「〜は{{hoge}} というフォーマットで〜」みたいな文を書いていたら、表示結果を見ると{{hoge}}の部分が消えている...

原因

vuepress のテンプレート(おそらくvuepressに限らず多くのjsテンプレート）における {{}} は Mustache 構文といい、DOMをレンダーする時にhtmlに変数を渡す時に使われる。今回のようにたとえ `` で括っていても{{hoge}}はテンプレートエンジンによって変数hogeの値に置き換えられてしまう。

解決: 波括弧をエスケープ

その肝心のエスケープ方法がわからないんだよーと悩んでいたが、vuepress の場合は v-pre を使えばできるらしい。公式doc external_linkにも書かれてました

ブロックの場合
::: v-pre
- 〜は`{{hoge}}`というフォーマットで〜
:::

インラインの場合
- 〜は<code v-pre>{{hoge}}</code>というフォーマットで〜

解決までの経緯と感想

最初はひたすら波括弧をエスケープする方法を模索、結果わからず {{"{{hoge"}} という謎の解決方法を発見する。次に「Mustache構文 エスケープ」で検索、すると「アンエスケープなhtmlを渡す方法」的なのに邪魔される。最終的にyukiさんに v-pre の存在を教えてもらい解決に至った。「この置き換え処理が誰によって行われているのか」という視点で調べていければ、「vuepress のテンプレートエンジンによるもの」→「この機能をエスケープする方法を調べるためvuepress公式docへ」という流れに行けたのかもしれない...?