@kernelift/markdown 1.1.2 → 1.1.4

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,85 +237,55 @@ 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>
 ```
 
-### 使用简化版组件
-
-```vue
-<script setup lang="ts">
-import { ref } from 'vue';
-import { MdRenderSimple } from '@kernelift/markdown';
-
-const content = ref('# Hello World');
-</script>
-
-<template>
-  <MdRenderSimple v-model="content" />
-</template>
-```
-
 ## 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` |
-
-## 组件对比
-
-| 特性 | MdRender | MdRenderSimple |
-|------|----------|----------------|
-| 完整样式 | ✅ | ❌ |
-| 暗黑模式 | ✅ | ❌ |
-| 表格美化 | ✅ | ✅ |
-| 代码高亮 | ✅ | ✅ |
-| 代码块折叠 | ✅ | ✅ |
-| 代码块复制 | ✅ | ✅ |
-| 行号显示 | ✅ | ✅ |
-| 滚动同步 | ✅ | ✅ |
-| 体积 | 较大 | 较小 |
+| 方法名/属性    | 说明                     | 类型                                                 |
+| -------------- | ------------------------ | ---------------------------------------------------- |
+| renderInstance | MarkdownIt 实例          | `ShallowRef<MarkdownIt \| undefined>`                |
+| execMethods    | 执行 MarkdownIt 实例方法 | `(fn: (renderInstance: MarkdownIt) => void) => void` |
 
 ## 样式说明
 
 ### 内置样式
 
 `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,23 +14,14 @@ declare type __VLS_Props = {
     expandText?: string;
     collapseText?: string;
     codeMaxHeight?: number;
-};
-
-declare type __VLS_Props_2 = {
-    modelValue: string;
-    plugins?: Array<any>;
-    options?: MarkdownItOptions;
-    messager?: any;
+    afterRender?: (md: default_2) => void;
+    themeMode?: 'light' | 'dark';
 };
 
 declare type __VLS_PublicProps = {
     modelValue?: string;
 } & __VLS_Props;
 
-declare type __VLS_PublicProps_2 = {
-    modelValue?: string;
-} & __VLS_Props_2;
-
 export { MarkdownItOptions }
 
 export declare const MdRender: DefineComponent<__VLS_PublicProps, {
@@ -48,21 +38,7 @@ copyText: string;
 expandText: string;
 collapseText: string;
 codeMaxHeight: number;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {
-containerRef: HTMLDivElement;
-}, HTMLElement>;
-
-export declare const MdRenderSimple: DefineComponent<__VLS_PublicProps_2, {
-renderInstance: ShallowRef<default_2 | undefined, default_2 | undefined>;
-execMethods: (fn: (renderInstance: default_2) => void) => void;
-}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-"update:modelValue": (value: string) => any;
-}, string, PublicProps, Readonly<__VLS_PublicProps_2> & Readonly<{
-"onUpdate:modelValue"?: ((value: string) => any) | undefined;
-}>, {
-plugins: Array<any>;
-options: MarkdownItOptions;
-messager: any;
+themeMode: "light" | "dark";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {
 containerRef: HTMLDivElement;
 }, HTMLElement>;