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.jsonscriptsに追加した。

{
  "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)まで♪

参考にしたサイト様

Originally published at qiita.com

きらぷか@i18n補助ツール『トランスノート』開発者

フリーエンジニア/今はNuxt.js/いつかFlutter 受託&アプリ/Webサービス/ゲームを #個人開発 CS修士→SIer/R&D→フリー #paiza はAランクで満足/AtCoderしたい 仕事依頼やご相談はDMまで Kotlin/Python/Swift/Unity/Java/Haskell/DDD

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント