44 lines
982 B
Vue
44 lines
982 B
Vue
<script setup lang="ts">
|
|
import md from 'markdown-it'
|
|
import hljs from "highlight.js";
|
|
import 'highlight.js/styles/github-dark-dimmed.min.css';
|
|
|
|
const renderer = md({
|
|
html: true,
|
|
linkify: true,
|
|
typographer: true,
|
|
breaks: true,
|
|
highlight: function (str, lang) {
|
|
if (lang && hljs.getLanguage(lang)) {
|
|
try {
|
|
return (
|
|
`<pre class="hljs" style="overflow-x: auto"><code>${
|
|
hljs.highlight(str, {language: lang, ignoreIllegals: true}).value
|
|
}</code></pre>`
|
|
)
|
|
} catch (_) {
|
|
}
|
|
}
|
|
|
|
return '<pre class="hljs"><code>' + md().utils.escapeHtml(str) + '</code></pre>';
|
|
}
|
|
})
|
|
|
|
const props = defineProps({
|
|
source: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<article
|
|
class="prose dark:prose-invert max-w-none prose-sm prose-neutral"
|
|
v-html="renderer.render(source.replaceAll('\t', ' '))"
|
|
></article>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |