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

Question

在这段代码中，我试图使用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>
  );
};

使用上面的代码，我得到了编辑器内容的以下预览

这有两个问题：

1. 没有代码语法突出显示，因为我想highlihgt.js在编辑器内的代码块内使用包来实现这一点，并且

2. 代码块在编辑器外的预览 div 中不显示（在工作时具有黑色背景和突出显示的语法）。

我该如何解决这两个问题？

Answer 1

您的代码被highlight.jsCSS 类标记：

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

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

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

Answer 2

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

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

这应该有效。