PandocでMarkdownからVueのSFCを生成してみた
以前、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/<Tweet/<Tweet/g' | sed 's:></Tweet>:></Tweet>:g' > ./FaqContent.vue
Markdownの書き方などで回避できるかもしれないけど、暫定的にこの対応。。
以上!!
こんなのつくってます!!
積読用の読書管理アプリ 『積読ハウマッチ』をリリースしました!
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!
もしよかったら、遊んでみてくださいヽ(=´▽`=)ノ
要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪
参考にしたサイト様
Author And Source
この問題について(PandocでMarkdownからVueのSFCを生成してみた), 我々は、より多くの情報をここで見つけました https://qiita.com/kira_puka/items/1e68c7838f123cd1255b著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .