问题标签 [prismjs]

prism-react-renderer在 Gatsby 中使用组件时，我遇到了代码突出显示的问题。我已经按照FormidableLabs/prism-react-renderer中的说明进行了配置。

gatsby build一切都在开发模式下工作，但是当我使用命令构建生产版本时，pre标签没有用棱镜类装饰（class="prism-code language-python"丢失）。我的猜测是生产版本不包含正确的组件或 CSS，但我不知道从哪里开始寻找。

此外，当我在另一个项目中使用相同的代码 7-8 个月时，这个问题也不存在。因此，由于插件/组件更新，这可能是过去几个月引入的问题。

附上两张截图 - 一张带有gatsby develop，另一张带有gatsby build.

我运行的命令来设置和安装先决条件：

示例 GitHub 项目位于subhashb/test-mdx-prism-rendering

我正在使用 Prismic CMS 和 Gatsby（都是最新版本）和官方gatsby-source-prismic插件。

我正在尝试从 Prismic 获取博客文章并将它们显示在我的博客页面上，效果很好。
我唯一挣扎的是 v3-plugin 的 HTML 序列化器。

我使用这个模板https://github.com/LekoArts/gatsby-starter-prismic-i18n作为我的启动器。- 由于这个 git 基于 v2，我不得不重写几乎所有内容以将其调整为 v3。

我的“代码块”切片只输出我预格式化的 HTML（在 Prism 语法高亮之后），这是错误的：
这是我的输出：

我的代码组件：

我的 htmlSerializer：

在 v3 中，当我尝试将序列化程序添加到我的 gatsby-config.js 时出现错误。

我的“版本”至少输出 pre 和 code-tags，但 prism-highlighter 只输出 HTML。RichText.render 方法似乎无法按预期工作，或者我的序列化程序中出现逻辑错误。

我正在尝试使用 Prismjs 实现语法突出显示（标记化）代码块的服务器端渲染（注意：我知道如何通过useEffectand使用客户端渲染来做到这一点refs，并且我使用prism-react-renderer得到了这个工作。我是专门寻找“裸” Prismjs & SSR 的解决方案）。

它在某种程度上确实有效，但我遇到了一个问题：代码块被短暂地重新渲染，可能是因为属性上的前导空格：class

• 第一次渲染：class="language-javascript"
• 第二次渲染：class=" language-javascript

这导致（除了无意义的昂贵重新渲染之外）令人不快的布局偏移，通过向元素添加硬编码font-size像素来临时修复<pre>。

我偶尔会收到一些警告，要么是服务器和客户端道具不匹配（现在无法重现），要么是Extra attributes from the server: class——但仅在运行时next dev，而不是在运行时next build && next start。

在最新版本的 Nextjs 和 Prism 上测试。

我正在使用 PrismJS 来突出显示。

它需要插入 Javascript 和 CSS 文件以突出显示关键字以及关键字列表，它标准化空间，通过插件显示行号 - 这些是额外的功能。

对于单个语言，我们需要选择 Prism-Js 语言，并构建 Script(javascript)。

我正在寻找只有一份 Prism-Script 副本的方法，并在 Wordpress 中的页面编辑期间插入关键字。

所以，那 - 我只插入关键字（通过 React 插件，它将在选择编程语言时插入关键字），并添加JSON内部<script></script>块。

这样做的原因：为多种语言插入和下载 PrismJS 是破坏性的 - 并且难以维护，最好插入 - 关键字JSON，它会突出显示选定的部分。

另一种方法是：为多种语言下载 Prism - 这会使脚本不必要地繁重。

因此，任何人都提到 - 如何插入关键字JSON以与之集成PrismJS- 可能对PrismJS脚本进行更改。

我正在寻找单一修改的 Prism-JS 脚本，它适用于所有人，只需插入JSON关键字（React 管理这个）。

示例：此示例适用于 PHP 关键字：JSFiddle Link

所以，我有一个从集合中获取数据的模板，这个特定的集合包含一些字体的信息，我需要输出一个语法突出显示的代码块，这个代码引用了应该如何添加字体@fontface，例如：

我希望从帖子前端传递字体名称，并将其与每个循环一起输出，但是，因为它在<code>输出我的液体标签时呈现，而不是前端数据。

有没有办法“逃脱”括号？

我正在使用 Prismjs 进行语法高亮显示，我这样做的方式是使用 fetch 方法从 json 文件中获取数据并使用 js 动态呈现 html。问题是 Prismjs 是在本地环境中完成它的工作，而不是在生产中，顺便说一句，我正在使用 Netlify 来托管该站点。我也在使用 Prismjs.highlightall() 方法，但它在托管网站后似乎仍然无法工作。网站链接：css-shorthands
我的 JSON 文件

我有一些页面显示了我网站上的代码，使用 PrismJS 进行正确的突出显示。它适用于 JSON、Flat JSON、HTML、Markdown 和 Scss，但不适用于 Less。我正在使用以下代码来访问所有这些（语言会根据它正在访问的文件的语言而改变），但 Less 仅在黑色背景上显示为白色，而其他代码则显示为突出显示。有没有办法解决这个问题，或者这是我做错了什么？

我将 Prismjs 与 Mdx 一起用于与代码相关的博客。我正在使用它以与其他博客一致的方式显示代码块。

我遇到了一个问题，即渲染的代码块（<pre>元素内部在我的移动布局上太宽了。现在我满足于让东西在水平轴上滚动。我 99% 确定<pre>元素是什么破坏了布局，因为当我从博客文章中评论它们时，布局按预期工作。

具体来说，我正在使用一个名为prism-react-renderer（与 Gatsby 一起）的包，并且我为CodeBlock元素（处理语法突出显示）所拥有的代码或多或少是从文档中逐字逐句的prism-react-renderer，但为了方便起见，将其包含在此处：

这是博客文章模板中使用的组件，用于处理将.mdx文件呈现为 HTML：

我尝试了一些不同的方法：flex 收缩，应用overflow-x: scroll到元素和它overflow-x: auto的<pre>父元素。当我将固定宽度应用于<pre>元素时，overflow-x: scroll我可以获得我想要的行为，但如果可能的话，我不想在此使用固定宽度。.cssI have 看起来像这样，包括一些明显无效的样式：

我将<pre>在检查器中附上元素当前呈现方式的图像：

如果我设置固定宽度（在检查器中），这就是它的外观：

I'm trying to add the Prism library (https://prismjs.com/) to the Svelte 3 app. Once I add the Prism script, store variables stop been updated.

store.js

App.svelte

Please see also Svelte REPL example here: https://svelte.dev/repl/99b7294424a84bcd9e6212cfbd537a77?version=3

Thanks

I have a react & typescript application. It's a blog post and I'm fetching markdown from an API. I'm parsing it using showdown.

The problem is that the syntax highlighting is not working on the fetched code but some of my own code is working fine:

The pre & code elements which I'm rendering have perfect syntax highlighting(I've imported prism.css too). However, the fetched markup is not showing any signs of syntax highlighting. Here's a pic of the elements in the console

As you can see, there is some formatting, for example, the font is changed and so is the color of the text.

Now, here's a pic of some css code:

As you can see, both of them don't have syntax highlighting. However, let me draw your attention to the the pre and code elements:

Ignore the indentation, but the highlighting seems to be working fine.

If you have noticed, there's some commented code above. When I uncomment that, it looks like this:

The background has changed but there's still no syntax highlighting.

Any help is appreciated! Thanks in advance!

PS: I'm open to use other highlighting options, please provide a demo/sample code or give a link to the docs