Halo Vditor Plugin自定义渲染组件

Go to file

zhengyi ef50b6558b 🐛 Fix no parent node for css		2024-02-06 22:20:37 +08:00
assets/imgs	✨ Add gallery providers	2024-01-05 14:25:12 +08:00
demo	✨ Add gallery providers	2024-01-05 14:25:12 +08:00
doc	📝 Update gallery document	2024-01-16 22:41:14 +08:00
src	🐛 Fix no parent node for css	2024-02-06 22:20:37 +08:00
types	✨ Add cdn option in font style	2023-12-27 22:51:02 +08:00
.gitignore	🐛 Fix no parent node for css	2024-02-06 21:39:47 +08:00
.npmrc	🏗️ Copy fonts to dist	2023-12-27 16:39:24 +08:00
README.md	📝 Add document for gallery module	2024-01-01 16:40:17 +08:00
package.json	🐛 Fix no parent node for css	2024-02-06 21:39:47 +08:00
pnpm-lock.yaml	💄 Change ui for tips	2023-12-25 14:49:17 +08:00
tsconfig.json	✨ Add cdn option in font style	2023-12-27 22:51:02 +08:00
webpack.config.js	✨ Add module of drive resources	2023-12-28 11:13:30 +08:00
webpack.dev.js	✨ Add gallery providers	2024-01-05 14:25:12 +08:00

vditor-halo-render

vditor halo render是一款用于halo-plugin-vditor的自定义解析器，可以解析自定义的语法来输出HTML结构。可以应用于文章的编写。本解析器主要用于markdown编辑器。

例如:

>>INPUT

tips:info
This is a info tips

<<OUTPUT

<div class="halo-render halo-render-wrapper tips tips-info">
    <div>This is a info tips</div>
</div>

如何使用

您可以直接引用releases包下的index.js和index.css，并将fonts和icons目录拷贝到可访问的路径。解析器导出了一个HaloJs对象可供使用。

要进行解析处理您仅需要使用下面的方法即可进行处理。

HaloJs.renderHalo("tips:info\nThis is a info tips", "/")

renderHalo方法会返回解析后的html结构。renderHalo的参数与返回值如下：

/**
 * 解析自定义渲染
 * @param content 待渲染的文本
 * @param cdn 资源链接前缀
 * @return 资源渲染结果
 */
function renderHalo(content: string, cdn: string): string;