在太阳下
不管你喜不喜欢,高不高兴,爱与不爱;太阳照旧照耀着你!温暖着你!

WordPress非插件实现 代码高亮

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

简简单单的小需求
因为最近这段时间在捣腾Linux会用到shell命令;记笔记,用文本记录,容易把文字和命令搞混淆了,非常的不雅观

用图片备注,工作量又太大了,太繁琐了,还占用宝贵的服务器空间

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

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

最简单的黑底白字
就如同这样
这样简单的倒是可以,不过一旦复杂一点,行数多一点,那个界面就是非常的难过,毫无美学而言,简直像眼睛里面长了刺一样扎眼

就像是这样
cd xxx            #进入xxx目录
./configure    #检查安装环境
make             #编译
make install  #编译安装
reboot          #重启

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

cd xxx             #进入xxx目录
./configure     #检查安装环境
make              #编译
make install  #编译安装
reboot           #重启

这是效果1

cd xxx            #进入xxx目录
./configure     #检查安装环境
make             #编译
make install   #编译安装 自定义代码颜色
reboot            #重启

这是效果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>
在这里粘贴你的shell命令代码

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

评论 抢沙发

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