以前、FAQみたいなページをmarkdownで書けるようにしていたけど、
ランタイムでコンパイルするのはやっぱり重いなと思い、
軽量化の一環で前処理にしてみたときの備忘録。

事前にPandocでVueのSFCを生成すればよかった(´ω｀)

インストール

$ brew install pandoc

テンプレートを用意する

こんな感じのファイルを用意する。
$body$にmarkdownで書いたHTMLが挿入される感じ

<!-- ./vue-sfc.vue-->
<template>
  <div>$body$</div>
</template>

<script lang="ts">
import { Component, Vue } from "nuxt-property-decorator";

@Component
export default class extends Vue {}
</script>

Pandocで.vueを生成する

こんなMarkdownファイル(faq.md)を例に。

# よくある質問 / FAQ

## 積読本しか登録してはいけないのですか？

こんな感じで実行すると

$ pandoc -f markdown -t html --template=./vue-sfc.vue ./faq.md > ./FaqContent.vue
# -f ... 入力ファイルのフォーマット
# -t ... 出力のフォーマット
# --template ... テンプレートファイル

こんなファイルが生成されます。

<!-- FaqContent.vue -->
<template>
  <div><h1>よくある質問 / FAQ</h1>
<h2>積読本しか登録してはいけないのですか？</h2><div>
</template>

<script lang="ts">
import { Component, Vue } from "nuxt-property-decorator";

@Component
export default class extends Vue {}
</script>

あとは、このコンポーネント(FaqContent.vue)を表示するページにimportすればOK!

ランタイムでコンパイルしなくても、前処理でいけた(´ω｀)

小ネタ

npm run build時に生成する

手動で実行するのはめんどうなので、package.jsonのscriptsに追加した。

{
  "scripts": {
    "dev": "npm run build:md && nuxt",
    "build": "npm run build:md && nuxt generate",
    "build:md": "pandoc -f markdown -t html --template=./vue-sfc.vue ./faq.md > ./FaqContent.vue",
  }
}

.md内で別のコンポーネントを使う

別のコンポーネントを使いたいときは、テンプレートに追加しておく。
今回は、vue-tweet-embedを使いたかったので追加。

<template>
  <div>$body$</div>
</template>

<script lang="ts">
import { Component, Vue } from "nuxt-property-decorator";
import { Tweet } from "vue-tweet-embed";

@Component({ components: { Tweet } })
export default class extends Vue {}
</script>

生のHTMLを表示したいときは、入力フォーマットに+raw_htmlをつけるらしい

$ pandoc -f markdown+raw_html -t html --template=./vue-sfc.vue ./faq.md > ./FaqContent.vue

ただ、ちゃんと変換されないことがあるので、sedで置換したりしてる...

$ pandoc -f markdown+raw_html -t html --template=./vue-sfc.vue ./faq.md | sed 's/&lt;Tweet/<Tweet/g' | sed 's:&gt;</Tweet>:></Tweet>:g' > ./FaqContent.vue

Markdownの書き方などで回避できるかもしれないけど、暫定的にこの対応。。

以上!!

こんなのつくってます!!

積読用の読書管理アプリ 『積読ハウマッチ』をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪

参考にしたサイト様

• Pandocの比較的簡単なインストール方法 - Qiita
• Pandocを使ってMarkdownを整形されたHTMLに変換する - Qiita
• Pandoc ユーザーズガイド 日本語版 - Japanese Pandoc User's Association
• Pandocを使って、改行が必要な箇所にスペースを2ついれる - Qiita