Rendering Markdown in Nuxt

Markdown.vue

<script>
import MarkdownIt from 'markdown-it'
import mdAttrs from 'markdown-it-attrs'
import mdDecorate from 'markdown-it-decorate'
import mdTaskLists from 'markdown-it-task-lists'
import mdExpandTabs from 'markdown-it-expand-tabs'
import mdAbbr from 'markdown-it-abbr'
import mdSup from 'markdown-it-sup'
import mdSub from 'markdown-it-sub'
import mdMark from 'markdown-it-mark'
import mdMultiTable from 'markdown-it-multimd-table'
import mdFootnote from 'markdown-it-footnote'

//import mermaid from 'mermaid'

export default {
	props: {
		tag: { type: String, default: 'article' },
		value: { type: String, required: true },
	},
	setup(props) {
		const md = new MarkdownIt({
			html: true,
			breaks: true,
			linkify: true,
			typography: true,
			highlight(str, lang) {
				if (lang === 'diagram') {
					return `<pre class="diagram">${b64ToUtf8(str)}</pre>`
				} else if (['mermaid', 'plantuml'].includes(lang)) {
					return `<pre class="codeblock-${lang}"><code>${str}</code></pre>`
				} else {
					return `<pre class="line-numbers"><code class="language-${lang}">${str}</code></pre>`
				}
			}
		})

		md.use(mdAttrs, { allowedAttributes: ['id', 'class', 'style'] })
		md.use(mdDecorate)
		md.use(mdTaskLists, { label: false, labelAfter: false })
		md.use(mdExpandTabs)
		md.use(mdAbbr)
		md.use(mdSup)
		md.use(mdSub)
		md.use(mdMultiTable, { multiline: true, rowspan: true, headerless: true })
		md.use(mdMark)
		md.use(mdFootnote)
		//md.use(mdImsize)

		md.use((md) => {
			md.core.ruler.push('custom_block_transform', (state) => {
				for (let i = 0; i < state.tokens.length; i++) {
					const token = state.tokens[i]

					// Check for inline tokens with the custom pattern
					if (token.type === 'inline') {
						const match = token.content.match(/^::\s*([\w-]+)\s*(?:\{\s*([^}]+)\s*\})?\s*(.*?)\s*::$/s)

						if (match) {
							const [, name, attrs, content] = match

							// Replace paragraph_open token
							const openParagraphToken = state.tokens[i - 1]
							openParagraphToken.type = 'html_block'
							openParagraphToken.tag = 'name'
							openParagraphToken.content = `<${name} ${attrs || ''}>${content}</${name}>`
							openParagraphToken.nesting = 0

							state.tokens.splice(i, 2) // Remove inline token and paragraph_close token
							i-- // Adjust the index after modifying the tokens
						}
					}
				}
			})
		})

		const html = md.render(props.value)
		return() => h({
			template: `<${props.tag} > ${ html }</${ props.tag }> `,
		})
	}
}
</script>