问题标签 [prismjs]

我正在尝试使用 PrismJS 将我的 GraphQL/GraphCMS 查询（包含在<code>块中的元素）的输出转换为突出显示的代码块。我遵循本教程以获得我当前的设置，并尝试使用 html 输出而不是降价来做到这一点。

这是我用来完成此操作的代码：

我最近将我的 gatsby 帖子转换为使用gatsby-plugin-mdx，并且在大多数情况下，转换是无缝的，但是对于我的一些帖子，我遇到了一个问题 - 即代码块中的代码正在被解析并且未能建立这些职位。

这发生在一篇文章中，我正在写一篇关于类和功能性反应组件的文章，在我的一个示例中，我故意创建了一些错误的标记来说明一个观点。`gatsby-plugin-mdx` *似乎*正在解析这个然后失败，因为它是错误的......

我怎样才能解决这个问题？有没有办法逃脱这些块或者我需要使用不同的插件？

配置：

带有故意错误的降价（它包含在反引号中，但不确定如何在降价中逃脱它们！）：

我正在尝试使用 Prismjs 显示代码片段以进行语法突出显示。

关于该项目的一些信息：

我正在使用 lit-element，并且我有一个保存为字符串的代码片段，我想在页面上显示一些漂亮的语法突出显示（为此使用 prismjs）。

这是商店中的代码片段（只是一个字符串）：

然后在一个组件内部，我可以将它呈现为一个字符串而不会出现问题，但我似乎无法让语法突出显示工作。

我正在导入样式，并且还在组件顶部导入 prismjs，如下所示 import Prism from 'prismjs'：

为了测试，我以两种不同的方式呈现片段：第一种是保存在商店中，第二种是使用prism.highlight()函数。

这是它们在前端的样子：

这就是我在组件中呈现它们的方式：

this._selectedSnippet.code获取保存在商店中的值。

this._highlightedCode从此 getter中获取值：

在第一个上，我在代码块上看到了正确的片段，但 prism 没有突出显示它。在第二个中，我看到 Prism 添加了突出显示代码所需的类，但随后将其呈现为字符串（使用 prism 添加的新标记）。

关于如何解决这个问题的任何想法？谢谢！

我已经在文件中prism.js全局导入。 代码块语法突出显示在 Home 组件中工作正常，但在使用 路由到另一个页面后，没有效果。main.js
vue-router

在main.js

在我的关于页面组件中......

无法理解这里出了什么问题。有什么方法可以node_modules全局导入 prismjs 文件吗？我认为保留main.js会很好，但它不会在路线之间全局添加......

我正在尝试添加到 prismjs 的标记语言中，以添加新标记，如下所示：

所以这个代码块....

... 将突出显示为 ...

...这是我尝试过的...

我正在尝试使用 Prism.js 在 Gatsby 中格式化代码块，但是我导入的内置 CSS 添加了一个文本阴影，使它看起来很糟糕：

当我在 Chrome DevTools 中关闭文本阴影时，它看起来很棒：

但是，我无法弄清楚如何在代码中执行此操作。

代码块从内置的 prism.css 文件继承 text-shadow CSS，该文件按如下方式导入：

import theme from "prism-react-renderer/themes/vsDark"

当我尝试使用内联样式时，它会被 prism.css 覆盖。如何删除此文本阴影？

我有一个非常简单的 VueJS 应用程序，并且我的一个组件中有一个 TinyMCE 编辑器，它使用 Prism 突出显示代码语法。在 TinyMCE 编辑器中键入时，代码看起来很好，因为在 tinymce 编辑器中编写时通常 prism 会突出显示语法。我保存所有 html 代码并将其呈现在不同的组件上。

Vue 组件渲染代码不正确。

我到处搜索，但没有找到任何合适的东西来纠正这个问题。我将向您展示组件代码。

我正在做的是，我从 api 请求数据并保存到blogs变量中，然后将其作为原始 html 传递到 vue 组件中。

请让我知道，我在这里做错了什么，以便我可以正确解决这个问题。顺便说一句，我正在尝试嵌入 html 编辑器以用于博客目的，它可以突出显示具有许多格式化功能的代码。我的网站可在https://www.springcoders.co.in上找到

我正在使用 Prism Js 突出显示代码，但在某些情况下，Chrome 中的行号没有正确对齐。但是它在 Firefox 中完美运行。这是屏幕截图。

有人可以帮忙吗？

通过执行以下操作，我拥有Prism.js与我的网站一起使用的基本功能：Next.js

一切正常，源代码被正确突出显示 - 当我尝试使用Prism的line-highlight插件时，问题就出现了。

当我将data-line属性添加到 HTML 时，如下所示。

所以，如果我理解正确：这是来自 的错误Next.js，告诉我我的服务器渲染内容和客户端渲染内容不同？

查看错误消息，该插件似乎在内容末尾添加了换行符，但仅在服务器渲染期间，而不是客户端渲染期间。

请注意，其他 Prism 插件似乎也可以工作；我试用了line-numbers插件，并没有导致这个问题。

这是插件的错误Prism.js还是line-highlight我做错了什么？

有什么解决方法可以让它继续运行吗？