修改zblog文章代码显示样式的修改

访问该页面：https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript

按照自己的需要选择对应的代码，主题以及插件（插件强烈推荐选择line number行号以及show-language功能，一个是显示行号，另一个在右上角显示当前定义的语言标记）

选择结束后底部会有对应的预览界面，以及对应的文件下载（一个prism.js文件，一个prism.css文件），将两个文件下载下来。

一般可以修改prism.css文件中的一些简单预设，比如说默认的代码字体，默认的代码行距，

譬如：

/*首先定义一个字体文件font-face*/
 @font-face{
 font-family: "fira";
 src: url(../../../../../FiraCode-Retina.ttf); format('truetype');/*该字体为英文等宽字体*/
 }

 /*该区域为影响代码的外观的设置，如font-family  ，如line-height等等*/
code[class*="language-"],
pre[class*="language-"] {
    color: white;
    background: none;
    text-shadow: 0 -.1em .2em black;
    font-family:"fira" !important; 
  /*采用font-face方式来设置个性化字体。*/
  /*原代码默认字体：Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace*/
    font-size: 1.2em;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 2.0;

    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;

    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}

/*该段设置为代码显示的一些参数，如圆角，如背景，边框，阴影等*/
/* Code blocks */
pre[class*="language-"] {
    padding: 1em;
    margin: .5em 0;
    overflow: auto;
    border-radius: .7em;
    border: .15em solid hsl(207,45%,12%); /*这个是边框颜色*/
    box-shadow: 1px 1px .5em black inset;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
    background: hsl(207,45%,12%); /*这个是背景*/
}

然后将这两个文件上传到服务上对应的位置，zblog中一般在：/zb_users/plugin/UEditor/third-party/prism/目录下面，替换掉原有的两个文件（可以先备份一下，防止出错）

刷新后就可以了。

有一个需要注意的地方，这个方式获取的prism.css文件和prism.js文件对ueditor这种编辑器不能直接用，主要是ueditor代码与获取的prims.js文件中的一些描述不一致导致。解决的方法是：当文件覆盖好了以后，在后台编辑的时候随便选择需要注释为高亮代码的文本内容，选择例如css或者bash之类的以后，将编辑器切换到html模式，查看该高亮代码的html源码，一般是这样：

<pre class="prism-highlight prism-language-css>

将它修改为，譬如：

<pre class="prism-highlight prism-language-autohotkey line-numbers>

这样的。

其中autohotkey表示AHK语言（前提是你下载的时候已经选择了该语言。各个语言对应的名称可以见css文件的顶部），例如：

autohotkey表示ahk语言

vba表示office的vba代码

其中line-numbers为行号，默认的ueditor在采用下载的prism.js与prism.css的时候不显示行号的，需要手动添加这个内容到html里面去。

这样再切换到浏览的截面后，代码就显示正常了。

———–2020.06.10——以下为旧方案，实用性不大。采用上面的方法更好，也更简单。

zblog默认的语言代码区域显示的风格是米黄色底，黑色为基本字体色的样式；可以修改为其他的样式，例如黑底白字；

修改的文件位置在：/zb_users/plugin/UEditor/third-party/prism （在后台插件中心中需要已经安装了ueditior插件，该插件为后台编辑器的插件，默认安装）

这下面有两个文件: prism.css和prism.jss文件，具体修改css文件样式：

里面涉及到代码颜色修改的内容大概是：

pre[class*="language-"]：这里面修改的代码基本字体颜色，代码的背景色；字体大小，行高等；

.prism-line-numbers .prism-line-numbers-rows: 这里面涉及到代码前面序列号的设置，字体，颜色；

div.prism-show-language > div.prism-show-language-label：这里涉及到代码语言标记的一些颜色，字体外观等设置；

另外在主题的css中如果存在 .t pre，该区域同样对代码的设置会起到影响，不过此处与上面两个位置作用一样，建议只修改上面两个文件就可以；

还有一种方法，就是下载对应风格的prism.css和prism.js文件；这个方法简单，但是跟论坛默认的有一个区域：默认就是没有前面的行号标记；（plugins中可以选择，但是好像需要自己手动修改css和js文件，不过还没弄明白；）

具体下载页面：https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript

选择好风格，对应下载css文件和js文件，上传到服务器，替换原有的文件，刷新就可以了。

2020.06.10增补：

下载新风格后，复制到编辑器的third-party目录中替换，在编辑器中编辑代码的时候切换到html的模式，在pre段落添加这样的标记：

class="prism-highlight prism-language-autohotkey line-numbers"

其中prism-language-autohotkey中的autohotkey表示的是所对应的语言（在css文件头部可以查看到下载了哪些支持的语言，如 prism-language-php表示 php语言，

其中line-numbers表示启用行号。

代码样式演示：

#/bin/bash
#thunar文件管理器菜单增加跳转源目录功能；菜单命令 goback %f
#2020.02.24 laoyao
#利用文件类型判断，L为链接类型，但是链接目录同时是d也是h类型，但是d类型优先于h类型；
#也就是说当一个目录为软链接的时候，如果先用d去判断，它就是返回目录，如果用h判断，它就返回软链接；
#但是软链接只有一个h类型，所以先判断是否为目录，然后再去判断为文件类型；
if [ -L "$1" ] ; then  #该参数为L或者h均可(大写L或者小写h）。
             if [ -d "$1" ]; then   #表示软链接目录，同样是软链接判断，目录优先于文件
                  
                 var1=`ls -l -d "$1"`           #直接将命令结果变成字符串赋予变量，注意要添加""，针对目录有空格的情况，
                 var2=${var1#*->}                #删除 ->符号左边的字符，剩下右边就是链接真实位置，此处变量为文件，要考虑删除最后/之后的字符
                 thunar $var2                        #打开该文件所在位置
                #echo "这是一个软链接目录"$1 >~/temp/0.txt
        elif [ -h "$1" ] ; then     #表明这是一个软链接文件
                 var1=`ls -l -d "$1"`           #直接将命令结果变成字符串赋予变量，注意要添加""，针对目录有空格的情况，
                 var2=${var1#*->}                #删除 ->符号左边的字符，剩下右边就是链接真实位置，此处变量为文件，要考虑删除最后/之后的字符
                 var3=${var2%/*}             #删除/右边的字符，保留左边的路径，可以用 %%/* 运算符号
                 thunar $var3                        #打开该文件所在位置
                #echo "这是一个软链接文件"$1 >~/temp/0.txt
         fi
fi

最新文章

标签