在Reaction-Quill中预览时不显示代码块 [英] code block not displaying when previewing in react-quill
本文介绍了在Reaction-Quill中预览时不显示代码块的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在此代码中,我尝试使用react-quilljs
插入代码块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: ['javascript', 'ruby', 'python', 'rust'],
});
const theme = 'snow';
const modules = {
toolbar: [['code-block']],
syntax: {
highlight: (text) => hljs.highlightAuto(text).value,
},
};
const placeholder = 'Compose an epic...';
const formats = ['code-block'];
const { quill, quillRef } = useQuill({
theme,
modules,
formats,
placeholder,
});
const [content, setContent] = useState('');
React.useEffect(() => {
if (quill) {
quill.on('text-change', () => {
setContent(quill.root.innerHTML);
});
}
}, [quill]);
const submitHandler = (e) => {};
return (
<div style={{ width: 500, height: 300 }}>
<div ref={quillRef} />
<form onSubmit={submitHandler}>
<button type='submit'>Submit</button>
</form>
{quill && (
<div
className='ql-editor'
dangerouslySetInnerHTML={{ __html: content }}
/>
)}
</div>
);
};
使用上面的代码,我得到了以下编辑器内容的预览
这有两个问题:
没有代码语法突出显示,因为我希望使用
highlihgt.js
包在编辑器内的代码块中实现这一点,代码块未在编辑器外部的预览div中显示(背景为黑色,并在工作时突出显示语法)。
如何解决这两个问题?
推荐答案
您的代码被highlight.js
用css类标记:
<span class="hljs-keyword">const</span>
您没有看到这些CSS类的影响,因为您没有加载样式表来处理它们。您需要从the available styles中选择所需的主题并导入相应的样式表。
import 'highlight.js/styles/darcula.css';
这篇关于在Reaction-Quill中预览时不显示代码块的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文