How can I integrate highlight.js with react-quill's code-block module for syntax highlighting?

Here's how you can add syntax highlighting using highlight.js with React Quill's code-block module:

1. Install and Import Dependencies
   Make sure you have both React Quill and highlight.js installed. Import the necessary CSS for both Quill and highlight.js, then configure highlight.js with the languages you need.

2. Configure React Quill Modules
   In your React Quill configuration, add a syntax module with a highlight function. This function uses highlight.js to automatically highlight code.

3. Ensure Correct React Imports
   Don't forget to import React and hooks like useState.

Below is an updated example based on your snippet:

---

JAVASCRIPTCopied
import React, { useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

import hljs from 'highlight.js';
import 'highlight.js/styles/github.css';

// Configure highlight.js with desired languages
hljs.configure({
  languages: ['javascript', 'python', 'java', 'cpp', 'c', 'html', 'css']
});

export default function App() {
  const [value, setValue] = useState('');

  const modules = {
    syntax: {
      // Use highlight.js to highlight code when a code-block is rendered.
      highlight: (text) => hljs.highlightAuto(text).value
    },
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline', 'strike', 'blockquote'],
      [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
      ['link', 'image', 'code-block'],
      ['clean']
    ]
  };

  const formats = [
    'header',
    'bold', 'italic', 'underline', 'strike', 'blockquote',
    'list', 'bullet', 'indent',
    'link', 'image', 'code-block'
  ];

  return (
    <>
      <ReactQuill
        theme="snow"
        value={value}
        modules={modules}
        formats={formats}
        onChange={setValue}
      />
      <button onClick={() => console.log(value)}>show highlighting</button>
    </>
  );
}

---

Additional Tips

• Editor Setup:
  If you're using Visual Studio Code, consider setting up Prettier and ESLint (with React hook rules enabled) to keep your code clean and consistent as you develop.

• Syntax Highlighting on Save:
  If you require your code to be automatically formatted (including code blocks), you can enable “format on save” in your VS Code settings. This makes sure your formatting stays consistent before committing changes.

With these steps, the code blocks in your React Quill editor will automatically receive syntax highlighting via highlight.js when rendered.