如何在 react-quill 工具栏中实现自定义代码块按钮

如何解决如何在 react-quill 工具栏中实现自定义代码块按钮

我正在尝试实现要插入到 react-quill 中的自定义代码块按钮，但我不确定如何继续。我知道我需要为代码块实现一个处理程序（我将其命名为 code-block），然后添加一个类名为 `ql-code-block 的按钮，但是如何让编辑器显示特定代码块的使用 html 和 css 样式？

import React,{ useState } from 'react';

import { useQuill } from 'react-quilljs';

import 'quill/dist/quill.snow.css'; // Add css for snow theme

export default () => {
  const theme = 'snow';

  const modules = {
    toolbar: {
      container: '#toolbar',handlers: {
        'code-block': function () {
          console.log('Code-block'); <---- How to implement the handler here
        },},clipboard: {
      matchVisual: false,};

  const placeholder = 'Compose an epic...';

  const formats = ['size','bold','script'];


  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} />
      <div id='toolbar'>
        <select className='ql-size'>
          <option value='small' />
          <option selected />
          <option value='large' />
          <option value='huge' />
        </select>
        <button className='ql-bold' />
        <button className='ql-code-block' />
        <button className='ql-script' value='sub' />
        <button className='ql-script' value='super' />
      </div>
      <div id='editor' />

      <form onSubmit={submitHandler}>
        <button type='submit'>Submit</button>
      </form>
    </div>
  );
};