npm

@bluedocs/markdown-renderer
TypeScript icon, indicating that this package has built-in type declarations

0.1.0 • Public • Published

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>
            );
        };
    },
});

许可证

MIT

Readme

Keywords

Package Sidebar

Install

npm i @bluedocs/markdown-renderer

Weekly Downloads

0

Version

0.1.0

License

MIT

Unpacked Size

30.7 kB

Total Files

25

Last publish

Collaborators

  • fanhaoyuan