在 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 中不显示代码块（使用黑色背景和突出显示语法）。

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

解决方法

您的代码正在被 const funcionA = (paramFunctionB(par1)) => { functionB(par1); } const functionC = () => { functionA(functionB("hi")) } 用 CSS 类标记：

for i in num_*.dat; do # loop through all files concerned

  cat $i | tail -n +3 | head -n -2  >> dataset.dat

 done

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

highlight.js