Highlight.js“找不到语言‘未定义’,您是否忘记加载/包含语言模块?”
我在 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:
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 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论