问题标签 [prismjs]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
markdown - 在 Next.js 中使用 PrismJS 并在 markdown 中突出显示代码
我想在我的 Next.js 博客中包含 PrismJS 以突出显示 .md 文件中的代码。降价在 /lib/posts.js 中处理，remark并remark-html作为 HTML 传递给react-markdown
contentHtml 在 [id].js 中获取，我使用 ReactMarkdown 来呈现它。这里我在导入 Prism 时使用 CodeBlock 函数来高亮。prism.css我在我的_app.js旁边导入global.css
当我手动输入 URL 并按回车时，它正在工作。如https://nextjs-blog-ivory-nine.vercel.app/posts/first-next-js-blog-devdiary 但是当我从主页导航时 - https://nextjs-blog-ivory-nine。 vercel.app - 第一篇文章，代码不会被高亮显示。
你有什么主意吗？提前致谢！
nuxt.js - 等号在 PrismJS 中始终以白色突出显示
我正在我的 Nuxt 内容项目中设置 Prism 代码块，一切似乎都很顺利，除了我的“=”符号有一个半透明的白色背景，我不知道为什么。我尝试了不同的主题，认为这是我的样式问题，但即使我从回购中复制/粘贴主题（比如这个），我仍然看到同样的事情：
我刚刚从 Prism 的网站下载了默认包，并且只是使用普通主题。
这里可能会发生什么？
javascript - 导航到 Prism.js 中的第二页后未创建工具栏
我正在使用带有 PrismJS 的“工具栏”和“复制到剪贴板”插件来显示代码片段和工具栏按钮以将代码复制到剪贴板，并将我的 Prism js 和 css 文件加载到我的<head>.
如果我直接进入页面（例如：http://localhost:3000/demo/example），PrismJS 会按预期工作。
但是，如果我离开页面并返回到该页面，或者从主页 (http://localhost:3000/) 开始并导航到带有代码片段的页面，则按钮不会显示。
当我检查代码时，我可以看到<div class="toolbar">通常包含“复制”按钮的那个丢失了。
我尝试通过插件加载带有插件的 PrismJS 文件，并将该文件添加到 nuxt.config.js 中，这完全阻止了“复制”按钮的显示。
为什么会发生这种情况？
css - Prism 代码块破坏了响应式设计（使用 flexbox）
我设计了一个响应式的页面布局，可以很好地适应较小的屏幕，但是当我添加一个代码块（并使用 prism.js 对其进行格式化）时，响应性中断了。代码框和文本内容都溢出了设备的宽度，您必须来回滚动。理想情况下，代码块应该有自己的滚动条来查看代码，但内容仍然会适应。我尝试过使用包含内容的 flexbox 的不同属性，但它仍然会破坏布局。
为了缩小范围，我将页面精简为：
page.css 包含：
如果我同时注释掉 .article-container 和 article 页面调整得很好，但如果其中任何一个存在，它就会中断。此外，如果我保留 CSS 原样并注释掉代码块，它是响应式的。
任何关于这些组件如何交互的类型都将不胜感激，谢谢！
编辑：澄清一下，当响应式设计不起作用时，页面宽度不适应屏幕尺寸。请参阅下面的屏幕截图：
没有 CSS的移动设备看起来如何 - 代码框按应有的方式滚动，但页面的其余部分会适应
请注意，2 也是使用 CSS 和没有代码块时网站的外观。所以关于他们互动方式的一些事情正在打破。
markdown - 在代码围栏上的降价中添加类的正确方法是什么
我的用例专门针对PrismJS它需要代码标记中的某些类来实现一些额外的代码突出显示功能，如line-numbers显示行号、match-braces突出显示匹配的大括号等。我正在使用HUGO我的博客，在markdown文件中我可以使用以下语法显示一些突出显示的代码块：
我搜索了很多，但找不到将类添加到代码围栏的正确方法，如上所示，所以我这样做：
这可以解决问题，但是在markdown使用代码围栏时添加类的正确方法是什么？
javascript - 在Vue中获取插槽数据作为变量？
我有一个组件 ( prism-editor)，它只从v-model="code". 这意味着，代码必须通过以下方式发送到组件code：
代码.vue
我想Code从一个插槽命名的父组件绑定它：
页面.vue
在我的Code组件中，我必须找到一种方法来获取插槽数据并将其直接传递code给要发送到v-model='code'. 不幸的是，以下不起作用，因为我不知道如何从父级获取数据slot：
换句话说，我只想获取code标签内发送的所有原始内容：
这可能吗？
prismjs - 如何在 Scully 中突出显示代码块？
我正在用Scully创建一个博客，并寻找一种在那里设置代码高亮的好方法。
例如，这样的代码块（定义语言）：
wordpress - 如何转义棱镜中的尖括号（“<”，“>”）？
在一个块中写我的 WordPress 帖子，包括 dart 代码<pre class="language-dart"><code>，我发现尖括号之间的部分没有显示，我正在使用 prismjs syntaxhighlighter。
现在正在显示<String, dynamic>。但是使用棱镜script标签可以避免这个问题。
但是由于标签，wordpress 代码块阻止了 avada 主题生成器中的代码预览。我在script某处看到 wordpress 不允许script在代码块中添加标签。有解决办法吗？
prismjs - 使行号与换行保持同步
我试图在使用 PrismJS 时包装长行代码，但行号不同步。
我正在使用这种风格包装代码：
HTML 是：
我在https://codepen.io/mpoo/pen/RwayGBy?editors=1100创建了一个完整的 Pen
如您所见，行号与代码行完全不匹配。
是否可以使行号与 Prism 中的行匹配，或者他们根本不支持这一点？