使用 Prism.js 防止自动换行

Question

我的博客由 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 提供支持。

Answer 1

您可以通过将 pre 和 code 块的 word-wrap CSS 属性设置为 normal 来实现此目的。例如：

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

据我所知，这是默认 CSS (http://prismjs.com/download.html) 的一部分，因此可能是在自定义棱镜样式时错误地删除了它。

Answer 2

在我的例子中，我还需要使用 * 来包含任何子元素，如下所示：

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

使用 Prism.js 防止自动换行

Prevent Word Wrap Using Prism.js

javascript

css

ghost-blog