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

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

# 解決: 波括弧をエスケープ
その肝心のエスケープ方法がわからないんだよーと悩んでいたが、vuepress の場合は v-pre を使えばできるらしい。[公式doc](https://v1.vuepress.vuejs.org/guide/using-vue.html#escaping)にも書かれてました

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

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

---

## Page Navigation

- Canonical URL: https://tips.weseek.co.jp/開発日記/vuepressのテンプレート内で二重波括弧をエスケープ
- Permalink: https://tips.weseek.co.jp/5f16ecf4c2f6150048b2955b
- Parent: [開発日記](/5e3d294bcff797004b16abba.md)
- Children: 0 total
- Total descendants: 0
- Siblings: 20 total
  - [GROWIのAPIを使用したアプリケーション](/5e5bd0e3e7f8db0048df3a08.md)
  - [GitとGitHubの違い](/5e417dcadecd0a0049953ad7.md)
  - [LDAP攻略への道](/5e48b2561ec5e4004811d4e9.md)
  - [Migrationsファイルを作成する](/5e9d1dc7b682620049e55a64.md)
  - [QiitaでGROWIが設計書システムとして紹介されました](/5e535a04eb17ce0048b9fb13.md)
  - [UserManagement](/65069da24603e7ff39a6b3d2.md)
  - [aタグ以外での画面遷移](/5e9cfd51b682620049e55a5d.md)
  - [jestを使ったテストを初実装しました](/5ef1ed225eea4b004a1912b2.md)
  - [npm とyarn の違いを簡単に説明](/5e3e6822591d7f0048b3cc5e.md)
  - [react-card-flipを使って回転するカードレイアウトを作る](/5ebaa05ad3055000488bd526.md)
  - [throttleでスクロールイベントを間引く](/5e8de43931511b0048ecf612.md)
  - [なぜsetStateをComponentDidMountで使用してはいけないのか](/5eb7728458c8ea00480d0825.md)
  - [アジャイルとウォーターフォール](/5e4137d343c1c400499b6bac.md)
  - [セルフレビューはどこまで確認しようか](/5e3d2adfcff797004b16abbe.md)
  - [ソート機能の実装](/5e8aadc15245e70048c22c7c.md)
  - [タスクを円滑にこなすために必要な垂れ流しとは](/5e47a18a927c020048448a18.md)
  - [ページ内リンクの実装](/5e93c9d511007300489677ff.md)
  - [レビュー依頼する際に確認すること](/5e3ae41225751e00499297f6.md)
  - [動作確認用にページをたくさん作りたい](/5f80326633588b0048eaf865.md)
  - [間違えてマージしてさらにプッシュしちゃった](/5e9d176db682620049e55a60.md)
- Last updated: 2020-07-21T13:36:27.608Z by deleted_at_1672138409189
- Full page listing (all children regardless of count): https://tips.weseek.co.jp/_api/v3/page-listing/children?id=5f16ecf4c2f6150048b2955b