Wrap the lines in code blocks in Docusaurus

Sometimes you need to wrap the lines of code in the code blocks or snippets that you add in Markdown. If the line of code is too long, you need to scroll horizontally to get to the end of the line. If there are many lines of code in your code block, you need to scroll down first, scroll to the end of the line, and then scroll up to see the long line of code. Follow these instructions to add the word wrapping in the code blocks.

  less than a minute  

The goal is to add the code wrap feature for the long lines of code that you add in the code blocks in the Docusaurus Markdown files. The end result should be that you don’t need to scroll horizontally to get to the end of the line of code.

Add custom CSS

All kudos for this workaround go to Benjie who provided the solution for this issue.

To add a custom CSS for this code wrapper, go to src/css/custom.css in your Docusaurus project and insert the following code:

.wrapcode code {
  white-space: pre-wrap;
}

Use word wrapper in code blocks

To use the code wrapping feature in your Markdown code blocks or snippets, add these <div> tags with the wrapcode class to your Markdown file:


<div className="wrapcode">

...insert your code here...

</div>
Ask chatbot

Last modified December 19, 2024: added code wrap article (6ec64a3)