SEO只是外表
技术才是我的追求

WordPress高亮长代码实现自动换行

WordPress的dux主题自带的代码高亮样式非常好看,可是不能自动换行,对于一些长代码甚至遮盖住看不到:

网上有针对特定高亮代码插件的自动换行的解决办法,就是在高亮代码的主样式的css添加:

white-space: pre-wrap;
word-wrap: break-word;

我不知道dux主题使用的是哪种类型的高亮代码,只能利用Chrome的审查元素找出高亮代码的顶层样式:

可以看到高亮代码的顶层样式为:prettyprint;

在主题文件中搜索”prettyprint”,在dux/css/main.css中找到prettyprint的样式,同样添加:

white-space: pre-wrap; 
word-wrap: break-word;

如图:

添加css样式后实现了代码自动分行,效果如下:

其他类型的高亮代码如果同样存在不会自动换行的问题,可以参考本方法解决。

未经允许不得转载:棋哥SEO博客 » WordPress高亮长代码实现自动换行

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址