50 lines
1.0 KiB
Vue
50 lines
1.0 KiB
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 {
|
|
/* ignore */
|
|
}
|
|
}
|
|
|
|
return (
|
|
'<pre class="hljs"><code>' + md().utils.escapeHtml(str) + '</code></pre>'
|
|
)
|
|
},
|
|
})
|
|
|
|
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>
|
|
think {
|
|
@apply block my-4 p-3 bg-blue-500/5 border-l-4 border-primary/30 rounded italic text-xs;
|
|
}
|
|
</style>
|