起因

逛了几个网站后,发现有些网站中的文章,它需要强调的点,都使用了文本背景去高亮,比如

 

这里可以使用TinyMCE Advanced这款文本编辑器设置字体与字体背景来实现

但我想再自定义这个高亮的代码块,比如边框,圆角等

 


最终效果

在编写文章的时候,点击文本,然后点击code这个按钮,然后我们在<code></code>便签里面写上我们的代码,然后最终这段文本的效果就是

 

 


动手

①先设置好Crayon Syntax Highlighter

进入到Crayon面板,滚动到 [标签] 这个区间,将箭头指向的选择勾上,保存

第一步做完了,那么在文本编辑框里,点击文本后选择code便签,wp就能识别到这个标签。

然后我们发现自带的code标签的样式很丑,一般都为这样的反人类阅读体验,所以我们要修改它的文件。

②修改Crayon主题文件

  1. 首先,查看我们的主题是什么,,这里我是obsidian Light这个主题,记着。
  2. 变胖。比如现在都还没修改的外观是这样的,隐约能看到背景颜色是吧,我们要将背景变胖,终端或者图形化SFTP客户端进入wordpress根目录,用VI或者SFTP客户端自带的文本器打开/wp-content/plugins/crayon-syntax-highlighter/css/min/crayon.min.css,搜索.crayon-syntax-inline将{}里面的内容更改为margin:0 2px;padding: 0px 3px 0px 2px; 即,文件修改后,一般都要清空浏览器的图片与缓存,然后刷新我们的文章页面,代码块变为
  3. 加边。我们要为代码块加入边框,进入wp-content/plugins/crayon-syntax-highlighter/themes文件夹,这个文件夹就是Crayon面板主题列表所有的主题样式,进入我们上面我们的主题文件夹obsidian Light,打开.css后缀的文件,搜索.crayon-theme-obsidian-light(注意,不同的主题,一般就是-obsidian-light这个改为不同的主题名,前面的.crayon-theme不变),在{}里面的最后添加
    .crayon-theme-obsidian-light {
    	color: #e0e2e4;
    	margin-bottom: 25px !important;
    	background-color: #f8f8ff !important;
    	font-size: 100% !important;
    	line-height: 130% !important;
    	background: #f5f5f5 !important;
    
    	border-style: solid !important;//添加下面这三条语句
    	border-width: 1px !important;
    	border-color: #dcdcdc !important;
    }

    清空浏览器,刷新文章,代码块变为

  4. 背景变色,代码块边框圆角。我们要为代码块改变背景颜色和让代码块边框变圆角。还是在流程3中的文件中搜索,inline,修改{}内容
    .crayon-theme-obsidian-light-inline {//寻找到的位置
    	background: #f9f2f4 !important;//将下面语句覆盖
        	border-radius: 3px;
    }

    清空浏览器,刷新文章,代码块变为

  5. 这步可选可不选,虽然第4步后,代码块可观性已足够了,我想让代码块统一颜色,不要有其他颜色。那么还是在流程3中的文件中搜索.crayon-c,然后找到后,将它的[color:#7f7f7f !important]中的!important去掉,看下面的语句,基本结构都一致的,也要全部将!important去掉,直到这里,然后在文档的最后面添加语句
    .crayon-code{
    	color:#c7254e !important;//文字颜色,你自己定义
    }
    
    .crayon-code>span{
    	color:#c7254e !important;
    }

    添加完后,清空浏览器,刷新文章,就能得到这样的代码块了alt+6


若觉得文章不错的话,请留言让我知晓。 🙂

您或许感兴趣

[2017-10-01]IE/Edge浏览器元素设置position:fixed后滚动屏幕闪跳

发表评论

电子邮件地址不会被公开。