Vue.jsでMarkdownを表示する

軽いメモ。

根っからのアプリエンジニアな所為か、静的なページを作るのがとても面倒に感じます。

なんでいちいち文字組みせんといかんねんって感じで。
HTMLタグとか知らんし。

デザインセンスの欠片もないエンジニアはMarkdownが限界です。
ってか、Markdownそのまま表示したらええやん。

で、思い立ったんででやりました。
(ざーっとやったんで、きっともっと簡単な手法があると思います)

構想

• Vue.jsで
• .mdファイルを読ませて
• 表示だけする

Vue.jsを準備

• 前回参照

Vue.jsでmdファイルを読めるようにする

• npmで markdown-to-vue-loader をインストール

$ npm install markdown-to-vue-loader vue-loader webpack --save-dev

• webpackの設定ファイルに追記

webpack.base.conf.js

module: {
  rules: [
    {
      test: /\.md$/,
      exclude: /(node_modules|bower_components)/,
      use: [
        'vue-loader',
        {
          loader: 'markdown-to-vue-loader',
          options: {
              exportSource: true    // この設定でMarkdownのRawデータを読み込めるようにする
          },
        },
      ],
    },
  ],
}

詳しいことはここを参照 (https://github.com/fengyuanchen/markdown-to-vue-loader

Markdownを解析できるようにする

• npmで marked をインストール

$ npm install marked --save--dev

詳しくはここを参照 (https://github.com/markedjs/marked)

Vue.jsでMarkdownファイルを追加する

• assetsに追加します

Vue.jsでMarkdownを表示してみる

• 適当にvueコンポーネントを追加
• Markdownファイルを読み込んで、 marked 関数でパースして、 v-html で展開します

Markdown.vue

<template>
  <div class="markdown">
    <div v-html="compiledMarkdownText" />
  </div>
</template>

<script>
import marked from 'marked'
import md from '../assets/markdown.md'

export default {
  name: 'Markdown',
  data () {
    return {
      markdownText: md.source    // sourceで Rawデータが取得できます 
    }
  },
  computed: {
    compiledMarkdownText: function () {
      return marked(this.markdownText)    // computedにする必要あるかどうかは知らん
    }
  }
}
</script>

<style scoped>
</style>

結果

ビルドしたらこんな感じで表示されます

あとはCSSを適当にいじって終わり

以上！