关注主机资讯
一直在努力转载

DUX主题pre标签下的实现代码自动换行

今天 @初缘 大佬折腾了一下将知更鸟主题的代码高亮插件应用到 DUX 主题上,具体操作方法可以点击 Dux5.2主题给wordpress编辑器添加自动代码高亮功能 代码版 非插件 (移植begin代码高亮) 查看!

其实博主本人并不是不喜欢 DUX 主题的自带的这个功能,只是想试一下 pre 标签下代码能够自动换行,但是这一点貌似 DUX 主题不支持,代码写的有点长时,给我一个很长的左右滚动条,有点不是很喜欢,所以博主有开启了折腾模式!

添加 css 代码

其实实现方式很简单,就是在 main.css 文件中加入以下代码就可以了:

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

加入下面 css 样式之后,就能得到你想要的样式了!

样式预览

1. 没添加样式代码前,可以看到长长的左右滚动条,严重影响阅读:

2. 添加代码后,代码终于会换行了!

 

特别注意:本站资源、文章多为网络收集,如涉及版权问题请及时与站长联系,我们会在第一时间内与您协商解决。请自行识别其商家的好坏,本站仅提供消息,不保证其正确性,和时效性!!!

历史上的今天
四月
13
    哇哦~~~,历史上的今天没发表过文章哦
赞(0)
未经允许不得转载:楚媛Blog » DUX主题pre标签下的实现代码自动换行

评论 抢沙发

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