问题标签 [react-syntax-highlighter]

我有下面的代码，它可以帮助我显示带有语法突出显示的降价组件。一切正常，除非我输入```总是会发生，因为我从输入字段中获取降价源。

正如我之前所说，每当我输入```或~~~它破坏应用程序之前，我能够使用带有此错误消息的剩余引号关闭它

Reactmarkdown Uncaught TypeError: Cannot read property 'match' of undefined at getNewLines (highlight.js:10)

到目前为止我所尝试的：

我一直在尝试使用 react-syntax-highlighter 在渲染的文本编辑器上在我的网站上生成一段代码。我花了一段时间使用这个插件并喜欢它，但是我遇到了一个我找不到答案的问题。我想更改生成代码的一些颜色，但除了使用他们的默认主题选择之外，找不到任何其他方法来做到这一点。它们允许您将样式应用于背景和代码，但不能将样式应用于保存颜色的跨度，是否有任何简单的方法来创建和应用自定义主题，或者简单地针对特定类并更改它们的颜色？

输出截图

我正在使用react-syntax-highlighter并且遇到了一个问题，我正在尝试在 jsx 中编写一些样式，即paddingLeft: 0. 但问题是 style 里面指定了语法主题，看起来像这样

请注意代码style={docco}，里面的样式我想申请paddingLeft但不太明白怎么做

我创建了以下 React 组件。它实现了 react-syntax-highlighter：

如您所见，我使用lineProps道具通过设置其背景颜色来突出显示特定行。当我使用上述组件时，它会产生如下所示的输出：

在上面突出显示的行中，您可以看到字符串"SUPER_SECRET_TOKEN"。我想知道是否有任何方法可以为该字符串应用不同的背景颜色。是否可以提供开始字符和结束字符来应用特定样式？

我浏览了文档，但没有找到任何可以帮助我突出显示一行中特定字符的内容。我试图编写一个自定义脚本来解析语法高亮组件的 DOM 结构，但结果证明它非常不可靠。

这是我的代码

当我想使用 vscDarkPlus 风格时，我得到这样的图片

为什么 react-syntax-highlighter / dist / esm / styles / prism 中的样式无法按预期工作？

这是我的代码

我想改变线条颜色。

这就是我所做的。

尺寸改变但颜色保持不变。

为什么颜色没有变化？。

我正在使用react-syntax-highlighter@15.4.3语法突出显示。下面是代码：

我希望它能够检测到由 自动提供给它的语言react-markdown，但它没有检测到语言，因此代码没有被美化。

我该怎么做才能开始自行检测语言？

我想输出突出显示的代码，其中突出显示的文本会根据父元素的尺寸自动调整大小。我能想到的有3个解决方案

• 做一些数学运算并计算行号并输出相对于父元素的字体大小。
• 将突出显示的代码输出为 SVG，然后调整 SVG 的大小。
• 有一些 Auto Magic 解决方案来自动调整文本大小。

谁能指出我的任何方向？我现在正在使用 react-syntax-highlighter。

我正在尝试制作一个代码查看器来显示文件中的代码。很像 git hub 中的代码查看器。如何以多行格式获取反应组件文件的内容，并且可以将其输入到 react-syntax-highlighter 中？

嗨，我已经成功地将 react 语法高亮添加到使用 gatsbyjs 和strapi 的项目中，从strapi 内容被格式化为markdown，所以我已经添加react-markdown并react-syntax-hightlight处理我的应用程序中的渲染和语法高亮

这是我迄今为止实施的

文章.js

在这里，我实现了最新的 react markdown 以及如何在上面添加语法高亮。这就是它的样子

从这里我想在显示语法突出显示之前添加一些标题或文件名，例如 App.js。由于这是使用降价，所以我想怎么做才能做到这一点？

这是当前格式化的降价，以显示上面的语法高亮