如何修复三方库bug:marked.js 15.0.6 bug修复经过

marked一个非常流行的markdown格式解析器。

它在npmjs上的周下载量达500万之巨。

 

在其最新的version 15.0.6版本(2025年1月8日使用),有处小bug:当在窄屏显示状态下,如手机端。代码会超出所在div,超出部分内容不可见。

如下图所示:

 

 

虽然是个非正常显示的小bug,但还是要解决它。

修复方法:

针对marked前端的压缩包marked.min.js,在代码中找到class="language-",这是设置语言class的位置。

再给它增加style,设置white-space为break-spaces。即可解决此问题,如下图:

 

修复后超出部分内容会自动换行,不会显示在屏幕之外了:

 

题外话:js代码安全

在上面的bug修复过程中,是从js代码中搜索"language"字符串后进行的功能修改。如果我们不想希望自己发布的代码被它人随意修改,可以将JS代码进行混淆加密。

 

 

 

前面提到的marked.min.js文件代码。用JShaman、JS-Obfuscator、JsJiaMi.online之类的专业工具进行代代码混淆后,如上图所示,不但加密了代码,还隐藏了关键字,就很难被它人非法修改了。

### Marked.js 使用指南 Marked.js 是一个轻量级的 Markdown 解析器和编译器,旨在提供高效的解析性能并支持多种自定义功能[^2]。以下是关于如何安装、配置以及使用 Marked.js 的详细说明。 #### 安装 Marked.js 可以通过 npm 或直接引入 CDN 文件来安装 Marked.js: 通过 npm 安装: ```bash npm install marked ``` 或者可以直接在 HTML 中通过 `<script>` 标签加载: ```html <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> ``` #### 基本用法 一旦成功加载了 Marked.js,可以立即开始将其应用于 Markdown 文本的解析与渲染。以下是一个简单的例子展示如何将 Markdown 转换为 HTML: ```javascript const markdownText = "# Hello, world!\nThis is a **bold** text."; const htmlOutput = marked(markdownText); console.log(htmlOutput); // 输出: "<h1>Hello, world!</h1><p>This is a <strong>bold</strong> text.</p>" ``` #### 配置选项 Marked.js 提供了许多可选参数来自定义其行为。例如,可以调整断行处理方式或启用 GFM(GitHub Flavored Markdown)。下面是一些常用的配置项示例: ```javascript marked.setOptions({ gfm: true, // 启用 GitHub 扩展语法,默认开启 tables: true, // 支持表格,默认开启 breaks: false, // 不自动将换行符转为<br />标签,默认关闭 pedantic: false // 更严格的 CommonMark 兼容模式,默认关闭 }); const customMarkdown = "First line\nSecond line"; const outputWithConfig = marked(customMarkdown); console.log(outputWithConfig); ``` #### 自定义 Renderer 除了基本的功能外,还可以通过扩展 `Renderer` 类实现更复杂的定制化需求。比如修改链接的行为或将某些标记替换为其他形式的内容: ```javascript class CustomRenderer extends marked.Renderer { link(href, title, text) { return `<a href="${href}" target="_blank">${text}</a>`; } } const rendererInstance = new CustomRenderer(); marked.use({renderer: rendererInstance}); const customizedHtml = marked("[Visit Google](https://google.com)"); console.log(customizedHtml); // 输出: '<a href="https://google.com" target="_blank">Visit Google</a>' ``` #### 结合 CSS 显示效果优化 为了使生成的 HTML 页面看起来更加美观整洁,推荐搭配专门设计好的样式表一起使用。例如官方提供的 [github-markdown-css][^4] 可以很好地模拟 GitHub 上阅读体验的感觉。 ```css .markdown-body h1 { color: #007acc; } ``` --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值