问题标签 [prismjs]

使用 Prismjs 在设计系统中显示代码片段。

我想将 html 代码示例分离到一个独立文件中并将其导入我的组件中。

代码示例组件：

CodeSampleContainer.jsx

我要导出的 HTML：

htmlSnippet.jsx

我有一个带有弹性内容 div 和右侧固定宽度列的页面布局。为此，我有以下基本结构：

和CSS：

我希望auto内容填满总空间减去固定的列宽。确实会发生这种情况，除非 div 的内容（作为 prism 标签）溢出该宽度。它没有在 PrismJs div 上生成水平滚动条，而是简单地溢出内容 div 并将列向右推。

关于如何使滚动条出现在 div 上而不是推动列的任何想法？

请注意，如果我为内容宽度设置了一个固定值，它会按预期工作。

这是一个例子：

这是一个可以玩的小提琴：https ://jsfiddle.net/4crm25pq/1/

我正在将 ghost 作为博客软件运行，并且我有一篇博客文章，其中包含我希望突出显示语法的降价代码片段。

我已按照说明包含必要的页眉和页脚标签以及我试图突出显示的语言的特定标签，但仍然没有进行语法突出显示。

这是我试图让语法高亮工作的页面的链接：

https://screaming-cactus.com/learning-to-love-result/

有什么想法吗？

我安装@types/prismjs但我在node_modules/@types/prismjs/index.d.ts(316,10): error TS2304: Cannot find name 'Required'.

角

配置文件

我试图复制代码但不起作用。我正在使用 prism.js，但是当我使用 ngAfterViewChecked 时，副本不再起作用。

当我添加我的组件时：

副本不再起作用。请问有什么解决办法吗？

我正在创建一个 web 应用程序，我可以在其中展示文档。在我的文档中，我经常有一些代码片段，所以我使用 prism ( https://prismjs.com/ ) 来格式化我在管理页面上的文本字段中输入的文本。

问题是，每当我在文本字段中输入代码时，它都会在第一行产生空格，如下所示：

我的代码看起来像这样：

模板：

每当更改 textarea 字段时，我都想突出显示一些 json。

使用language-json我没有得到任何漂亮的颜色，使用language-js我做。不支持json吗？

我正在使用 vue-prism-component ( https://www.npmjs.com/package/vue-prism-component ) 显示 Html 语法。现在我想添加一个应该复制代码的按钮。到目前为止，我在其中找到了一个库 vue-clipboard2 ( https://www.npmjs.com/package/vue-clipboard2 )，他们正在从输入标签中获取文本。单击按钮，我将如何选择 vue-prism-component 生成的 Html 的语法。

我使用react-markdown库并prismjs在我的项目中突出显示代码。但是在我改变路线后突出显示并不总是有效。

例如，

• 我有markdown代码TestPage，浏览器中的url路径是localhost:3000/test。

• 如果我启动项目，默认的渲染页面是localhost:3000，当我跳转到路由localhost:3000/test时，markdown语法有效，但代码高亮无效。呈现的 html 代码如下所示：

• 如果我用 url 刷新页面localhost:3000/test，则突出显示有效。呈现的 html 代码如下所示：

• 但是，如果我路由到其他页面并返回到testpage，则代码突出显示将不再起作用。

为什么会这样？我想知道我的代码逻辑有什么问题。

下面的代码是我如何使用react-markdown：

代码块：

附言

• 我使用react-router-dom，Switch在 App/index.js 中有一个

问题 Desp：如何在 react 项目中使用 prismjs 突出显示自定义语法？

我按照指南newlang创建了一个扩展语法文件（我们称之为）。

而且我知道在 prismjs 中有三种方法可以突出显示代码：

• highlightElement()
• highlightAll()
• highlight()

首先，我尝试在我的应用程序中要求我的自定义语法文件。

import 'utils/highlight/prism-newlang';

然后，在我的高亮组件中，

• 方法 1: highlightElement(): ❌<strong>无法突出显示我的代码

• 方法 2: highlightAll(): ❌<strong>无法突出显示我的代码
• 方法 3: highlight(): ✅<strong>可以让我的代码突出显示

我想知道方法1和2的问题是什么。（会是自定义语法文件的加载顺序问题吗？）