为上传后的markdown文章优化代码显示

说明

本人通过为知笔记撰写markdown文章, 再通过为知笔记将文章推送至cnblog. 推送后发现最终页面上显示的代码效果不好:

1. 没有序号
2. 没有背景

增加代码行号

1. 申请支持js代码
   在博客侧边栏框公告处申请支持js代码.
2. 将以下代码添加到页脚HTML代码(添加到页脚是因为js一般需要在整个页面加载完后运行)
   

   <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/highlightjs-line-numbers.min.js"></script>
   
   <script>
   hljs.initHighlightingOnLoad();
   hljs.initLineNumbersOnLoad();
   </script>

3. 使用以上js可以为代码增加行号, 但会出现表格框, 且部分细节需要微调.为此需要在页面定制CSS代码处添加以下代码
   

   #cnblogs_post_body table, .cnblogs-post-body table {
   
     border: none !important; /*!important来强制覆盖,避免优先级冲突*/
     border-collapse: collapse; /*合并模式，相邻单元格共享边框*/
     word-break: break-word;
   }
   
   
   #cnblogs_post_body th, #cnblogs_post_body td, .cnblogs-post-body th, .cnblogs-post-body td {
   
     border: none !important;
     padding: 0;
   }
   
   
   #cnblogs_post_body td, .cnblogs-post-body td {
   
      min-width: 25px; /*代码与行的距离*/
   }
   
   .cnblogs-markdown .hljs {
     border: none !important;
   }
   
   .postCon {
     font-size: 15px;
   }
   
   .cnblogs-markdown .hljs, .cnblogs-post-body .hljs {
     font-family: "Consolas",sans-serif !important;
     font-size: 15px! important;
   }
   
   .cnblogs-markdown .hljs, .cnblogs-post-body .hljs {
     font-family: "Courier New",sans-serif!important;
     font-size: 15px!important;
     line-height: 1.5!important;
     padding: 5px!important;
   }

设置代码背景

首先在highlight官网下载highlight.js. 然后在下载后的文件中选择一个主题打开文件后, 将其中代码复制到页面定制CSS代码处, 以下代码主题为rainbow. 不同主题效果可提前在官网查看.

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #474949;
  color: #d1d9e1;
}


.hljs-comment,
.hljs-quote {
  color: #969896;
  font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-type,
.hljs-addition {
  color: #cc99cc;
}

.hljs-number,
.hljs-selector-attr,
.hljs-selector-pseudo {
  color: #f99157;
}

.hljs-string,
.hljs-doctag,
.hljs-regexp {
  color: #8abeb7;
}

.hljs-title,
.hljs-name,
.hljs-section,
.hljs-built_in {
  color: #b5bd68;
}

.hljs-variable,
.hljs-template-variable,
.hljs-selector-id,
.hljs-class .hljs-title {
   color: #ffcc66;
}

.hljs-section,
.hljs-name,
.hljs-strong {
  font-weight: bold;
}

.hljs-symbol,
.hljs-bullet,
.hljs-subst,
.hljs-meta,
.hljs-link {
  color: #f99157;
}

.hljs-deletion {
  color: #dc322f;
}

.hljs-formula {
  background: #eee8d5;
}

.hljs-attr,
.hljs-attribute {
  color: #81a2be;
}

.hljs-emphasis {
  font-style: italic;
}

参考

改进博客园Markdown显示功能: https://www.cnblogs.com/enjoy233/p/cnblogs-markdown-code-display-opt.html

博客园代码黑色主题高亮设置:
https://blog.csdn.net/weixin_33985679/article/details/88912143