見出し画像

Vue.js + marked.js + highlight.jsでMarkdownをレンダリング

TAAT

Vue.jsで作ったサイトで記事をMarkdownで管理し、それをレンダリングして表示できないかと思って調べていたところ、marked.js, highlight.jsを使った方法があったので簡単に紹介する。

marked.js

marked.jsはMarkdownのテキストをHTMLに変換してくれるライブラリ。

npm install marked

npmでインストールできたら、インポートしてMarkdownテキストをmarked()に渡せば簡単にHTMLに変換してくれる。

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

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

export default defineComponent({
    setup() {
        const markdown = marked('# タイトル\\n\\n' +
            '## サブタイトル\\n\\n' +
            '本文\\n\\n' +
            '- リストアイテム\\n\\n' +
            '- リストアイテム')

        return {
            markdown
        }
    },
})
</script>
<h1>タイトル</h1>

<h2>サブタイトル</h2>

<p>本文</p>

<ul>
    <li>リストアイテム</li>
    <li>リストアイテム</li>
</ul>

highlight.js

highlight.jsはシンタックスハイライトをしてくれるライブラリで、marked.jsと組み合わせるとコードブロックのシンタックスハイライトができる。

npm install highlight.js

npmでインストールしたら、インポートしてmarked.setOptions()でhighlightオプションにhighlight.jsの処理を設定すればよい。
※オプションの詳細仕様はこちらを参照

<script lang="ts">
import marked from 'marked'
import hljs from 'highlightjs'

export default defineComponent({
    setup() {
        const markdown = marked('```js\\n' +
            'const a = 123\\n' + 
            '```')
            
        marked.setOptions({
            langPrefix: '',
            highlight: function(code, lang) {
                return hljs.highlightAuto(code, [lang]).value
            }
        });

        return {
            markdown
        }
    },
})
</script>

なお、ハイライトで使うスタイルシートはこちらで好きなスタイルを探して適用することができる。

<style src='highlightjs/styles/dracula.css'></style>

補足

Markdownのレンダリングはmarked.js以外にもmarkdown-itというライブラリがあるが、本記事の執筆時点でまだNuxt3をサポートしていなかったため採用しなかった。なお、markdown-itでも同様にhighlight.jsと連携してシンタックスハイライトできる。


この記事が気に入ったらサポートをしてみませんか？