Created
April 8, 2024 13:46
-
-
Save luminarious/f55b84e8e0bd56ca39b0e4fa0d91c9f3 to your computer and use it in GitHub Desktop.
Rendering Markdown in Nuxt
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment