How to make prism.js word-wrap (line-wrap) code snippets

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 horisontal 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 word-wrap, so I gave it a try.

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:

![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>

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:

![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>

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 per default, as it keeps the indention and intention of the code, at the cost of a horizontal scrollbar (most websites are not naturally built to scroll horizontal).

I hope this helps you make your code snippets look better, let me know in the comments what you think :)