(ok)代码高亮插件Prism 实现代码自动换行

作者: wxfeng 分类: web前端,杂项 发布时间: 2017-05-15 00:00    阅读 426 次

问题:

Prism是款个人感觉比较好用的代码高亮显示插件,使用简单.特别是在线订制下载的功能:http://prismjs.com/download.html ,非常灵活,适合快速定制一个自己喜欢的代码高亮插件.但美中不足的是代码超出时无法自动换行.影响代码的阅读.

解决方法

修改文件prism.css第七行,将white-space: pre;修改为:white-space: pre-wrap;

code[class*="language-"],
pre[class*="language-"] {
    color: white;
    background: none;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    text-align: left;
    text-shadow: 0 -.1em .2em black;
    white-space: pre-wrap;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.5;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注