使用 Prism JS 没有显示标记

日期：2023-10-07 02:05

我正在尝试使用 PrismJS 为我的 blogspot 博客进行语法突出显示。在使用语法荧光笔遇到问题后，我想尝试一下 Prism。

我的代码如下所示：

我已经有了 </head> 标签。

CSS 工作正常，我的 Chrome 控制台没有错误，但脚本没有显示任何标记。

我的网站上有完全相同的代码，它也不显示行号，即使我的网站显示了。 http://m.ccaike.com/fyqnz/

网站示例：http://www 。 xar 像素。 com/2013/05/bloggers-conditional-statements-legacy 。 html

知道为什么这行不通吗？

对这个插件进行了一些测试，发现将 < 和 > 一起替换为 >; < 有点痛苦。不管怎样，如果你用 script 标签包裹你的 html，一切都会脱颖而出。由于非类型化脚本标记中的 html 不适合 Visual Studio，因此我给了它一个类型化的 prism-html-markup。

希望这有帮助！

class="语言-*"需要<。 code> 元素，而不是 <pre> 元素。我一开始也犯过这个错误。

已更新正确信息

看来JS fiddle不喜欢prism。在 CodePen 和我的本地计算机上运行良好：http://m.ccaike.com/anon/pen/xmwji。 Prism 使用正则表达式来识别要突出显示的部分。确保正确转义代码。开始标记（< 符号）应写为 <，结束标记（> 符号）应写为 >。

可以使用unescape标签插件

其工作原理如下：

要忽略第一个和最后一个返回，我建议使用标准化空白插件。

我发现 Prism 仅在单独导入每种语言时才有效：

从 'prismjs' 导入 Prism；

// 语言必须单独导入，
// 支持语法高亮
导入“prismjs/组件/prism-bash”；
导入 'prismjs/components/prism-css';
导入“prismjs/组件/prism-csv”；
导入“prismjs/组件/prism-docker”；
导入 'prismjs/components/prism-git';
导入 'prismjs/components/prism-json';
导入 'prismjs/components/prism-jsx';
导入 'prismjs/components/prism-markdown';
导入“prismjs/组件/prism-标记”；
导入 'prismjs/components/prism-mongodb';导入 'prismjs/components/prism-python';
导入“prismjs/组件/prism-regex”；
导入“prismjs/组件/prism-sql”；
导入“prismjs/组件/prism-typescript”；
导入 'prismjs/components/prism-yaml';

在“code”之间添加额外的“xmp”标签，并将html代码放在“xmp”标签内。对我有用。



<h1>测试</h1>

我的 Gatsby 模板有一个名为 .babelrc 的文件。 babblerc，一切都安装好了。

{
  “预设”：[“babel-preset-gatsby”]，
  “插件”：[
    [
   “棱镜”，
   {
      //这里添加语言
     “语言”：[“javascript”，“css”，“标记”，“php”，“python”，“bash”，“csharp”，“powershell”]，
     “插件”：[“显示语言”]，
     “主题”：“黄昏”，
     “css”：正确
     }
    ]
]
}

最近发表

猜你喜欢

使用 Prism JS 没有显示标记

相关文章