🔧frontmatter-markdown-loader & highlight.js

Install

frontmatter-markdown-loader

npm i -D frontmatter-markdown-loader

package.json

"devDependencies": {
  "frontmatter-markdown-loader": "^3.7.0"
}

nuxt.config.js

  build: {
    extend(config, ctx) {
      config.module.rules.push({
        test: /\.md$/,
        loader: "frontmatter-markdown-loader",
      });
    }
  }

pages/*.vue

<template>
  <main>
    <div v-html="md.html" />
  </main>
</template>

<script>
import { defineComponent } from '@nuxtjs/composition-api'

export default defineComponent({
  asyncData({ params }) {
    const md = require(`~/posts/**.md`)
    return { md }
  },
  head() {
    return {
      title: this.md.attributes.title,
    }
  }
})
</script>

with markdown-it & highlight.js

npm i -D markdown-it
npm i -D highlight.js

package.json

"devDependencies": {
  "markdown-it": "^12.3.2"
}

nuxt.config.js

build: {
  extend(config, ctx) {
    config.module.rules.push({
      test: /\.md$/,
      loader: "frontmatter-markdown-loader",
      options: {
        markdownIt: {
          html: true,
          linkify: true,
          breaks: true,
          highlight(str, lang) {
            const hljs = require('highlight.js')
            if (lang && hljs.getLanguage(lang)) {
              try {
                return (
                  '<pre class="hljs p-3"><code>' +
                  hljs.highlight(lang, str, true).value +
                  '</code></pre>'
                )
              } catch (__) { }
            }
            return (
              '<pre class="hljs p-3"><code>' +
              hljs.highlight('plaintext', str, true).value +
              '</code></pre>'
            )
          }
        }
      }
    })
  }
}