How to do word wrap for markdown code using ```

Earlier I wrote a post where I had a long code block like below:

=IMPORTRANGE("","'Sheet In Another File'!B1")

Word-wrap would be excellent for the above line of code as it is not formatted in any way and it is really just one line (but a long one - with a horizontal scroll bar).So I decided to try and "word-wrap" it and wrote the following CSS:

.force-word-wrap pre code {
   white-space: normal;
   word-wrap: break-word;

Since markdown accepts HTML you can wrap your code block in HTML like below:

<div class="force-word-wrap">

=IMPORTRANGE("","'Sheet In Another File'!B1")


Alternatively you could just change all code blocks on the page, but I wanted to wrap it in a div to be more in control and not add this to all code blocks. This gives me the following result:

=IMPORTRANGE("","'Sheet In Another File'!B1")

As you can see, no horizontal scrollbar! Note: I could only get the above to work if there was a newline between the ``` and the <div> and ending </div>. Without a newline it would cause issues as only the first line would be enclosed as code.

I hope you found this helpful, please leave a comment down below!