React Code block not displaying when previewing in react-quill ?

The React code block is not displayed (with the black background and highlighting syntax when it's working) in the previewing div outside the editor....
NAHIDA EZ-ZOUIANE| October 24, 2023
React Code block not displaying when previewing in react-quill ?

#solution #dev #React

For seamless integration of React code blocks into your web applications, it's crucial to ensure proper styling and syntax highlighting. When previewing content outside the editor, such as in documentation or tutorials, encountering issues with displaying React code blocks can impede user experience and comprehension. By meticulously configuring CSS styles, utilizing JavaScript libraries like Prism.js or Highlight.js, and verifying the rendering process in preview environments, developers can ensure that React code blocks are presented with clarity and functionality. 

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 }}> 

This should work.

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';

finally, you can see more about React.js :

What Is Higher Order Component (Hoc) In React? ,

Hacker News API & fechting data with React js

This website uses cookies to enhance your browsing experience, analyze site traffic, and serve better user experiences. By continuing to use this site, you consent to our use of cookies. Learn more in our cookie policy

Explore the latest insights, articles,free components, and expert advice on programming and software development

© Copyright 2024 MED DAKIR. All rights reserved./privacy policy