WordPress非插件实现 代码高亮

WordPress非插件实现 代码高亮
TIME 2019-05-24 18:44 周五

简简单单的小需求
因为最近这段时间在捣腾Linux会用到shell命令；记笔记，用文本记录，容易把文字和命令搞混淆了，非常的不雅观
用图片备注，工作量又太大了，太繁琐了，还占用宝贵的服务器空间

当然不否认图片还是有很大的直观优势。
但主要就是笔记要贴到WordPress上面，就需要一张一张上传到WordPress的媒体库里面，还要挨个挨个的放对位置，这个太繁琐了
之前一直都是这么干的

放弃插件
之前就安装过插件，当初安装插件的时候，一大把插件，都不知道如何选择，下载下来，功能又太丰富了，这种语言那种语言，感觉太复杂太繁琐了，毕竟目前我就用作记录shell命令，很简单的，黑底白字就够了，所以插件被我弃用了

最简单的黑底白字
就如同这样
这样简单的倒是可以，不过一旦复杂一点，行数多一点，那个界面就是非常的难过，毫无美学而言，简直像眼睛里面长了刺一样扎眼
就像是这样
cd xxx            #进入xxx目录
./configure    #检查安装环境
make             #编译
make install  #编译安装
reboot          #重启

这样简单倒是蛮简单的，就是这个效果太难看了
这是想起了方法，新建个表格，把表格背景设置为黑色，命令代码和注释文字放在里面，字体颜色设置为白色，就如同下面这样

这是效果1

这是效果2
很明显，还是传统一点的效果，看上去比较自然，一幕了当

缺点就是CSS代码+HTML代码一大串，有点长，对于新手来说使用不方便，容易出错

<table style="border-collapse:collapse;border-spacing:0" class="tg"><tr><th style="font-family:Arial, Helvetica, sans-serif !important;;font-size:12px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:inherit;background-color:#3a3a3a;color:#efefef;text-align:left">在这里粘贴你的shell命令代码</th></tr></table>

这就是效果2的代码
以后要用了，就把这一大串代码复制过去，不过感觉也挺繁琐的

<table style="border-collapse:collapse;border-spacing:0" class="tg"><tr><th style="font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:inherit;background-color:#343434;color:#efefef;text-align:left;vertical-align:top">在这里粘贴你的shell命令代码</th></tr></table>

还是觉得一款简单易用的插件来的方便啊，寥寥几个字符命令，却要在前后加上一大串CSS和HTML代码
还是得找款简单易用的插件

点击数：29