修改 WordPress 的 SyntaxHighlighter 实现圆角和阴影效果

对于编码/技术博客来说，SyntaxHighlighter代码高亮显式插件必不可少。

以本站为例，将代码高亮的显式风格修改成圆角带阴影效果的方法是，在当前theme的style.css文件中添加下面的CSS定义即可：

1
2
3
4
5
6
7
8
9
.syntaxhighlighter{
    padding: 10px 0 !important;
    box-shadow: 1px 1px 3px #ccc;
    -webkit-box-shadow: 1px 1px 3px #ccc;
    -moz-box-shadow: 1px 1px 3px #ccc;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

如果你装了JetPack插件，则可以直接在Appearance下面的Edit CSS中添加上述定义，JetPack会将Appearance/Edit CSS中添加的内容，于theme的Style.css加载完毕后立即加载，这样不管你切换什么主题，Edit CSS中的内容都会一并有效，免去了切换/升级theme后定义消失的问题。

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true