Highlight.js“找不到语言‘未定义’,您是否忘记加载/包含语言模块?”

发布于 2025-01-14 18:20:47 字数 1371 浏览 5 评论 0原文

我在 React 中使用highlight.js 作为 Froala 编辑器代码块。但我遇到了错误。我使用了 registerLanguage 函数,但它不起作用。

浏览器错误:

“在此处输入图像描述”"

这是我的代码:

import FroalaEditor from 'react-froala-wysiwyg';
import hljs from 'highlight.js';
import javascript from 'highlight.js/lib/languages/javascript';
import 'highlight.js/styles/androidstudio.css';

hljs.registerLanguage('javascript', javascript)


export default function Editor({ handleEditor, data }: EditorType) {
  return (
    <div className="unreset">
      <FroalaEditor
        tag="textarea"
        onModelChange={handleEditor}
        model={data}
        config={{
          placeholderText: '',
          events: {
            //editor event
            contentChanged: function () {
              //.fr-element is editor wrapper tag
              document
                .querySelectorAll('.fr-element pre')
                .forEach((el: any) => {
                  // WARN: Falling back to no-highlight mode for this block. 
                  hljs.highlightElement(el);
                });
            },
          },
        
        }}
      />
    </div>
  );
}

为什么不起作用?谢谢。

I am using highlight.js for Froala editor code blocks at React. But I'm getting en error. I used registerLanguage function but it didn't work.

Error in browser:

enter image description here

Here is my code :

import FroalaEditor from 'react-froala-wysiwyg';
import hljs from 'highlight.js';
import javascript from 'highlight.js/lib/languages/javascript';
import 'highlight.js/styles/androidstudio.css';

hljs.registerLanguage('javascript', javascript)


export default function Editor({ handleEditor, data }: EditorType) {
  return (
    <div className="unreset">
      <FroalaEditor
        tag="textarea"
        onModelChange={handleEditor}
        model={data}
        config={{
          placeholderText: '',
          events: {
            //editor event
            contentChanged: function () {
              //.fr-element is editor wrapper tag
              document
                .querySelectorAll('.fr-element pre')
                .forEach((el: any) => {
                  // WARN: Falling back to no-highlight mode for this block. 
                  hljs.highlightElement(el);
                });
            },
          },
        
        }}
      />
    </div>
  );
}

Why does not work? Thanks.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文