code block not displaying when previewing in react-quill

user_10134463 0
Viewed 1826

In this code, I am trying to insert a code block using 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>
  );
};

Using the above code, I get the following preview of the editor's content

enter image description here

There are two problems with this:

  1. There is no code syntax highlighting, as I want to achieve this using the highlihgt.js package, inside the code block inside the editor, and

  2. The code block is not displayed (with the black background and highlighting syntax when it's working) in the previewing div outside the editor.

How can I fix these two issues?

react-quill quill highlight.js reactjs syntax-highlighting
3 Answers

Your code is getting marked up by highlight.js with CSS classes:

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

You are not seeing the impact of those CSS classes because you don't have a stylesheet loaded to handle them. You need to choose the theme that you want from the available styles and import the corresponding stylesheet.

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

Look at the css in the editor mode. It depends on two class names ql-snow and ql-editor. You can fix this issue by wrapping it around one more div with className ql-snow.

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

This should work.

user_12852360

I got the same issue and when I used hjls what happened was that I got syntax highlighting in the editor but not in the value. If you noticed the syntax gets highlighted some seconds after you write the code block, this means that the value gets set before the syntax gets highlighted. So, I just set the value after 2 seconds using setTimeout and this solved my problem

Like this:

<ReactQuill
  theme="snow"
  value={value}
  onChange={(content) => {
    setTimeout(() => {
      setValue(content)
    }, 2000)
  }}
  modules={modules}
  formats={formats}
  bounds="#editor"
  placeholder="Write something..."
  className="text-black dark:text-white"
/>
user_171334080
Related