@kernelift/markdown 1.1.2 → 1.1.3

package/README.md

@@ -101,8 +101,8 @@ const handleCopy = (code: string) => {
 </script>
 
 <template>
-  <MdRender 
-    v-model="content" 
+  <MdRender
+    v-model="content"
     :code-max-height="15"
     copy-text="复制"
     expand-text="查看更多"
@@ -123,19 +123,16 @@ import type { MarkdownItOptions } from '@kernelift/markdown';
 const content = ref('# Hello World');
 
 const options: MarkdownItOptions = {
-  html: false,          // 禁用 HTML 标签
-  linkify: true,        // 自动识别链接
-  breaks: true,         // 启用换行符
-  typographer: true,    // 启用排版优化
-  table: true           // 启用表格
+  html: false, // 禁用 HTML 标签
+  linkify: true, // 自动识别链接
+  breaks: true, // 启用换行符
+  typographer: true, // 启用排版优化
+  table: true // 启用表格
 };
 </script>
 
 <template>
-  <MdRender 
-    v-model="content" 
-    :options="options" 
-  />
+  <MdRender v-model="content" :options="options" />
 </template>
 ```
 
@@ -153,10 +150,41 @@ const plugins = [markdownItEmoji];
 </script>
 
 <template>
-  <MdRender 
-    v-model="content" 
-    :plugins="plugins" 
-  />
+  <MdRender v-model="content" :plugins="plugins" />
+</template>
+```
+
+### Markdown 实例后处理
+
+使用 `afterRender` 回调可以在 MarkdownIt 实例创建后进行额外的配置，例如添加自定义渲染规则。
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { MdRender } from '@kernelift/markdown';
+import type MarkdownIt from 'markdown-it';
+
+const content = ref('Hello World');
+
+const handleAfterRender = (md: MarkdownIt) => {
+  // 添加自定义规则
+  const defaultRender =
+    md.renderer.rules.text ||
+    function (tokens, idx, options, env, self) {
+      return self.renderToken(tokens, idx, options);
+    };
+
+  md.renderer.rules.text = function (tokens, idx, options, env, self) {
+    // 自定义文本渲染逻辑
+    return defaultRender(tokens, idx, options, env, self);
+  };
+
+  console.log('MarkdownIt 实例已配置');
+};
+</script>
+
+<template>
+  <MdRender v-model="content" :after-render="handleAfterRender" />
 </template>
 ```
 
@@ -191,10 +219,7 @@ const parseInline = () => {
       <button @click="getRenderedHtml">获取渲染 HTML</button>
       <button @click="parseInline">解析内联文本</button>
     </div>
-    <MdRender 
-      ref="renderRef"
-      v-model="content" 
-    />
+    <MdRender ref="renderRef" v-model="content" />
   </div>
 </template>
 ```
@@ -212,10 +237,7 @@ const isDark = ref(true);
 
 <template>
   <div :class="{ dark: isDark }">
-    <MdRender 
-      v-model="content" 
-      :class="{ dark: isDark }"
-    />
+    <MdRender v-model="content" :class="{ dark: isDark }" />
   </div>
 </template>
 ```
@@ -237,60 +259,62 @@ const content = ref('# Hello World');
 
 ## Props
 
-| 参数 | 说明 | 类型 | 默认值 |
-|------|------|------|--------|
-| modelValue | Markdown 内容（v-model） | `string` | - |
-| plugins | 自定义插件数组 | `Array<any>` | `[]` |
-| options | MarkdownIt 配置选项 | `MarkdownItOptions` | 见下方默认配置 |
-| onCopy | 复制代码回调 | `(code: string) => void` | - |
-| copyText | 复制按钮文本 | `string` | `'复制代码'` |
-| expandText | 展开按钮文本 | `string` | `'展开'` |
-| collapseText | 收起按钮文本 | `string` | `'收起'` |
-| codeMaxHeight | 代码块最大高度（行数），超过则折叠 | `number` | `20` |
+| 参数          | 说明                                              | 类型                       | 默认值         |
+| ------------- | ------------------------------------------------- | -------------------------- | -------------- |
+| modelValue    | Markdown 内容（v-model）                          | `string`                   | -              |
+| plugins       | 自定义插件数组                                    | `Array<any>`               | `[]`           |
+| options       | MarkdownIt 配置选项                               | `MarkdownItOptions`        | 见下方默认配置 |
+| onCopy        | 复制代码回调                                      | `(code: string) => void`   | -              |
+| copyText      | 复制按钮文本                                      | `string`                   | `'复制代码'`   |
+| expandText    | 展开按钮文本                                      | `string`                   | `'展开'`       |
+| collapseText  | 收起按钮文本                                      | `string`                   | `'收起'`       |
+| codeMaxHeight | 代码块最大高度（行数），超过则折叠                | `number`                   | `20`           |
+| afterRender   | MarkdownIt 实例创建后的回调，可用于添加自定义规则 | `(md: MarkdownIt) => void` | -              |
 
 ### MarkdownItOptions 默认配置
 
-| 参数 | 默认值 | 说明 |
-|------|--------|------|
-| html | `true` | 允许 HTML 标签 |
-| linkify | `true` | 自动识别链接 |
-| breaks | `false` | 启用换行符转换 |
-| typographer | `true` | 启用排版优化 |
-| table | `true` | 启用表格支持 |
-| xhtmlOut | `false` | 关闭 XHTML 严格模式 |
+| 参数        | 默认值  | 说明                |
+| ----------- | ------- | ------------------- |
+| html        | `true`  | 允许 HTML 标签      |
+| linkify     | `true`  | 自动识别链接        |
+| breaks      | `false` | 启用换行符转换      |
+| typographer | `true`  | 启用排版优化        |
+| table       | `true`  | 启用表格支持        |
+| xhtmlOut    | `false` | 关闭 XHTML 严格模式 |
 
 ## Emits
 
-| 事件名 | 说明 | 参数 |
-|--------|------|------|
+| 事件名            | 说明           | 参数              |
+| ----------------- | -------------- | ----------------- |
 | update:modelValue | 内容变化时触发 | `(value: string)` |
 
 ## Expose
 
-| 方法名/属性 | 说明 | 类型 |
-|-------------|------|------|
-| renderInstance | MarkdownIt 实例 | `ShallowRef<MarkdownIt \| undefined>` |
-| execMethods | 执行 MarkdownIt 实例方法 | `(fn: (renderInstance: MarkdownIt) => void) => void` |
+| 方法名/属性    | 说明                     | 类型                                                 |
+| -------------- | ------------------------ | ---------------------------------------------------- |
+| renderInstance | MarkdownIt 实例          | `ShallowRef<MarkdownIt \| undefined>`                |
+| execMethods    | 执行 MarkdownIt 实例方法 | `(fn: (renderInstance: MarkdownIt) => void) => void` |
 
 ## 组件对比
 
-| 特性 | MdRender | MdRenderSimple |
-|------|----------|----------------|
-| 完整样式 | ✅ | ❌ |
-| 暗黑模式 | ✅ | ❌ |
-| 表格美化 | ✅ | ✅ |
-| 代码高亮 | ✅ | ✅ |
-| 代码块折叠 | ✅ | ✅ |
-| 代码块复制 | ✅ | ✅ |
-| 行号显示 | ✅ | ✅ |
-| 滚动同步 | ✅ | ✅ |
-| 体积 | 较大 | 较小 |
+| 特性       | MdRender | MdRenderSimple |
+| ---------- | -------- | -------------- |
+| 完整样式   | ✅       | ❌             |
+| 暗黑模式   | ✅       | ❌             |
+| 表格美化   | ✅       | ✅             |
+| 代码高亮   | ✅       | ✅             |
+| 代码块折叠 | ✅       | ✅             |
+| 代码块复制 | ✅       | ✅             |
+| 行号显示   | ✅       | ✅             |
+| 滚动同步   | ✅       | ✅             |
+| 体积       | 较大     | 较小           |
 
 ## 样式说明
 
 ### 内置样式
 
 `MdRender` 组件内置了完整的 Markdown 渲染样式，包括：
+
 - 标题样式（h1-h6）
 - 段落样式
 - 列表样式

package/dist/index.d.ts

@@ -7,7 +7,6 @@ import { PublicProps } from 'vue';
 import { ShallowRef } from 'vue';
 
 declare type __VLS_Props = {
-    modelValue: string;
     plugins?: Array<any>;
     options?: MarkdownItOptions;
     onCopy?: (code: string) => void;
@@ -15,13 +14,18 @@ declare type __VLS_Props = {
     expandText?: string;
     collapseText?: string;
     codeMaxHeight?: number;
+    afterRender?: (md: default_2) => void;
 };
 
 declare type __VLS_Props_2 = {
     modelValue: string;
     plugins?: Array<any>;
     options?: MarkdownItOptions;
-    messager?: any;
+    onCopy?: (code: string) => void;
+    copyText?: string;
+    expandText?: string;
+    collapseText?: string;
+    codeMaxHeight?: number;
 };
 
 declare type __VLS_PublicProps = {
@@ -62,7 +66,10 @@ execMethods: (fn: (renderInstance: default_2) => void) => void;
 }>, {
 plugins: Array<any>;
 options: MarkdownItOptions;
-messager: any;
+copyText: string;
+expandText: string;
+collapseText: string;
+codeMaxHeight: number;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {
 containerRef: HTMLDivElement;
 }, HTMLElement>;