I recently made a post where I needed to show some code that would look better without word wrap as it was basically one or two lines. Wikipedia describes word-wrapping as: "breaking a section of text into lines so that it will fit into the available width of a page". I am using prism.js and as a default it creates a horizontal scrollbar rather than moving the code to the next line. This is what I prefer in 99% of the cases, however the other day I wanted it to be word-wrap, so I gave it a try. The below is what I came up with:
The code that I wanted to split on multiple lines was from the post I made last week. Here I had added an image using Unsplash and the code that I shared looked like this:
<small>Photo by <a href="https://unsplash.com/@asthetik?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Mike Kenneally</a> / <a href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Unsplash</a></small>
You can see from the above why that might be hard to read. Therefore I decided to word-wrap it. I did this by adding the following CSS to my page:
code[class*="language-"], pre[class*="language-"] {
white-space: normal !important;
word-break: break-word !important;
}
The code from before now looks like the below:
<small>Photo by <a href="https://unsplash.com/@asthetik?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Mike Kenneally</a> / <a href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Unsplash</a></small>
It is now no longer creating a horizontal scroll bar but has become one big mighty blob of code. Is this better? I would leave that decision up to you. Alternatively you can create newlines in the code so that it looks better, prism.js respects these:
![Coffee By Firesky Studios Ireland]
(https://images.unsplash.com/photo-1497515114629-f71d768fd07c?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=2000&fit=max&ixid=eyJhcHBfaWQiOjExNzczfQ)
<small>
Photo by
<a href="https://unsplash.com/@asthetik?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Mike Kenneally</a>
/
<a href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Unsplash</a>
</small>
Some code is hard to show off, as it does not fit naturally on the small width of a blog. I think prism.js does the right thing by default, as it keeps the intention and intention of the code, at the cost of a horizontal scrollbar (most websites are not naturally built to scroll horizontally).
I hope this helps you make your code snippets look better, let me know in the comments what you think :)