WordPress

推荐列表 站点导航

当前位置:首页 > 建站教程 > WordPress >

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

来源:网络整理  作者:  发布时间:2020-12-16 21:42
我们在使用 WordPress 的一些主题带的代码高亮样式非常好看,可是不能自动换行,对于一些长代码甚至遮盖住看不到,...

word-wrap: break-word;

例如使用比较流行的 dux 主题的高亮代码,只能利用 Chrome 的审查元素找出高亮代码的顶层样式:

WordPress实现代码高亮过长自动换行方法 (https://www.wpmee.com/) WordPress开发教程 第4张

我们在使用 WordPress 的一些主题带的代码高亮样式非常好看,可是不能自动换行,对于一些长代码甚至遮盖住看不到,今天就为大家分享一下WordPress实现代码高亮过长自动换行方法。

word-wrap: break-word;

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

WordPress实现代码高亮过长自动换行方法 (https://www.wpmee.com/) WordPress开发教程 第1张

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

WordPress实现代码高亮过长自动换行方法 (https://www.wpmee.com/) WordPress开发教程 第3张

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

white-space: pre-wrap;

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

white-space: pre-wrap;

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

WordPress实现代码高亮过长自动换行方法 (https://www.wpmee.com/) WordPress开发教程 第2张

相关热词: 方法

本站内容来源于网络,如有侵权请与我们联系,我们会及时删除,我们深感抱歉!
注:本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规!

本文地址: https://v30.fanwenzhu.com/jz/wp/4609.shtml

Copyright © www.juheyunku.com      关于 | 合作 | 声明 | 联系 | 更新 | 地图 | Tags

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

2020-12-16 编辑:

word-wrap: break-word;

例如使用比较流行的 dux 主题的高亮代码,只能利用 Chrome 的审查元素找出高亮代码的顶层样式:

WordPress实现代码高亮过长自动换行方法 (https://www.wpmee.com/) WordPress开发教程 第4张

我们在使用 WordPress 的一些主题带的代码高亮样式非常好看,可是不能自动换行,对于一些长代码甚至遮盖住看不到,今天就为大家分享一下WordPress实现代码高亮过长自动换行方法。

word-wrap: break-word;

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

WordPress实现代码高亮过长自动换行方法 (https://www.wpmee.com/) WordPress开发教程 第1张

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

WordPress实现代码高亮过长自动换行方法 (https://www.wpmee.com/) WordPress开发教程 第3张

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

white-space: pre-wrap;

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

white-space: pre-wrap;

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

WordPress实现代码高亮过长自动换行方法 (https://www.wpmee.com/) WordPress开发教程 第2张

本站内容来源于网络,如有侵权请与我们联系,我们会及时删除,我们深感抱歉!
注:本站所有信息仅供学习参考!
本文地址为 https://v30.fanwenzhu.com/jz/wp/4609.shtml

相关文章

风云图片

推荐阅读

返回WordPress频道首页