zoukankan      html  css  js  c++  java
  • 修改博客园代码块高亮显示的主题颜色

    博客园(默认编辑器设置为Markdowm)是使用heightlight.js进行代码块高亮的。 因此可以通过下载heightlight.js官网的主题css修改博客园中的代码块高亮颜色。

    修改方法:

    1. 进入heightlight.js官网, 点击demo页面预览, 查看主题效果

    2. 下载页面选择需要的语言并下载

    3. 打开下载的文件, 博客园原本就用的heightlight.js,只需要使用style文件夹里的css即可。

    4. 进入博客园设置 => 页面定制 CSS 代码(选择博客皮肤下方), 将所选主题的css文件内的内容复制进去, 保存。

    5. 此时部分css样式会失效,会被博客园自带样式(带!important的)替换, 需要手动写权重比自带样式大的样式。
      这里列下我修改的,使用的是atom one dark, 字体也修改了下。

        .cnblogs-markdown .hljs,
        .cnblogs-post-body .hljs {
          font-family: Consolas, Monaco, monospace!important;
        }
    
        .hljs-keyword,
        .hljs-selector-tag,
        .hljs-built_in,
        .hljs-name,
        .hljs-tag {
          color: #abb2bf!important;
        }
    
        .cnblogs-markdown code,
        .cnblogs-post-body code {
          background: #282c34!important;
          color: #abb2bf!important;
          font-family: Consolas, Monaco, monospace!important;
        }
    
        .hljs {
          display: block;
          overflow-x: auto;
          padding: 0.5em;
          color: #abb2bf!important;
          background: #282c34!important;
        }
    
        .hljs-comment,
        .hljs-quote {
          color: #5c6370!important;
          font-style: italic!important;
        }
    
        .hljs-doctag,
        .hljs-keyword,
        .hljs-formula {
          color: #c678dd!important;
        }
    
        .hljs-section,
        .hljs-name,
        .hljs-selector-tag,
        .hljs-deletion,
        .hljs-subst {
          color: #e06c75!important;
        }
    
        .hljs-literal {
          color: #56b6c2!important;
        }
    
        .hljs-string,
        .hljs-regexp,
        .hljs-addition,
        .hljs-attribute,
        .hljs-meta-string {
          color: #98c379!important;
        }
    
        .hljs-built_in,
        .hljs-class .hljs-title {
          color: #e6c07b!important;
        }
    
        .hljs-attr,
        .hljs-variable,
        .hljs-template-variable,
        .hljs-type,
        .hljs-selector-class,
        .hljs-selector-attr,
        .hljs-selector-pseudo,
        .hljs-number {
          color: #d19a66!important;
        }
    
        .hljs-symbol,
        .hljs-bullet,
        .hljs-link,
        .hljs-meta,
        .hljs-selector-id,
        .hljs-title {
          color: #61aeee!important;
        }
    
        .hljs-emphasis {
          font-style: italic!important;
        }
    
        .hljs-strong {
          font-weight: bold!important;
        }
    
        .hljs-link {
          text-decoration: underline!important;
        }
    

     将上面代码复制进设置里的页面定制CSS代码, 就可以达到和本页面的代码块一样的主题颜色了。      

    文章来源:https://www.cnblogs.com/ccti7/p/13911708.html

    人最大的问题是总是带着成见去看待人和事!
  • 相关阅读:
    => 运算符
    ASP.NET与Javascript中获取URL信息
    ASP.NET中存取图片到数据库的示例
    在C#中利用DirectX实现声音播放
    使用VS2005 DataSet设计器实现数据访问层
    用C#播放声音文件
    VB.NET中声音的播放
    用C#播放声音文件
    声音播放解决方案(C#)
    Asp.Net音频文件上传和播放
  • 原文地址:https://www.cnblogs.com/liuyanhang/p/15309637.html
Copyright © 2011-2022 走看看