55 lines
1.6 KiB
Vue
55 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { h, resolveComponent } from 'vue';
|
|
|
|
const props = defineProps<{ node: any }>();
|
|
|
|
const render = () => {
|
|
const { node } = props;
|
|
|
|
if (node.type === 'text' || node.type === 'raw') return node.value;
|
|
|
|
if (node.type === 'element') {
|
|
if (node.tagName === 'code') {
|
|
const isBlock = node.position?.start.line !== node.position?.end.line;
|
|
if (isBlock && node.children?.[0]?.type === 'text') {
|
|
return h(resolveComponent('MarkdownShikiHighlight'), {
|
|
code: node.children[0].value,
|
|
lang: node.properties?.className?.[0]?.replace('language-', '') || 'text'
|
|
});
|
|
}
|
|
}
|
|
|
|
if (node.tagName === 'table') {
|
|
return h('div', { class: 'table-wrapper' }, [
|
|
h(
|
|
'table',
|
|
node.properties,
|
|
node.children?.map((child: any, index: number) =>
|
|
h(resolveComponent('MarkdownAstNode'), {
|
|
node: child,
|
|
key: `table-child-${index}`
|
|
})
|
|
)
|
|
)
|
|
]);
|
|
}
|
|
|
|
return h(
|
|
node.tagName,
|
|
node.properties,
|
|
node.children?.map((child: any, index: number) =>
|
|
h(resolveComponent('MarkdownAstNode'), {
|
|
node: child,
|
|
key: `${node.tagName}-${index}`
|
|
})
|
|
)
|
|
);
|
|
}
|
|
|
|
return null;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<component :is="render" />
|
|
</template> |