44 lines
969 B
Vue
44 lines
969 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>
|