tag:crieit.net,2005:https://crieit.net/tags/Pandoc/feed Crieitでタグ「Pandoc」に投稿された最近の記事 2019-11-27T15:33:48+09:00 https://crieit.net/tags/Pandoc/feed tag:crieit.net,2005:PublicArticle/15564 2019-11-27T15:33:48+09:00 2019-11-27T15:33:48+09:00 https://crieit.net/posts/Pandoc-Markdown-Vue-SFC <p>以前、<a target="_blank" rel="nofollow noopener" href="https://qiita.com/kira_puka/items/68732b402b2523f4ccd7">FAQみたいなページをmarkdownで書けるようにしていた</a>けど、<br /> ランタイムでコンパイルするのはやっぱり重いなと思い、<br /> 軽量化の一環で前処理にしてみたときの備忘録。</p> <p>事前にPandocでVueのSFCを生成すればよかった(<em>´ω｀</em>)</p> <h3 id="インストール"><a href="#%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">インストール</a></h3> <pre><code class="shell">$ brew install pandoc </code></pre> <h3 id="テンプレートを用意する"><a href="#%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%92%E7%94%A8%E6%84%8F%E3%81%99%E3%82%8B">テンプレートを用意する</a></h3> <p>こんな感じのファイルを用意する。<br /> <code>$body$</code>にmarkdownで書いたHTMLが挿入される感じ</p> <pre><code class="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> </code></pre> <h3 id="Pandocで.vueを生成する"><a href="#Pandoc%E3%81%A7.vue%E3%82%92%E7%94%9F%E6%88%90%E3%81%99%E3%82%8B">Pandocで.vueを生成する</a></h3> <p>こんなMarkdownファイル(<code>faq.md</code>)を例に。</p> <pre><code class="markdown"># よくある質問 / FAQ ## 積読本しか登録してはいけないのですか？ </code></pre> <p>こんな感じで実行すると</p> <pre><code class="shell">$ pandoc -f markdown -t html --template=./vue-sfc.vue ./faq.md > ./FaqContent.vue # -f ... 入力ファイルのフォーマット # -t ... 出力のフォーマット # --template ... テンプレートファイル </code></pre> <p>こんなファイルが生成されます。</p> <pre><code class="html"><!-- 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> </code></pre> <p>あとは、このコンポーネント(<code>FaqContent.vue</code>)を表示するページにimportすればOK!</p> <p>ランタイムでコンパイルしなくても、前処理でいけた(<em>´ω｀</em>)</p> <h4 id="小ネタ"><a href="#%E5%B0%8F%E3%83%8D%E3%82%BF">小ネタ</a></h4> <h5><code>npm run build</code>時に生成する</h5> <p>手動で実行するのはめんどうなので、<code>package.json</code>の<code>scripts</code>に追加した。</p> <pre><code class="json">{ "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", } } </code></pre> <h5 id=".md内で別のコンポーネントを使う"><a href="#.md%E5%86%85%E3%81%A7%E5%88%A5%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E4%BD%BF%E3%81%86">.md内で別のコンポーネントを使う</a></h5> <p>別のコンポーネントを使いたいときは、テンプレートに追加しておく。<br /> 今回は、<a target="_blank" rel="nofollow noopener" href="https://github.com/tonickkozlov/vue-tweet-embed#readme">vue-tweet-embed</a>を使いたかったので追加。</p> <pre><code class="html"><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> </code></pre> <p>生のHTMLを表示したいときは、入力フォーマットに<code>+raw_html</code>をつけるらしい</p> <pre><code class="shell">$ pandoc -f markdown+raw_html -t html --template=./vue-sfc.vue ./faq.md > ./FaqContent.vue </code></pre> <p>ただ、ちゃんと変換されないことがあるので、<code>sed</code>で置換したりしてる...</p> <pre><code class="shell">$ 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 </code></pre> <p>Markdownの書き方などで回避できるかもしれないけど、暫定的にこの対応。。</p> <p>以上!!</p> <h2 id="こんなのつくってます!!"><a href="#%E3%81%93%E3%82%93%E3%81%AA%E3%81%AE%E3%81%A4%E3%81%8F%E3%81%A3%E3%81%A6%E3%81%BE%E3%81%99%21%21">こんなのつくってます!!</a></h2> <p>積読用の読書管理アプリ 『積読ハウマッチ』をリリースしました！<br /> <a target="_blank" rel="nofollow noopener" href="https://tsundoku.site">積読ハウマッチ</a>は、Nuxt.js+Firebaseで開発してます!</p> <p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/572d4947-f40b-e4dc-1c9c-bc584cd2a66c.png" width="200"/></p> <p>もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ</p> <p>要望・感想・アドバイスなどあれば、<br /> 公式アカウント(<a target="_blank" rel="nofollow noopener" href="https://twitter.com/MemoryLoverz">@MemoryLoverz</a>)や開発者(<a target="_blank" rel="nofollow noopener" href="https://twitter.com/kira_puka">@kira_puka</a>)まで♪</p> <h1 id="参考にしたサイト様"><a href="#%E5%8F%82%E8%80%83%E3%81%AB%E3%81%97%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88%E6%A7%98">参考にしたサイト様</a></h1> <ul> <li><a target="_blank" rel="nofollow noopener" href="https://qiita.com/sky_y/items/3c5c46ebd319490907e8#mac">Pandocの比較的簡単なインストール方法 - Qiita</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://qiita.com/cawpea/items/cea1243e106ababd15e7">Pandocを使ってMarkdownを整形されたHTMLに変換する - Qiita</a></li> <li><a target="_blank" rel="nofollow noopener" href="http://sky-y.github.io/site-pandoc-jp/users-guide/">Pandoc ユーザーズガイド 日本語版 - Japanese Pandoc User's Association</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://qiita.com/tmsanrinsha/items/89df4500eb38a20e896e">Pandocを使って、改行が必要な箇所にスペースを2ついれる - Qiita</a></li> </ul> きらぷか@積読ハウマッチ/SSSAPIなど