react-diff-viewer 如何实现语法高亮

前言

react-diff-viewer 是一个很好的 diff 展示库,但是也有一些坑点和不完善的地方,本文旨在描述如何在这个库中实现自定义语法高亮。

Syntax highlighting is a bit tricky when combined with diff. Here, React Diff Viewer provides a simple render prop API to handle syntax highlighting. Use renderContent(content: string) => JSX.Element and your favorite syntax highlighting library to achieve this.
仓库地址:https://github.com/praneshr/react-diff-viewer

问题

issue 地址:https://github.com/praneshr/react-diff-viewer/issues/182

如果只是直接引入这个库,你会发现没有代码的语法高亮,看起来会十分难受

于是乎,你按照文档引入了,发现样式会被覆盖掉,两种样式共存会很难看,如下:

解决方案

这个问题发生的原因是因为你自定义的渲染器覆盖了原有样式,只需要把你自定义的渲染属性移除就行,比如 customStyle={{ display: 'inline', padding: 0, background: 'none' }}

完美高效解决问题!

相关推荐
小毛驴85025 分钟前
Vue 传统全局引入方式,ES 模块化方式引入 对比
前端·javascript·vue.js
轻语呢喃40 分钟前
JavaScript数据检索:从顺序到哈希的效率跃迁
javascript·后端
萱萱的七彩鱼41 分钟前
css3之三维变换详说
前端·javascript·css3
liweisum1 小时前
AI驱动 WEB UI自动化---前端技术分享
前端·javascript·typescript
前端拿破轮1 小时前
腾讯面试官:手写一个节流防抖看看
前端·javascript·面试
狗头大军之江苏分军1 小时前
存钱 vs 投资 vs 提升自己:哪个才是打工人的“出路
前端·javascript·后端
天天向上10242 小时前
vue让elementUI和elementPlus标签内属性支持rem单位
javascript·vue.js·elementui
小宁爱Python2 小时前
Vue入门:vue项目的创建和基本概念
前端·javascript·vue.js
徐知行3 小时前
前后端对时最佳实现
javascript
ZzMemory3 小时前
少写重复代码的精髓:JS方法借用
前端·javascript·面试