Marked.js 配置项详解及开发建议

### 🌟 `marked.setOptions` 配置项介绍 `marked.js` 是一个流行的 Markdown 解析器和编译器，`marked.setOptions` 方法允许你自定义 Markdown 解析和渲染的行为。以下是一些常用的配置项及其含义： #### 1. `baseUrl` - **类型**：`string` - **含义**：设置所有相对链接的基础 URL。例如，当 Markdown 中有相对链接时，会基于这个 `baseUrl` 来构建完整的链接。 - **示例代码**： ```javascript marked.setOptions({ baseUrl: 'https://example.com/' }); ``` #### 2. `breaks` - **类型**：`boolean` - **含义**：如果设置为 `true`，则将单个换行符视为 HTML 中的 `<br>` 标签。默认值为 `false`。 - **示例代码**： ```javascript marked.setOptions({ breaks: true }); ``` #### 3. `gfm` - **类型**：`boolean` - **含义**：启用 GitHub Flavored Markdown（GFM）。GFM 是 GitHub 扩展的 Markdown 语法，包括表格、任务列表等。默认值为 `true`。 - **示例代码**： ```javascript marked.setOptions({ gfm: true }); ``` #### 4. `headerIds` - **类型**：`boolean` - **含义**：如果设置为 `true`，则为每个元素自动生成唯一的 `id` 属性。默认值为 `true`。 - **示例代码**： ```javascript marked.setOptions({ headerIds: false }); ``` #### 5. `headerPrefix` - **类型**：`string` - **含义**：为自动生成的 `id` 添加前缀。 - **示例代码**： ```javascript marked.setOptions({ headerPrefix: 'section-' }); ``` #### 6. `highlight` - **类型**：`function(code, lang, callback)` - **含义**：用于代码高亮的函数。你可以传入一个自定义的高亮函数，该函数接收代码、语言和回调函数作为参数。 - **示例代码**： ```javascript const hljs = require('highlight.js'); marked.setOptions({ highlight: function(code, lang) { if (lang && hljs.getLanguage(lang)) { return hljs.highlight(code, { language: lang }).value; } return code; } }); ``` #### 7. `langPrefix` - **类型**：`string` - **含义**：为代码块的类名添加前缀。默认值为 `'language-'`。 - **示例代码**： ```javascript marked.setOptions({ langPrefix: 'code-' }); ``` #### 8. `mangle` - **类型**：`boolean` - **含义**：如果设置为 `true`，则对电子邮件地址进行混淆处理，以防止垃圾邮件机器人抓取。默认值为 `true`。 - **示例代码**： ```javascript marked.setOptions({ mangle: false }); ``` #### 9. `pedantic` - **类型**：`boolean` - **含义**：如果设置为 `true`，则尽可能遵循原始的 Markdown 规范。默认值为 `false`。 - **示例代码**： ```javascript marked.setOptions({ pedantic: true }); ``` #### 10. `sanitize` - **类型**：`boolean` - **含义**：如果设置为 `true`，则对输出的 HTML 进行清理，移除所有危险的 HTML 标签和属性。默认值为 `false`。需要注意的是，这个选项已被弃用，建议使用 `sanitizer` 函数代替。 - **示例代码**： ```javascript marked.setOptions({ sanitize: false }); ``` #### 11. `sanitizer` - **类型**：`function(html)` - **含义**：自定义的 HTML 清理函数，用于清理输出的 HTML 内容。 - **示例代码**： ```javascript const DOMPurify = require('dompurify'); marked.setOptions({ sanitizer: function(html) { return DOMPurify.sanitize(html); } }); ``` #### 12. `silent` - **类型**：`boolean` - **含义**：如果设置为 `true`，则在解析过程中遇到错误时不会抛出异常，而是将错误信息包含在输出结果中。默认值为 `false`。 - **示例代码**： ```javascript marked.setOptions({ silent: true }); ``` #### 13. `smartLists` - **类型**：`boolean` - **含义**：如果设置为 `true`，则智能地处理列表。默认值为 `false`。 - **示例代码**： ```javascript marked.setOptions({ smartLists: true }); ``` #### 14. `smartypants` - **类型**：`boolean` - **含义**：如果设置为 `true`，则将 ASCII 标点符号转换为“智能”的 Unicode 标点符号。默认值为 `false`。 - **示例代码**： ```javascript marked.setOptions({ smartypants: true }); ``` #### 15. `xhtml` - **类型**：`boolean` - **含义**：如果设置为 `true`，则生成 XHTML 兼容的标签。默认值为 `false`。 - **示例代码**： ```javascript marked.setOptions({ xhtml: true }); ``` ### 💡 开发建议 - **安全性**：使用 `sanitizer` 函数对输出的 HTML 进行清理，防止 XSS 攻击。 - **性能优化**：如果需要处理大量的 Markdown 内容，可以考虑缓存解析结果，避免重复解析。 - **代码高亮**：使用成熟的代码高亮库（如 `highlight.js`）来实现代码高亮，提高代码的可读性。 ######[AI写代码神器 | 1426点数解答 | 2026-02-14 11:17:13]