pd-markdown 2.1.0 → 2.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +40 -3
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
# pd-markdown
|
|
2
2
|
|
|
3
|
+
[](https://www.npmjs.com/package/pd-markdown)
|
|
4
|
+
[](https://github.com/LaoChen1994/pd-markdown/actions)
|
|
5
|
+
[](https://www.typescriptlang.org/)
|
|
6
|
+
[](https://opensource.org/licenses/MIT)
|
|
7
|
+
|
|
3
8
|
一个现代化的 Markdown 解析和渲染工具库，基于 unified/remark 构建，专为 React 和现代流式 Web 应用设计。
|
|
4
9
|
|
|
5
10
|
## 特性
|
|
@@ -168,12 +173,44 @@ const { source, ast, append, done, reset } = useStreamMarkdown({
|
|
|
168
173
|
|
|
169
174
|
#### 自定义组件覆盖
|
|
170
175
|
|
|
176
|
+
`pd-markdown/web` 导出了所有的默认组件及其对应的 Props 类型（例如 `Heading`, `HeadingProps`, `Code`, `CodeProps` 等）。
|
|
177
|
+
|
|
178
|
+
你可以在自定义渲染器中引入它们，以实现**在默认样式基础上追加自定义功能**（如添加点击复制按钮、锚点链接），或者完全重写某个标签。
|
|
179
|
+
|
|
171
180
|
```tsx
|
|
172
|
-
import {
|
|
181
|
+
import {
|
|
182
|
+
MarkdownRenderer,
|
|
183
|
+
Heading,
|
|
184
|
+
Code,
|
|
185
|
+
type HeadingProps,
|
|
186
|
+
type ComponentMap
|
|
187
|
+
} from 'pd-markdown/web'
|
|
173
188
|
|
|
174
189
|
const customComponents: Partial<ComponentMap> = {
|
|
175
|
-
|
|
176
|
-
|
|
190
|
+
// 1. 包装默认组件 (在已有 Header 旁添加一个可点击的锚点)
|
|
191
|
+
heading: (props: HeadingProps) => {
|
|
192
|
+
return (
|
|
193
|
+
<div className="custom-heading-wrapper group relative">
|
|
194
|
+
<Heading {...props} />
|
|
195
|
+
{props.node.data?.id && (
|
|
196
|
+
<a
|
|
197
|
+
href={\`#\${props.node.data.id}\`}
|
|
198
|
+
className="absolute -left-6 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 text-blue-500"
|
|
199
|
+
>
|
|
200
|
+
#
|
|
201
|
+
</a>
|
|
202
|
+
)}
|
|
203
|
+
</div>
|
|
204
|
+
)
|
|
205
|
+
},
|
|
206
|
+
|
|
207
|
+
// 2. 完全重写组件 (使用你自己的语法高亮库)
|
|
208
|
+
code: ({ node, children }) => (
|
|
209
|
+
<pre className="my-custom-pre bg-gray-900 text-white p-4 rounded">
|
|
210
|
+
<code className={\`language-\${node.lang || 'text'}\`}>
|
|
211
|
+
{node.value}
|
|
212
|
+
</code>
|
|
213
|
+
</pre>
|
|
177
214
|
),
|
|
178
215
|
}
|
|
179
216
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "pd-markdown",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./packages/web/dist/index.cjs",
|
|
6
6
|
"module": "./packages/web/dist/index.mjs",
|
|
@@ -83,8 +83,8 @@
|
|
|
83
83
|
"typescript": "^5.7.3",
|
|
84
84
|
"vitest": "^3.0.7",
|
|
85
85
|
"pd-markdown-parser": "0.1.0",
|
|
86
|
-
"pd-markdown-
|
|
87
|
-
"pd-markdown-
|
|
86
|
+
"pd-markdown-web": "0.1.0",
|
|
87
|
+
"pd-markdown-utils": "0.1.0"
|
|
88
88
|
},
|
|
89
89
|
"keywords": [
|
|
90
90
|
"markdown",
|