为什么我的React代码编辑器组件没有被PrismJs突出显示？
React代码编辑器组件没有被PrismJs突出显示的原因可能有以下几点：
- 未正确引入PrismJs库：确保已正确引入PrismJs库，并在组件中进行初始化。可以通过在组件的
componentDidMount生命周期方法中调用Prism.highlightAll()来初始化PrismJs。 - 缺少所需的CSS样式：PrismJs需要相应的CSS样式来实现代码高亮效果。确保已正确引入所需的CSS文件，并在组件中进行引用。
- 代码语言未指定：PrismJs需要知道要高亮显示的代码是哪种语言。在使用PrismJs的组件中，确保为代码块指定了正确的语言类名，例如
language-javascript、language-html等。 - 组件渲染时机不正确：如果React代码编辑器组件在PrismJs初始化之前就已经渲染到页面上，那么代码高亮效果可能无法正常显示。确保PrismJs初始化完成后再渲染组件，或者在组件的
componentDidUpdate生命周期方法中重新调用Prism.highlightAll()。 - 组件的内容未更新：如果React代码编辑器组件的内容是通过异步方式获取的，那么在内容更新后，需要手动调用
Prism.highlightAll()来重新高亮显示代码。
总结起来，要解决React代码编辑器组件没有被PrismJs突出显示的问题，需要确保正确引入PrismJs库和所需的CSS样式，指定代码的语言类名，正确控制组件的渲染时机，并在内容更新后重新调用PrismJs的高亮方法。
相关·内容
我刚刚发现了PrismJs，它看起来很完美。但由于某些原因，它没有突出显示我在以下组件中的代码： import { useState, useEffect } from "react";
import Prism from "prismjs";
export default function EditCode() {
const [content, setContent] = useState("");
useEffect(() => {
Prism.highlightAll();
}, []);
useEf
浏览 44提问于2021-09-23得票数 1
回答已采纳
我安装了babel-plugin-prismjs，用下面的代码做了.babelrc：
{
"plugins": [
["prismjs", {
"languages": ["javascript", "css", "html"],
"plugins": ["line-numbers", "show-language", "copy-to-clipboard", &#
浏览 23提问于2021-05-14得票数 0
回答已采纳
我张贴了一个前端教程，其中包括一个html部分。我已经禁用了可视化编辑器，并且正在使用prismjs来突出显示代码，这很好。
然而，当涉及到html，wordpress是转换它，而不是显示它的原始。
有办法绕道吗？我试过几个插件，包括原始HTML，但没有joy.
浏览 7提问于2015-06-24得票数 1
回答已采纳
我已经在main.js文件中全局导入了prism.js。
代码块语法突出显示在Home components中工作得很好，但在使用vue-router路由到另一个页面后，没有任何效果。
在main.js中
// Global Import
import 'prismjs/prism.js'
import 'prismjs/components/prism-swift.min.js' // swift lang
import './theme/prism-swift-theme.css'
在我的关于页面组件中...
<pre><c
浏览 5提问于2020-10-14得票数 1
问题Desp：我如何在一个react项目中突出显示一个带有的自定义语法？
我按照newlang创建了一个扩展语法文件(让我们称之为 )。
我知道，在prismjs中有三种突出代码的方法：
highlightElement()
highlightAll()
highlight()
首先，我试图在我的应用程序中要求我的自定义语法文件。
import 'utils/highlight/prism-newlang';
然后，在突出显示组件中，
方法1：highlightElement()：❌无法使代码突出显示
import Prism from '
浏览 1提问于2019-10-18得票数 2
1回答
服务器上的语法突出显示
、、、
我有几段代码想要突出显示，我现在使用的是prismjs。问题是，我突出显示了多个代码块，页面在我并不是很慢的PC上加载需要5秒钟以上。
如果我突出显示prism代码，加载几乎是即时的。因此，我假设问题是突出显示代码。
如何在服务器上渲染代码亮点(服务器端渲染)？
我在一个react应用程序中使用nextjs 9.5.*。切换到另一个高亮显示库没有问题。
浏览 2提问于2020-08-23得票数 1
我在全新的Connections 6.5.1安装的基础上安装了。虽然使用的语法高亮显示是开箱即用的，但它只适用于某些语言。我找到了的codesample_languages。
externalPlugins: [{
name: "codesample",
url: "/connections/resources/web/tiny.editors.connections/tinymce/plugins/codesample/plugin.min.js",
settings: {
codesample_global
浏览 11提问于2020-06-16得票数 0
1回答
我使用Webpack动态导入和Vue 来延迟加载一个相当大的Vue标记解析组件。
现在，我想用Prism.js添加语法突出显示。我目前正在使用父组件的mounted()生命周期挂钩来安装语法突出显示，但这只是在某些时候才起作用，因为语法突出显示依赖于要首先加载的Markdown组件(当我在页面加载后从控制台手动执行Prism.highlightAll()时，每次都有效)。
相关源代码：
<template>
<vue-markdown>
# Hello
```javascript
import { hello } from "world&
浏览 1提问于2019-01-09得票数 0
我希望将.ts、.tsx、.js和.jsx文件导入react组件，并在PrismJS突出显示块中呈现它们。例如，假设我有一个TypeScript文件，其中包含functionA，我想在实际网站中突出显示该文件：
functionA.ts
export function functionA() {
console.log("I am function A!");
}
我想把它包含在另一个组件中。问题是，当我导入它时，我显然是在导入webpack模块版本。我试图将函数呈现在react组件中的微弱尝试如下所示：
MyComponent.tsx
import * as Reac
浏览 2提问于2021-03-27得票数 3
回答已采纳
我试图使用PrismJS高亮显示一些javascript代码，但我输入的文本根本不会改变颜色。我已经尝试将CDN用于prismjs和npm，但当我使用Prism.highlightAll()时，我看不到任何变化。以下是编辑器组件代码：
import React, {useEffect,useState} from 'react';
import Prism from 'prismjs';
import './editor.css';
const Editor = (props) => {
const [content, setC
浏览 4提问于2020-06-08得票数 3
gatsby-remark-prismjs不适用于我的设置。 我正在尝试突出显示代码，比如javascript和swift。 我的博客内容取自wordpress.com ? 这是我的gatsby.config.js ,
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-prismjs`,
options: {
浏览 33提问于2019-03-05得票数 0
回答已采纳
最近，我决定使用带有React的PrismJS，并且为了避免导入重复，我设法使用这个babel- plugins包来加载插件、语言等等。
如插件文档所示，我在根文件夹中创建了一个.babelrc文件：
{
"plugins": [
["prismjs", {
"languages": [
"applescript",
"css",
"javascript",
"markup",
浏览 10提问于2020-03-06得票数 2
我想添加PrismJS。
所以我跑了
yarn add prismjs
然后用以下内容更新了application.js：
import Prism from 'prismjs';
和application.scss：
@import '~prismjs/themes/prism';
现在它突出显示JS和CSS，如下所示：
<pre><code class="language-css">p { color: red }</code></pre>
但是，我不能添加更多的语言。如液体。
我试着按照
浏览 19提问于2020-05-13得票数 3
1回答
我使用react-markdown库和prismjs来突出显示项目中的代码。但是在我改变路线后，高亮显示并不总是有效的。
例如,
I在TestPage中有标记代码，浏览器中的url路径是localhost:3000/test。
const markdown = `## How about some code?
\`\`\`js
var React = require('react');
var Markdown = require('react-markdown');
React.render(
<Markdown source="# Your
浏览 0提问于2019-10-18得票数 0
当与Bulma一起使用时，PrismJS语法突出显示会中断。 PrismJS和Bulma都使用number和tag类。因此，PrismJS和布尔马之间存在冲突。 ? 有什么变通方法吗？
浏览 51提问于2021-09-23得票数 0
Docsify使用prismjs进行语法突出显示。我尝试在index.html中插入样式，但是没有任何效果(我可以在chrome dev工具中修改字体大小)
已经尝试过这样的东西。
<style>
code[class="lang-python"] {
font-size: 0.5rem;
}
</style>
</head>
在这里查看语法突出显示的docsify文档。我认为这应该直接与prismjs对接，除非docsify在那里做其他事情。
浏览 167提问于2021-05-25得票数 0
回答已采纳
1回答
我需要使用prismJS突出显示代码html，但内部文本没有考虑在行上返回\n <pre class="language-markup background-code"><code
[innerText]="getHtmlCode()""></code> 我使用的是prismjs 6 getHtmlCode() {
<ng-container *ngIf="customRow" >
<td></td>
<td colspan="3">
浏览 11提问于2019-04-25得票数 0
1回答
我正在使用无头CMS(Strapi)，并在前端进行反应。我想用PrismJS (或其他任何东西)来突出显示代码块。
在my render()中：
<div>
<pre>
<code className="language-css">{`p { color: red }`}</code>
</pre>
<h2>{this.state.title}</h2>
<div dangerouslySetInnerHTML={{ __html: `${content}` }} />
浏览 1提问于2018-10-31得票数 0
我真的很努力地为我的个人网站添加语法突出显示，我在那里参考我所学到的概念。
起初，为了记录我的笔记，我使用了Markdown，因为这很容易记笔记。但随着我的探索越来越多，我发现我想要的东西比Markdown所能做的要多得多，并意识到我想做我的网站。
基本上，我使用pandoc将我非常大的.md文件转换成.html，我想我或多或少被弄得一团糟。当然没有CSS，有一段时间我真的环顾四周，想弄清楚如何让html看起来很棒。我想我应该从语法突出显示我的代码片段开始，这些代码片段被转换为类似于：
<p>Hello World in C</p>
<pre><cod
浏览 37提问于2019-10-22得票数 0
回答已采纳
我希望在我的PrismJS博客中包含Next.js，以突出显示.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 mat
浏览 2提问于2020-07-01得票数 4
回答已采纳
我在我的Rails应用程序中使用prismjs进行语法高亮显示。我在布局中包含了样式表和js文件。我的问题是，代码只在页面加载时突出显示一次。每当ajax调用后部分刷新时，代码突出显示就无法工作。如果我将prismjs文件包含在分部中，那么它就能工作了。有什么更好的办法让这件事成功吗？
layout.html.erb
<%= stylesheet_link_tag :prism %>
<%= javascript_include_tag :prism %>
这是第一次在页面加载上工作。然后，为了使它在每个ajax调用响应上工作，我必须这样做：
partial.html.
浏览 0提问于2020-03-24得票数 0
回答已采纳
我正在尝试为prismjs编写一个语言定义，它将突出显示Xojo代码。
Xojo中的注释可以是以下任何一种：
' A comment
// Another comment
rem A third comment
注释可以是内联的，即以下内容是有效的：
dim a As Integer // still a comment
没有多行注释。
到目前为止，我已经弄清楚了如何使用这个regex模式突出显示以撇号开头的注释：
/'.*/
但我想不出另外两个。有人能帮忙吗？
谢谢,
浏览 1提问于2014-11-23得票数 1
回答已采纳
2回答
我正在学习如何使用高阶组件。在这里，我想突出一些文字。在我的代码中，我可以使用<div>突出显示整行。问题是我只想突出文本的一部分。所以我试了一下<span>。但是当我使用span时，整个突出显示部分不起作用。因为它没有给出任何错误，所以我不知道错误是从哪里来的。
HighlightedText.js
import React, { Component } from 'react';
import UpdatedComponent from './Hoc';
class HighlightedText extends Component
浏览 4提问于2020-11-11得票数 2
回答已采纳
1回答
我看到了很多例子，它对所有人都很好，但是我不知道为什么它没有突出显示我的代码。我尝试过许多解决方案，但没有一种适合我。
另外，当用户单击代码演示时，我需要在其中插入我自己的自定义HTML文件，用户也可以更改该文件并运行用户所需的自定义代码。
以下是输出的屏幕截图：
用于编辑器的代码
import React from 'react';
import {Controlled as ControlledEditor} from 'react-codemirror2';
import {language} from "@hapi/accept"
浏览 3提问于2021-06-27得票数 0
回答已采纳
2回答
我正在使用Docsify提供有关我的项目的文档。对于语法突出显示，我想使用prism.js。遗憾的是，突出显示部分不起作用。我也尝试了提到的所有建议。
在我的index.html中，我包含了<script src="//unpkg.com/prismjs/components/prism-ruby.js"></script>，正如docsify提到的。在我的file.md中，我想展示一些Ruby代码：
<pre><code class="language-ruby">
def hello(name)
p
浏览 2提问于2017-10-20得票数 3
1回答
我使用lit组件和vite +类型记录模板。现在我正在尝试创建我自己的代码块web组件。为了突出语法，我想要使用，所以我去了他们的页面，选择了我最喜欢的语言，下载了css和js文件，并尝试将它们添加到我的went组件中。
我只是把css文件复制到一个css``中，它应该工作得很好。但是我不知道如何添加js文件。
下面是我在使用.js文件时所做的工作：
在"allowJs": true中设置tsconfig.json。
import * as prism from '../prism.js'; in myFile.ts，在那里我有我的组件。
但是，
浏览 9提问于2022-06-08得票数 0
使用Prismjs在设计系统中显示代码段。
我想在一个独立的文件中分离html代码示例，并将其导入到我的组件中。
代码示例组件：
CodeSampleContainer.jsx
import React, { Component } from 'react';
import Prism from "prismjs";
import './CodeSample.scss';
import '../Shared/prism.css';
// Import separate html file
import { html } '
浏览 60提问于2019-03-27得票数 0
回答已采纳
1回答
为了学习Vue，我尝试创建一个非常简单的应用程序，它将实时地从输入返回高亮显示的代码。我读了几个棱镜教程和例子，但无法让它起作用。任何帮助或指导都将受到感谢，因为我刚刚开始与Vue，我有一种感觉，我混淆了一些东西。
我是HelloWorld.vue
<template>
<div>
<h1>Prism Demo</h1>
<div id="editor">
<textarea v-model="message"></textarea>
浏览 4提问于2020-06-14得票数 0
回答已采纳
3回答
在react中预览时不显示代码块
、、、、
在这段代码中，我试图使用插入一个代码块
import React, { useState } from 'react';
import hljs from 'highlight.js';
import { useQuill } from 'react-quilljs';
import 'quill/dist/quill.snow.css'; // Add css for snow theme
export default () => {
hljs.configure({
languages: ['
浏览 4提问于2021-04-11得票数 2
1回答
我在Gatsby中遇到了一个奇怪的错误，因为我添加了代码语法突出显示，所以我尝试托管发生的website.This。奇怪的是，当我在本地本地运行它时，它工作得非常好，但是当我使用Gatsby构建它时，它却失败了。(盖茨比云使用我的网站的github回购)
我得到的错误消息是：
There was a problem loading plugin /usr/src/app/www/node_modules/@gatsby-cloud-pkg/gatsby-plugin-preview/dist/index.js. Perhaps you need to install its package?
浏览 5提问于2022-05-25得票数 0
我正在尝试添加到prismjs的标记语言中，添加一个新的令牌，如下所示： {something}
^\_______/^
| | `---punctuation
| `---variable
`---punctuation 所以这个代码块.... <div class="blah">
{test} {sit_date_ran}
</div> ..。会突出显示为..。 ? ..。这是我尝试过的..。 const lang = cloneDeep(languages.markup);
lang.interpolation
浏览 18提问于2020-10-23得票数 0
我想要一个好的语法高亮笔来写我的WordPress博客。我有哪些可用选项？我经常看到它有很好的语法突出显示和复制到剪贴板的选项。有人知道这是什么工具吗？
浏览 0提问于2009-08-13得票数 47
回答已采纳
我想在我的应用程序中提供一个QtScript源代码编辑器。如果它有源代码突出显示和自动完成功能，那就太好了。
因此，我不想重复发明轮子:有没有一个很好的小部件可以做到这一点？我在谷歌上找不到任何东西...
浏览 0提问于2010-09-17得票数 10
回答已采纳
const initialState = {
comments: [
{
id: 1,
username: "Kevin",
date: "3 hours ago",
text: "Hello",
votes: 12,
upvoted: false,
downvoted: false,
comments: []
}
浏览 2提问于2022-04-23得票数 2
回答已采纳
1回答
我想在我的站点上显示一些代码并突出显示语法，这样它就更容易读了。我基本上是想用图书馆来做这个，所以我找到了这个ngx棱镜。我跟踪了的每一步，即：
我运行这两个命令：
npm i --save @ngx-prism/core
npm i --save @types/prismjs@1.9.0 prismjs@1.9.0
我将PrismModule导入到app.module中，并将其添加到imports数组中。
import { PrismModule } from '@ngx-prism/core';
imports: [
BrowserModule,
浏览 3提问于2019-10-21得票数 1
回答已采纳
我正在尝试创建一个博客使用理智无头CMS和反应的前端。 我做了一个用来突出显示文本的装饰器。正如您在下图中所看到的，在编辑器中，突出显示的文本的背景颜色为黄色。 ? 然而，我没有在我的React前端看到黄色高亮显示。 ? 我遗漏了什么？ 代码片段如下:sanityblog/schemas/lockContent.js import React from "react";
/**
* This is the schema definition for the rich text fields used for
* for this blog studio. When
浏览 24提问于2021-04-05得票数 0
回答已采纳
我正在尝试将剪贴板插件从prismjs添加到我的下一个应用程序。但我没有找到任何关于这件事的文件。我已经浏览过很多网站并实现了这个代码。
全部完成，但复制到剪贴板插件不起作用。
这是我的代码：
_app.js：
import '../styles/globals.css'
import "prismjs/themes/prism-twilight.css";
function MyApp({ Component, pageProps }) {
return (
<>
<Component {...pageProps} />
浏览 19提问于2022-04-16得票数 2
我正在为React-Native创建一个模块。
该模块需要根据存储在数据库中的配置在屏幕上突出显示或指出某些元素。
在Android中，我们的数据库将由视图In组成，并且我们的代码将突出显示这些视图In。
在HTML中，元素Ids就足够了。
如何在React native中定义唯一标识符。
这些将被存储在数据库中，然后实时突出显示。因此，模块需要在运行时访问元素的x，y，width和height
在HTML语言中，我将使用getElementbyId()并继续获取它的属性。React Native中的等价物是什么？
这是可行的-
<code>A0</code>
如果接收
浏览 33提问于2020-07-31得票数 2
1回答
我试图使用棱镜来制作一个代码编辑器，我从这个代码框中复制了一个模板。错误是：
./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 | p
浏览 4提问于2021-08-26得票数 3
回答已采纳
有没有人找到了一个用于Visual Studio的插件来支持PowerShell语法突出显示或IntelliSense？如果不是，谁知道为什么不呢？我一直希望其他有大量空闲时间的人现在已经解决了这个问题。我有希望，因为其他人已经设法利用有限的文档，并为其他语言(如 )构建自定义IntelliSense提供程序。
编辑:为了澄清，我并不是在寻找可以用来开发PowerShell的IDE列表。我每天90%的时间都是在Visual Studio中度过的。它在切分代码方面已经做得很好了。这是我更喜欢用来编辑所有文本和代码的IDE。在我使用PowerShell脚本的时候，缺少PowerShell语法的突出
浏览 2提问于2008-11-07得票数 41
回答已采纳
1回答
我正试图找到一种最有效的方法来为我的react sanity.io博客添加语法突出显示。下面是我使用react创建的文章组件：
import React, {useEffect, useState} from "react";
import {useParams} from "react-router-dom";
import sanityClient from "../../client";
import BlockContent from "@sanity/block-content-to-react";
import i
浏览 3提问于2022-01-07得票数 0
我的列表组件应该能够根据用户输入的关键字突出显示为什么某个元素是列表的一部分。
我当前使用的是列表项中的react-highlighter组件，但它要求我从search box => to the listview => to the list item发送用户输入的关键字
在我看来，这并不是很react。我也使用redux，所以我只有一个商店，并且listview和items不能直接感知商店。它们是哑巴组件，只是呈现属性。
<SearchBox onChange={setSearchText} value={searchText} />
<List items=
浏览 0提问于2015-12-01得票数 1
1回答
我想使用React创建一个类似于JSFiddle的UI：
用于HTML、CSS和JS的面板
预览面板
一个更新预览的“运行”按钮
我想使用微软的的HTML，CSS和JS面板，以获得语法突出显示和自动完成。
我已经抽象出一个通用的MonacoEditor组件。我的组件层次结构如下所示：
<Root>
<div>HTML <MonacoEditor /></div>
<div>CSS <MonacoEditor /></div>
<div>JS <MonacoEdi
浏览 2提问于2016-10-09得票数 0
我想找出以下几点：
如果: addCanvas按钮在Dashboard.js (第一个网页)中单击；然后: TopPanel.js中的canvasMenu div默认被高亮显示(第二个页面中的子组件)。
在addCanvas中单击Dashboard.js不仅重定向到Canvas.js (一个不同的父组件)。它还应该突出显示canvasMenu div中的TopPanel.js (子组件到Canvas.js)。因此，它们是两个不同的网页，前者的行为应该对后者产生影响。
我做过if-now语句，但没有用(似乎暂时没有意义.)。
addCanvas div in Dashboard.js：
从&
浏览 5提问于2022-04-07得票数 0
1回答
我正在使用Visual 2013构建一个使用React和JSX作为用户界面的网站。这一切都很好，但是开发环境很慢，因为.jsx文件被视为纯文本。因此，没有语法突出显示，也不能设置断点来帮助调试。
是否有办法改善这种体验，还是我必须切换到另一个编辑器的jsx文件？
浏览 1提问于2015-05-08得票数 11
我正在做一个使用客户端模板渲染的项目。我决定使用微模板引擎。
问题是VS2013的语法突出显示功能会破坏我的模板代码。其他模板引擎，如JSRender，可以被Visual Studio Editor很好地识别和突出显示。
如你所见，JSRender模板突出显示得很好，但VS无法识别我的MicroTemplating模板。我从复制了这个模板示例
如何让VS识别像JSRender这样的MicroTemplating模板？如果没有任何选项，可以禁用VS的高亮显示和自动代码修复功能吗？
感谢您提前给我回复。
浏览 3提问于2014-04-17得票数 0
1回答
我希望通过react组件中的值道具来显示一些代码，但是编辑器只是保持空白，不显示任何值。我可以在编辑器中输入，所有内容似乎都正常工作，包括语法突出显示。没有错误在望。我漏掉了什么明显的东西吗？
我应该注意，我使用的是next.js和react ace，如下所示：
以下是我的主要index.js页面代码：
import dynamic from "next/dynamic";
const CodeEditor = dynamic(import("../components/codeEditor"), { ssr: false });
export default
浏览 6提问于2020-09-04得票数 0
回答已采纳
我是一个新的C#学生程序员。我想做一个编辑器一样的应用程序，将突出显示代码(语法突出显示)，并有自动完成功能的函数，变量等…我不知道该怎么做。你能给我提供一些教程链接或一些相关的提示吗？我可以在“富文本框”中实现这些功能吗？
浏览 0提问于2010-10-30得票数 3
回答已采纳
1回答
大家好，我不知道为什么我失去了我的注意力，我已经看到它可能与重拍有关，但我不知道该怎么做。
大家好，大家好，我不知道为什么我失去了我的注意力，我看到它可以与重命名链接，但我不知道该怎么做1)我试图useRef，但它总是集中在开始的文本框2)我使用了React库，所以我知道它的常见错误3)请帮助
import React from "react";
import Editor from "./Editor";
import { initialState } from "../redux/reducer/field";
import { connec
浏览 4提问于2022-08-17得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
