👭

【Nuxt】.mdファイルを読み込んでレンダリングするコンポーネントを作る

2022/12/17に公開

Nuxt

概要

要件

ページのデザインや構成はコーディングするが、中身のコンテンツは切り出されたhoge.mdを読み込んでいい感じにレンダリングしたい。
→ 指定したpathのマークダウンをいい感じにレンダリングしてくれるコンポーネントを作りたい。

使用した技術

nuxt2
marked-js
tailwind

経緯

エンジニアと非エンジニアが混在するコミュニティで、頻繁に更新を行う必要のあるwebページを運営しなければならない。というのが今回の背景です。

コンテンツの作成や精査自体は非エンジニアができても、それを反映するのにはエンジニアを待つ必要があります。更には、連絡コストやテキストファイルをHTMLに書き直す作業などを鑑みると、非エンジニアメンバーの作成物をそのまま掲載できたら作業の効率化をかなり図れるというわけです。

実装

nuxtで外部markdownを読み出すコンポーネントの実装

ここでやること

nuxtでアプリを作る
markdownをテキストとして読み出す
読み出したテキストをmarkedでパースする
markdown用のCSSを当てる

nuxtでアプリを作る

とりあえずcreate-nuxt-appで。オプションはいい感じにしてください。

$ npx create-nuxt-app md-nuxtjs

今回は、marked-jsとtailwind.cssを使うので、そちらもインストール。npmだと下の通り

$ npm install marked
$ npm install -D tailwindcss postcss@latest autoprefixer@latest @nuxt/postcss8
$ npx tailwindcss init

tailwindの導入は

を参照してください。
今回は、コンポーネントに切り出した感を出すために、layoutにいい感じのおしゃれヘッダーとサイドバーを用意しました。（ダサい)

markdownをテキストとして読み出す

コンポーネントにパスを渡して@/markdowns/hoge.mdをテキストとして読み出す処理を用意します。
読み込みはnodeのreqiureにパスを渡すことで実装しました。

export default {
  props: {"filepath":String},
  setup(props){
    const mdText = require("@/markdowns/"+props.filepath);
  }
 };

読み出したテキストをmarkedでパースする

こちらには、marked-jsのmarked関数を利用しました。requireしてきたテキストを渡すだけなので簡単ですね。公式サイトによると、いくつかオプションをつけれるみたい。
https://marked.js.org/using_advanced

こちらを実装して、いい感じにmarkdownをhtmlにしたものを表示するコンポーネントは次のとおりです。

MarkDown.vue

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

<script lang="ts">
import {marked} from 'marked';

export default {
  props: {"filepath":String},
  setup(props){
    console.log(props.filepath)
    const mdText = require("@/markdowns/"+props.filepath);
    const text = marked(mdText.default);
    return {
        text
    }
  }
};
</script>

markdown用のCSSを当てる

最後に、markdwon用のCSSを当てれば完成です。htmlをmarkdownっぽくするcssですが、

上記ブログにリンクがまとまってましたので、参考にさせていただきました。

assets/main.css

@tailwind base;
@tailwind utilities;

.markdown ol {
  @apply list-decimal pl-10;
}
.markdown ul {
  @apply list-disc pl-10;
}
.markdown h4 {
  @apply text-lg border-b border-black my-5;
}
.markdown h3 {
  @apply text-xl pt-3;
}
.markdown h2 {
  @apply border-sky-500 border-l-4 text-3xl;
}
.markdown ul {
  @apply list-disc pl-10;
}

など...

まとめ

今回の実装は次のリポジトリにまとまっています。

次のステップとして、googleドライブにアップしたmarkdownをいい感じにgithubにコミットするGASを用意したいです。これで完全に内容の作成とwebの更新を切り分けられる...