- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我使用 node.js 从代码生成静态 html 文件,并使用 prismjs 对其进行格式化。在我的应用程序中,我无法访问支持 Javascript 的 HTML 渲染器(我使用的是“htmllite”)。所以我需要能够生成不需要 Javascript 的 HTML。
const Prism = require('prismjs');
const loadLanguages = require('prismjs/components/');
loadLanguages(['csharp']);
const code = '<a bunch of C# code>';
const html = Prism.highlight(code, Prism.languages.csharp, 'csharp');
这很好用。但我想使用 line-numbers
插件,但不知道如何使其工作。我的<pre>
有line-numbers
类,我得到了更大的左边距,但没有行号。
最佳答案
PrismJS大多数插件需要 DOM 才能工作。看了plugins/line-numbers/prism-line-numbers.js#L109里面的代码后,我们可以看到行号只是 span
元素为 class="line-numbers-rows"
它包含一个空的 span
对于每一行。我们可以在没有 DOM 的情况下通过使用与 prism-line-numbers
相同的正则表达式来模拟这种行为。用于获取行号,然后组成一个包含 span.line-numbers-rows
的 html 代码的字符串。并添加一个空字符串 <span></span>
对于每一行。
Prism.highlight
仅运行 2 个钩子(Hook), before-tokenize
和 after-tokenize
。我们将使用 after-tokenize
撰写lineNumbersWrapper
包含 span.line-numbers-rows
的字符串元素和空 span
线条元素:
const Prism = require('prismjs');
const loadLanguages = require('prismjs/components/');
loadLanguages(['csharp']);
const code = `Console.WriteLine();
Console.WriteLine("Demo: Prism line-numbers plugin with nodejs");`;
// https://github.com/PrismJS/prism/blob/master/plugins/line-numbers/prism-line-numbers.js#L109
var NEW_LINE_EXP = /\n(?!$)/g;
var lineNumbersWrapper;
Prism.hooks.add('after-tokenize', function (env) {
var match = env.code.match(NEW_LINE_EXP);
var linesNum = match ? match.length + 1 : 1;
var lines = new Array(linesNum + 1).join('<span></span>');
lineNumbersWrapper = `<span aria-hidden="true" class="line-numbers-rows">${lines}</span>`;
});
const formated = Prism.highlight(code, Prism.languages.csharp, 'csharp');
const html = formated + lineNumbersWrapper;
console.log(html);
这将输出:
Console<span class="token punctuation">.</span><span class="token function">WriteLine</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
Console<span class="token punctuation">.</span><span class="token function">WriteLine</span><span class="token punctuation">(</span><span class="token string">"Demo: Generate invalid numbers"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span>
其中有 span.line-numbers-rows
最后:
<span aria-hidden="true" class="line-numbers-rows">
<span></span>
<span></span>
</span>
现在,如果我们在 pre.language-csharp.line-numbers code.language-csharp
中使用该输出元素,我们将得到正确的行号结果。检查这个Codepen只有 themes/prism.css
和plugins/line-numbers/prism-line-numbers.css
并使用上面输出的代码正确显示行号。
请注意,每一行(第一行除外)都必须是标记,以便代码正确显示,这是因为我们位于 pre.code
内。阻止,但我想你已经知道了。
更新
如果您不依赖 CSS 并且只想在每行之前添加一个行号,那么您可以通过拆分所有行并添加每个 index + 1
来添加一个行号。在开头使用空格填充 padStart
:
const Prism = require('prismjs');
const loadLanguages = require('prismjs/components/');
loadLanguages(['csharp']);
const code = `Console.WriteLine();
Console.WriteLine("Demo: Prism line-numbers plugin with nodejs");`;
const formated = Prism.highlight(code, Prism.languages.csharp, 'csharp');
const html = formated
.split('\n')
.map((line, num) => `${(num + 1).toString().padStart(4, ' ')}. ${line}`)
.join('\n');
console.log(html);
将输出:
1. Console<span class="token punctuation">.</span><span class="token function">WriteLine</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
2. Console<span class="token punctuation">.</span><span class="token function">WriteLine</span><span class="token punctuation">(</span><span class="token string">"Demo: Prism line-numbers plugin with nodejs"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
关于node.js - 使用 prismjs 生成静态 html - 如何启用行号?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59508413/
我最近决定将 PrismJS 与 React 一起使用,为了避免重复导入,我设法使用这个 babel-plugin-prismjs 包来加载插件、语言等。 如插件文档中所示,我在根文件夹中创建了一个
我正在使用 Prismjs 进行语法高亮显示,我这样做的方式是使用 fetch 方法从 json 文件中获取数据,然后使用 js 动态渲染 html。问题是 Prismjs 在本地环境中完成它的工作而
我正在使用 https://prismjs.com突出显示我的代码,它工作得很好。 举个例子 $user->hasOne('App\Phone','user_id','id');
不知道有没有人遇到过这个。我正在使用 PrismJS 语法荧光笔来突出显示代码。应用程序是用 Reactjs 编写的,我想做的是在 WYSIWYG 编辑器中,当用户想要插入代码块时,我用 pre +
我想复制 Ghost 使用 prismjs 设计的精确代码块设计. 这是链接 - https://ghost.org/tutorials/code-snippets-in-ghost/ 最终结果必须类
我正在使用 Docsify 来提供有关我的项目的文档。 对于语法高亮,我想使用prism.js。可悲的是,突出显示部分不起作用。我也尝试了所有提到的建议 here . 在我的 index.html 我
prismjs.com是一种通过突出显示源代码在网站上显示源代码的方法,类似于 monokai 样式... 问题是插件水平显示我的代码。我希望我的代码是结构化的(易于阅读,在多行上)而不是连接在多行上
我正在尝试使用 PrismJS 突出显示一些 javascript 代码,但我输入的文本根本没有改变颜色。我已经尝试将 CDN 用于 prismjs 和 npm,但是当我使用 Prism.highli
我有一个页面布局,其中包含 flex 内容 div 和右侧固定宽度的列。为此,我有以下基本结构: Content here Fixed right column
我正在尝试使用 Napa 构建 SharePoint Online 应用程序以使用语法突出显示。我开始了一个新元素,并将 .js 和 .css 文件包含在 Default.aspx 网页中。当我尝试创
我正在尝试在我的 Angular 应用程序中使用 prismjs 这是我到目前为止得到的 app.directive('nagPrism', [function() { return {
我正在使用 prismjs用于在我的网络应用程序中突出显示代码,但永远不会启用 prismjs 框中用于长代码行的水平滚动条。这是因为我也在使用 twitter bootstrap 3(如果我删除 b
我正在使用 vue-prism-component ( https://www.npmjs.com/package/vue-prism-component ) 显示 Html 语法。现在我想添加一个按
我正在尝试在我的 Aurelia 应用程序(基于 typescript )中添加 PrismJS 作为语法高亮,我已经完成了一半,如下所示 1- 安装 prismjs yarn add prismjs
每当 textarea 字段更改时,我都想突出显示一些 json。 使用 language-json 我没有得到任何漂亮的着色,使用 language-js 我可以。不支持json吗? 最佳答案 您还
我使用 node.js 从代码生成静态 html 文件,并使用 prismjs 对其进行格式化。在我的应用程序中,我无法访问支持 Javascript 的 HTML 渲染器(我使用的是“htmllit
每当 textarea 字段更改时,我都想突出显示一些 json。 使用 language-json 我没有得到任何漂亮的着色,使用 language-js 我可以。不支持json吗? 最佳答案 您还
刚开始使用 Bulma前端框架,一切顺利,直到尝试使用 prismjs并开始与样式发生冲突,因为 prismjs 没有为它们的类名添加前缀。 主要问题在于: .number { ... } 和 .ta
我想添加 PrismJS。 https://prismjs.com/index.html 所以我跑了 yarn add prismjs 然后更新 application.js : import Pri
我正在使用 angular-cli 构建一个小应用程序,我想使用 PrismJS 但我无法让它工作。 基本上,我创建了一个vendor 文件夹,我将我的 Prism 脚本和样式放在其中,并将它们加载到
我是一名优秀的程序员,十分优秀!