标签: prismjs

不知道是否有人遇到过这个问题。我正在使用PrismJS语法荧光笔突出显示代码。应用程序是用Reactjs编写的，而我想要做的是在WYSIWYG编辑器中，当用户要插入代码块时，我用pre +代码包装用户选择的文本。PrismJS似乎正确地标记了元素，就像您期望的那样：

但是，如您从上图可能看到的，所有内容都放在一行中。而不是那么漂亮的代码块：

我不知道这是怎么回事，使用prismjs网站的css：

code[class*="language-"],
pre[class*="language-"] {
    color: black;
    background: none;
    text-shadow: 0 1px white;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.5;

    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;

    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}

pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
    text-shadow: none;
    background: #b3d4fc;
}

pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
    text-shadow: none;
    background: #b3d4fc;
}

@media print {
    code[class*="language-"],
    pre[class*="language-"] { …

我有一个组件 ( prism-editor)，它只从 中获取代码v-model="code"。这意味着，代码必须通过以下方式发送到组件code：

代码.vue

<template>\n  <prism-editor class="my-editor" v-model="code" \n    :highlight="highlighter" :line-numbers="numbers"/>\n</template>\n\n<script>  \n  import { PrismEditor } from 'vue-prism-editor';\n\n  export default {\n    components: {\n      PrismEditor,\n    },\n    data: () => ({\n        code: this.$slots,\n        numbers: true\n    }),\n  }\n</script>\n

我想从一个Code由插槽命名的父组件绑定它：

页面.vue

<template>\n    <code language="c">\n        int main() {\n            printf('Hello World!');\n        }\n    </code>\n<template>\n\n<script>\n  import Code from 'code.vue'\n  export default {\n    components: {\n      'code': Code\n    }\n  }\n</script>\n

在我的Code组件中，我必须找到一种方法来获取槽数据并将其直接传递到code要发送到v-model='code' …

我正在尝试使用 prism 制作代码编辑器，我从这里的codesandbox复制了一个模板。错误是：

./node_modules/prismjs/components/prism-clike.js
E:/Trabajos/Personal projects/OpenAI/Code translator/code-tranlator/node_modules/prismjs/components/prism-clike.js:1
> 1 | Prism.languages.clike = {
  2 |   'comment': [
  3 |       {
  4 |           pattern: /(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,

对于我使用 React 的某些上下文，代码首先工作，然后停止工作，然后在我不做任何事情的情况下再次开始工作，这很奇怪，我尝试卸载依赖项并重新安装它们，但没有成功，我已经搜索了整个互联网，但没有太多关于这个主题的信息（如果有的话），所以我被困住了。

这是该组件的相关代码：

import React, { useState } from 'react'
import Editor from 'react-simple-code-editor'
import 'prismjs/components/prism-clike'
import 'prismjs/components/prism-javascript'
import 'prismjs/themes/prism.css'
import {useCodex} from '../Context/CodexContext'

export default function CodeEditor() {
    
    const { getCompletion } = useCodex();

    const code = `function add(a, b) {
        return a + b;
      }
      
      const a = 123;
      `

    const …

我使用https://prismjs.com来突出显示我的代码，它运行得很好。

这是一个例子

<pre>
  <code class="language-php">
   $user->hasOne('App\Phone','user_id','id');
  </code>
</pre>

这导致

我想'user_id'仅在这种情况下更改字体颜色和背景颜色（不是一般情况，我不想更改'id'或 的颜色'App\Phone'）。我只是想强调它，因为这个词本身对于给定的上下文很重要。这可能吗？

我在源码中发现js-script将上面的代码改为

<pre class="language-php">
 <code class="language-php">
  <span class="token variable">$user</span>
  <span class="token operator">-</span>
  <span class="token operator">&gt;</span>
  <span class="token function">hasOne</span>
  <span class="token punctuation">(</span>
  <span class="token string">'App\Phone'</span>
  <span class="token punctuation">,</span>
  <span class="token string">'user_id'</span>
  <span class="token punctuation">,</span>
  <span class="token string">'id'</span>
  <span class="token punctuation">)</span>
  <span class="token punctuation">;</span>
 </code>
</pre>

如果我复制此代码并将其粘贴到原始html文件中，它将像以前一样呈现。如果我style="background-color: red !important;"向 span 元素添加类似的内容，它将被 js 文件忽略并覆盖。

是否有一个快速的肮脏修复，如何仅更改特定单词的颜色/背景颜色？

我正在 Angular 中开发一个应用程序，它使用 PrismJS 来显示一些动态发送的代码，具体取决于选择的按钮。以下代码正确显示行号。

<pre class="line-numbers" data-start="5">
 <code class="language-markup">
  &lt;div&gt;&lt;a data-icon="fa-file-o"&gt;File&lt;/a&gt;&lt;/div&gt;
 </code>
</pre>

但是像这样使用 PrismJS 根本不会显示行号。

<pre class="line-numbers" data-start="5">
 <code class="language-markup" [innerHtml]="myCode">
 </code>
</pre>

真的很想知道为什么会发生这种情况，Prism Line Numbers插件是否会检查代码标记之间的行块？如果是这样，有没有办法使用 Angular 动态传递代码并指定起始行号？

谢谢

我正在使用 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课，我得到了更大的左边距，但没有行号。

我想在我的 Next.js 博客中包含 PrismJS 以突出显示 .md 文件中的代码。降价在 /lib/posts.js 中使用remark和处理，remark-html并作为 HTML 传递给react-markdown

// /lib/posts.js

export async function getPostData(id) {
  const fullPath = path.join(postsDirectory, `${id}.md`);
  const fileContents = fs.readFileSync(fullPath, "utf8");

  const matterResult = matter(fileContents);

  const processedContent = await remark()
    .use(html)
    .process(matterResult.content);
  const contentHtml = processedContent.toString();

  return {
    id,
    contentHtml,
    ...matterResult.data,
  };
}

contentHtml 是在 [id].js 中获取的，我使用 ReactMarkdown 来呈现它。这里我导入 Prism 使用 CodeBlock 函数来突出显示。我prism.css在我的_app.js旁边导入global.css

// /pages/_app.js

import Container from "../components/Container";
import "../styles/global.css";
import "../styles/prism.css"; …

为了在我的博客上显示 build.gradle 示例代码，我想使用Prism进行语法突出显示。

但 gradle 并未包含在支持的语言列表中。除了突出显示 gradle 之外，还有其他language-xxxx选择吗？使用language-nginx是一个好的选择吗？

更新于 2022 年 5 月 4 日：

感谢该模块的作者 ABDELKHALEK ZELLAT，您现在可以使用 Gradle。

我正在摆弄 Prism.js，由于某种原因，突出显示typescript代码无法按预期工作。Prism.js 无法对片段进行事件标记...

这是codesandbox 中的演示

任何帮助/想法表示赞赏。

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

使用language-jsonI 没有任何漂亮的着色，使用language-jsI do。不支持json吗？