在 react-quill 中预览时不显示代码块答案

【问题标题】：code block not displaying when previewing in react-quill在 react-quill 中预览时不显示代码块
【发布时间】：2021-04-11 16:24:17
【问题描述】：

在这段代码中，我尝试使用 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 中不显示（在工作时具有黑色背景和突出显示的语法）。

如何解决这两个问题？

【问题讨论】：

我也遇到了同样的问题，仍然没有得到解决。

标签： reactjs syntax-highlighting quill highlight.js react-quill

【解决方案1】：

您的代码正在被highlight.js 标记为 CSS 类：

<span class="hljs-keyword">const</span>

您没有看到这些 CSS 类的影响，因为您没有加载样式表来处理它们。您需要从the available styles中选择您想要的主题并导入相应的样式表。

import 'highlight.js/styles/darcula.css';

【讨论】：

谢谢。这解决了编辑器和预览中的突出显示问题，但我仍然有第二个问题，即预览 div 中的代码块没有黑色背景，因为它出现在编辑器中。我该如何解决这个问题？
我不确定。您需要在文档中查看 quill 和 highlight.js。奇怪的是，如果我在浏览器控制台中输入document.querySelector('.ql-editor')?.innerHTML，我会得到格式化的结果。但如果我把它放在 on change 文本函数中，那么我不会？
奇怪！此外，块引用不会反映在预览中，但它们会出现在编辑器中。

【解决方案2】：

在编辑器模式下查看 css。它取决于两个类名 ql-snow 和 ql-editor。您可以通过使用 className ql-snow 将其包裹在另一个 div 周围来解决此问题。

<div className='ql-snow'> 
   <div className='ql-editor' dangerouslySetInnerHTML={{ __html: content }}> 
   <div/> 
</div>

这应该可行。

【讨论】：