Search code examples
javascriptcssghost-blog

Prevent Word Wrap Using Prism.js

My blog is powered by Ghost and Prism.js is used for syntax highlighting. This works great, but I'd like to disable word wrap to make code snippets easier to read. Is there a Prism.js configuration setting I can toggle or can this be fixed by making a change to the blog's stylesheet? I've experimented with the white-space property, but I haven't been able to make it work. To see an example of the problem, you can visit this blog post.

Solution

  • You can achieve this by setting the word-wrap CSS attribute against the pre and code blocks to normal. For example:

    code[class*="language-"],
pre[class*="language-"] {
    word-wrap: normal;
}

    As far as I can tell this is part of the default CSS (http://prismjs.com/download.html) so perhaps it was mistakenly removed while customizing the prism styles.