Zenn
🎨

【Vue.js】TailwindでMarkdown-itを装飾する

2023/05/07に公開
Nuxt
Vue.js
Markdown
Tailwind CSS
tech

タイトルの通り、TailwindでMarkdown-itを装飾します。

インストール

npm install markdown-it @types/markdown-it sass
※TypeScriptを使用しない場合、@types/markdown-itは不要です。
※Nuxt.jsの場合、@nuxtjs/markdownitがありますが、投稿時点でNuxt3に対応していません。

コード

マークダウンの表示

Markdown-itのプラグイン機能を使って装飾するわけではないので、変更はありません。

<template>
  <div class="p-10" v-html="md"></div>
</template>
<script setup lang="ts">
import MarkdownIt from "markdown-it";
const mdit: MarkdownIt = new MarkdownIt({
  html: true,
});
let md = mdit.render(`
# Test
---
## Test2
**強調**
`);
</script>

スタイルの設定

スコープ付きスタイル（scoped）を指定した場合、v-htmlで指定したHTMLはscopedの適用外になるのでディープセレクタ(::v-deep)を使用して解決します。
そしてセレクタ内で@apply ~~~を記述し、tailwindのクラスを設定すれば装飾できます。

<style scoped>
::v-deep(h1) {
  @apply text-3xl text-blue-500;
}
::v-deep(h2) {
  @apply text-2xl text-red-500;
}
::v-deep(strong) {
  @apply text-yellow-500;
}
</style>

参考

Discussion