Hiroto's diary

プログラミングとか色々

Vue.jsでMarkdownファイルを読み込んでHTMLにして表示する

JavaScript Vue.js Nuxt.js

Vue.jsやNuxt.jsで何かしらのサイトを作ってる時にわざわざHTMLを書くほどでもないようなページを作る際、Markdownで内容を書いてHTMLに変換すると便利。というちょっとしたメモ。

タイトルではVue.jsと書いていますがNuxt.jsでも使えます。

webpackの準備

.mdファイルの読み込みにはraw-loaderを使うのでインストール。

また、MarkdownのパースとHTMLへの変換でmarkedを使うので、これもインストール。 パースと変換さえ出来ればmarkedである必要はありませんが、今回はmarkedを使います。

yarn add -D raw-loader marked

github.com

github.com

次にwebpackの設定。

.mdファイルでraw-loaderを使うように設定。

webpack.config.js

// webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.md$/,
        loader: 'raw-loader',
        exclude: /(node_modules)/,
      },
    ],
  },
};

Nuxt.jsを使っている場合はnuxt.config.jsのbuild.extend内で設定。

nuxt.config.js

// nuxt.config.js

module.exports = {
  build: {
    extend (config, { isDev, isClient }) {
      config.module.rules.push({
        test: /\.md$/,
        loader: 'raw-loader',
        exclude: /(node_modules)/,
      });
    },
  },
};

ComponentでMarkdownを読み込み、HTMLに変換

Webpackの設定を行ったので、importでMarkdownファイルの内容を読み出せます。

templateでは変換したHTMLをそのまま表示するので、v-htmlディレクティブを使って表示します。(二重括弧やv-textディレクティブではテキストとして表示される。)

<template>
  <div v-html="markedContent">
  </div>
</template>

<script>
  import marked from 'marked';
  import markDownSource from '~/path/to/mark-down-file.md';

  export default {
    computed: {
      source () {
        return markDownSource;
      },
      markedContent () {
        return marked(this.source);
      },
    },
  };
</script>

.babelrc はJSON5で書ける

JavaScript

公式のドキュメントにも書いてあるし割と一般的な事だと思ってたけど、知らない人ばっかだったので布教がてら。

そもそもJSON5とは

JSON5とは

  • コメントが書けない
  • Stringでシングルクォートが使えない
  • Arrayでケツカンマが書けない

などの、JSONの難点を解消したフォーマット。

公式サイトの例のように、JavaScriptと同じような感じでJSONを書けます。

json5.org

.babelrcはJSON5で書ける

あまり知られていませんが、.babelrcはJSONではなくJSON5として解釈されます。 この事はドキュメントにしれっと書かれています。

Any file that isn't a .js file will be parsed as JSON5 and should contain an object matching the options format that Babel accepts.

https://babeljs.io/docs/en/config-files#json5

普通のJSONで.babelrcを書いた例。

ごく一般的な.babelrcです。

{
    "presets": [
        "@babel/preset-env"
    ],
    "compact": false
}

上記の.babelrcをJSON5で使える書式で書いた例。

よりJavaScriptに近い書式で書けます。

{
    // コメント
    presets: [
        '@babel/preset-env',
    ],
    compact: false,
}

普通のJSONに準じた書き方をして、コメントだけ書くとかも可能。

{
    // コメント
    "presets": [
        "@babel/preset-env"
    ],
    "compact": false
}

JSON5で書くとシンタックスハイライトが厳しい

.babelrcの書式はJSONだと思っている人が多いからなのか、JSONで解釈するエディターが殆どです。

PhpStormでの例。

JSON5ではなく、JSONとして解釈されている為エラーが出ます。

f:id:Hiroto-K:20190209220012p:plain

VSCodeでの例。

VSCodeにはJSON with Commentsというモードがありコメントだけはエラーが出ませんが、他のJSON5特有の書き方は普通にエラーになります。

f:id:Hiroto-K:20190209220017p:plain

JSON5で書けるけど、書こうとするとエラーに見舞われる点だけが厳しいです。

エディターが標準でJSON5に対応してくれればJSON5で書く.babelrcも増えるだろうし、エディターはJSON5に対応してください…(他力本願)

© 2015 hiroxto