@bluedocs/markdown-renderer
v0.1.0
Published
Vue3 Markdown 渲染器
Downloads
3
Readme
Markdown Renderer
Markdown 文档渲染器
安装
# npm
>$ npm install @bluedocs/markdown-renderer --save
# yarn
>$ yarn add @bluedocs/markdown-renderer
# pnpm
>$ pnpm add @bluedocs/markdown-renderer
使用
基础渲染
import { MarkdownRendererContextProvider, MarkdownRenderer } from '@bluedocs/markdown-renderer';
export default defineComponent({
name: 'App',
setup() {
const md = '## Hello World';
return () => {
return (
<MarkdownRendererContextProvider>
<MarkdownRenderer content={md} />
</MarkdownRendererContextProvider>
);
};
},
});
Token 渲染
import { MarkdownRendererContextProvider, MarkdownTokenRenderer, parse } from '@bluedocs/markdown-renderer';
export default defineComponent({
name: 'App',
setup() {
const md = '## Hello World';
return () => {
return (
<MarkdownRendererContextProvider>
<MarkdownTokenRenderer tokens={parse(md)} />
</MarkdownRendererContextProvider>
);
};
},
});
自定义渲染组件
useMarkdownRendererContext
在自定义组件中,可以使用 useMarkdownRendererContext
来获取渲染器的上下文
import { defineComponent } from ';
import { useMarkdownRendererContext } from '@bluedocs/markdown-renderer';
// Heading.tsx
export const Heading = defineComponent({
name: 'Heading',
setup(props, { slots }) {
const context = useMarkdownRendererContext();
return () => <h1 class={`${context.namespace}-heading`}>{slots.default?.()}</h1>;
},
});
// App.tsx
import { MarkdownRendererContextProvider, MarkdownRenderer } from '@bluedocs/markdown-renderer';
export default defineComponent({
name: 'App',
setup() {
const md = '## Hello World';
return () => {
return (
<MarkdownRendererContextProvider components={{ h1: attrs => <Heading {...attrs} /> }}>
<MarkdownRenderer content={md} />
</MarkdownRendererContextProvider>
);
};
},
});