博客园美化 | part01-自定义代码块主题样式

代码块

准备: 博客园主题选择 BlueSky,无需禁用模板默认css

代码样式选择: 选择vs2015 | highlightjs-demo
highlightjs : highlightjs.org | download | GitHub

参考文章: 如何使用highlightjs选择css代码主题

1、复制如下代码到博客园页面定制css代码中

/*
 * Visual Studio 2015 dark style
 * Author: Nicolas LLOBERA <nllobera@gmail.com>
 */

 .hljs {
    background: #1E1E1E;
    color: #DCDCDC;
  }
  
  .hljs-keyword,
  .hljs-literal,
  .hljs-symbol,
  .hljs-name {
    color: #569CD6;
  }
  .hljs-link {
    color: #569CD6;
    text-decoration: underline;
  }
  
  .hljs-built_in,
  .hljs-type {
    color: #4EC9B0;
  }
  
  .hljs-number,
  .hljs-class {
    color: #B8D7A3;
  }
  
  .hljs-string,
  .hljs-meta .hljs-string {
    color: #D69D85;
  }
  
  .hljs-regexp,
  .hljs-template-tag {
    color: #9A5334;
  }
  
  .hljs-subst,
  .hljs-function,
  .hljs-title,
  .hljs-params,
  .hljs-formula {
    color: #DCDCDC;
  }
  
  .hljs-comment,
  .hljs-quote {
    color: #57A64A;
    font-style: italic;
  }
  
  .hljs-doctag {
    color: #608B4E;
  }
  
  .hljs-meta,
  .hljs-meta .hljs-keyword,
  
  .hljs-tag {
    color: #9B9B9B;
  }
  
  .hljs-variable,
  .hljs-template-variable {
    color: #BD63C5;
  }
  
  .hljs-attr,
  .hljs-attribute {
    color: #9CDCFE;
  }
  
  .hljs-section {
    color: gold;
  }
  
  .hljs-emphasis {
    font-style: italic;
  }
  
  .hljs-strong {
    font-weight: bold;
  }
  
  /*.hljs-code {
    font-family:'Monospace';
  }*/
  
  .hljs-bullet,
  .hljs-selector-tag,
  .hljs-selector-id,
  .hljs-selector-class,
  .hljs-selector-attr,
  .hljs-selector-pseudo {
    color: #D7BA7D;
  }
  
  .hljs-addition {
    background-color: #144212;
    display: inline-block;
    width: 100%;
  }
  
  .hljs-deletion {
    background-color: #600;
    display: inline-block;
    width: 100%;
  }


/*更换背景*/
.cnblogs_code_toolbar a:hover, 
.cnblogs_code_toolbar a:link,
.cnblogs_code_toolbar a:visited,
.cnblogs_code_toolbar a:active,
.cnblogs_code_toolbar a:link img,
.cnblogs_code_toolbar a:visited img,
.cnblogs_code_toolbar,
.cnblogs_code,
.cnblogs-markdown pre code { 
    background-color: #23241f !important;
    color: #eee!important;
 }

2、博客代码字体设置

/*博客代码字体设置开始*/
.cnblogs-markdown pre,#cnblogs_post_body pre{
/*控制代码不换行*/
white-space: pre;
word-wrap: normal;
}

#cnblogs_post_body .hljs
{
/*设置字体*/
font-size:15px !important;
font-family:"Consolas", "Courier New", "monospace" !important;
}


.cnblogs_code span{
font-size:16px !important;
font-family:"Consolas", "Courier New", "monospace" !important;
}

代码主题效果:

---

行内代码

.cnblogs-markdown code, .cnblogs-post-body code {
    font-family: "Courier New",sans-serif !important;
    font-size: 12px !important;
    line-height: 20px;
    background-color: #ffffff !important;
    border: 1px solid #fff !important;
    padding: 0 5px !important;
    border-radius: 3px !important;
    line-height: 1.8;
    margin: 1px 5px;
    vertical-align: middle;
    display: inline-block;
    overflow-x: auto;
    color: #f72727;
    font-weight: bold;
}

相关文章

1. 博客园使用highlight.js对代码进行高亮
2. 如何自定义博客园代码高亮主题，同时分享自己使用的黑色主题
3. 前端页面Markdown文档代码块高亮及显示行号

(完)