WordPress站点如何使用Prism实现代码高亮代码自动换行并可一键复制
Prism是款个人感觉比较好用的代码高亮显示插件,使用简单.特别是在线订制下载的功能:http://prismjs.com/download.html ,非常灵活,适合快速定制一个自己喜欢的代码高亮插件.
前往Prism官网下载页面,根据实际需求勾选主题样式、支持的语言和功能插件。
1 选择Themes(主题样式),可点击右侧的按钮切换不用样式,在该页面最下方可看到实际高亮...
![图片[1]-WordPress站点如何使用Prism实现代码高亮代码自动换行并可一键复制-优创网](https://cloud.cdn.iunn.cn/wp-content/down/2022/11/20221101164447717.png)
2 勾选支持的语言,建议勾选上PHP、SQL之类的语言。
![图片[2]-WordPress站点如何使用Prism实现代码高亮代码自动换行并可一键复制-优创网](https://cloud.cdn.iunn.cn/wp-content/down/2022/11/20221101164528450.png)
3 勾选功能插件，如想显示行号就勾选Line Numbers，想显示代码是什么语言就勾选Show Languages，想要实现一键复制代码则勾选Copy to Clipboard Button。
![图片[3]-WordPress站点如何使用Prism实现代码高亮代码自动换行并可一键复制-优创网](https://cloud.cdn.iunn.cn/wp-content/down/2022/11/20221101164658764.png)
4 选择好相应的主题样式、支持的语言和功能插件后可以在下方看到对应的文件大小。然后点击【DOWNLOAD JS】按钮下载prism.js文件，点击【DOWNLOAD CSS】按钮下载prism.css文件。
5 将prism.js和prism.css文件上传到当前主题文件内的js文件夹，然后在主题文件header.php中添加以下的代码：
6、为经典编辑器添加相应的语言高亮按钮，将以下代码添加到当前主题的functions.php文件最后一个?>的前面，(请自行把,《》换为<>)
// 添加代码高亮按钮
add_action('after_wp_tiny_mce', 'yigujin_tiny_mce');
function yigujin_tiny_mce($mce_settings) {
?>
8代码高亮代码自动换行解决方法
修改文件prism.css,将white-space: pre;修改为:white-space: pre-wrap;
code[class*="language-"],
pre[class*="language-"] {
color: #f8f8f2;
background: none;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
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;
}
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
暂无评论内容