在Reaction-Quill中预览时不显示代码块 [英] code block not displaying when previewing in react-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>
  );
};

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

这有两个问题：

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

2. 代码块未在编辑器外部的预览div中显示(背景为黑色，并在工作时突出显示语法)。

如何解决这两个问题？

推荐答案

您的代码被highlight.js用css类标记：

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

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

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

这篇关于在Reaction-Quill中预览时不显示代码块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！