Skip to content

Commit 586fbb0

Browse files
author
liwenjun-dev
committed
docs: add markdown renderer migration guide for v4 to v5
Adds documentation for migrating custom markdown renderer overrides from v4 to v5. The window..markdown option is deprecated in v5, so this guide provides alternative approaches using: 1. marked extensions (recommended) 2. Docsify plugins with custom renderers Closes #2680
1 parent f3ab502 commit 586fbb0

1 file changed

Lines changed: 101 additions & 0 deletions

File tree

docs/v5-upgrade.md

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,107 @@ View [Theme Classes](themes.md?id=classes) for more details.
117117
- **Themes**: v5 uses a core theme (with optional add-ons available)
118118
- **Plugin Names**: `zoom-image``zoom`
119119

120+
## Migrating Custom Markdown Renderer Overrides
121+
122+
If you were customizing the Markdown renderer in v4 using the `window.$docsify.markdown` configuration option, you'll need to update your approach for v5.
123+
124+
### v4 Approach (Deprecated)
125+
126+
In v4, you could customize the marked renderer like this:
127+
128+
```javascript
129+
window.$docsify = {
130+
markdown: function (marked, renderer) {
131+
marked.setOptions({
132+
smartypants: true,
133+
renderer: Object.assign(renderer, {
134+
paragraph(text) {
135+
// Custom paragraph rendering
136+
return marked.Renderer.prototype.paragraph.apply(null, [text]);
137+
},
138+
text(text) {
139+
// Custom text rendering
140+
return marked.Renderer.prototype.text.apply(null, [text]);
141+
},
142+
}),
143+
});
144+
return marked;
145+
},
146+
};
147+
```
148+
149+
### v5 Approach
150+
151+
In v5, Docsify uses **marked v13+**, which has a different architecture. The `window.$docsify.markdown` option is no longer supported. Instead, use one of these approaches:
152+
153+
#### Option 1: Using marked Extensions (Recommended)
154+
155+
Load your marked extension before Docsify and register it in the configuration:
156+
157+
```html
158+
<!-- Load your marked extension -->
159+
<script src="https://cdn.jsdelivr.net/npm/marked-footnote@1.2.0/dist/index.umd.min.js"></script>
160+
161+
<script>
162+
window.$docsify = {
163+
marked: {
164+
extensions: [markedFootnote()], // Register the extension
165+
},
166+
};
167+
</script>
168+
```
169+
170+
#### Option 2: Using a Docsify Plugin
171+
172+
Create a plugin that customizes the renderer after Docsify initializes:
173+
174+
```javascript
175+
window.$docsify = {
176+
// ... your other config
177+
};
178+
179+
// Add a custom plugin
180+
window.$docsify.plugins = [
181+
function (hook, vm) {
182+
hook.doneEach(function () {
183+
// Access the marked instance
184+
const marked = vm.config.marked;
185+
if (marked) {
186+
const { Renderer } = marked;
187+
188+
// Create a custom renderer
189+
const renderer = new Renderer();
190+
const originalParagraph = renderer.paragraph.bind(renderer);
191+
const originalText = renderer.text.bind(renderer);
192+
193+
// Override methods
194+
renderer.paragraph = function (text) {
195+
// Apply your custom transformations here
196+
return originalParagraph(text);
197+
};
198+
199+
renderer.text = function (text) {
200+
// Apply your custom transformations here
201+
return originalText(text);
202+
};
203+
204+
// Update marked options
205+
marked.setOptions({ renderer });
206+
}
207+
});
208+
},
209+
];
210+
```
211+
212+
#### Key Changes
213+
214+
- ✅ Docsify v5 uses **marked v13+** with a hooks-based architecture
215+
- ✅ The `window.$docsify.markdown` config option is **deprecated**
216+
- ✅ Use `window.$docsify.marked` for passing marked options and extensions
217+
- ✅ Custom renderers should use the **extensions system** or a **Docsify plugin**
218+
219+
For more details on marked extensions, see the [marked documentation](https://marked.js.org/using_advanced#extensions).
220+
120221
## Additional Notes
121222

122223
- Your configuration in `window.$docsify` stays the same

0 commit comments

Comments
 (0)