博客园美化/定制，给代码块增加行数，更改代码块风格，自动生成目录，点击目录平滑滚动

代码块增加行数需要申请js权限，根据自己的需要申请。
我只做了简单的样式修改，主要是因为博客园默认的markdown格式太原始了。
可以直接使用下面的代码，也可以在下面找一个自己喜欢的风格对应的css文件：
https://highlightjs.org/static/demo/

样例：https://www.cnblogs.com/thepoy/p/14573822.html

下面有代码可能不是最新，最新代码请去 https://gitee.com/thepoy/cnblogs 获取

页面定制 CSS 代码

展开查看全部css

:root {
    scroll-behavior: smooth;
}
 
body {
    font-size: 1rem;
}
 
h2 {
    font-size: 3rem;
}
 
#main {
    display: flex;
    max-width: 1600px;
    margin: 20px auto 0;
    clear: both;
}
 
#mainContent {
    flex: 0 1 1280px;
    max-width: 1280px;
}
 
#topics .postTitle {
    font-size: 2.6rem;
    border-bottom: groove;
    border-color: #cecece;
    font-weight: 900;
}
 
/* 标题 */
h2,
h2,
h3,
h4,
h5,
h6,
p {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}
 
#cnblogs_post_body h2,
#cnblogs_post_body h2 {
    text-align: center;
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
}
 
#cnblogs_post_body h2 {
    font-size: 2.4rem;
}
 
#cnblogs_post_body h3 {
    font-size: 1.8rem;
    font-family: "PingFang SC", sans-serif;
}
 
 
#cnblogs_post_body h4 {
    font-size: 1.4rem;
    font-family: "PingFang SC", sans-serif;
}
 
#cnblogs_post_body h2,
#cnblogs_post_body h2,
#cnblogs_post_body h3 {
    font-style: normal;
}
 
#cnblogs_post_body h2,
#cnblogs_post_body h2,
#cnblogs_post_body h3,
#cnblogs_post_body h4,
#cnblogs_post_body h5,
#cnblogs_post_body h6,
#cnblogs_post_body p {
    position: relative;
}
 
#cnblogs_post_body h2,
#cnblogs_post_body h2,
#cnblogs_post_body h3,
#cnblogs_post_body h4,
#cnblogs_post_body h5,
#cnblogs_post_body h6,
#cnblogs_post_body p,
#cnblogs_post_body pre {
    width: inherit;
}
 
#cnblogs_post_body h2::after {
    content: "";
    display: block;
    width: 6.25rem;
    height: 1px;
    margin: 0 auto;
    border-bottom: 1px solid #2f2f2f;
}
 
#cnblogs_post_body h5 {
    font-size: 1.2rem;
}
 
/* img样式 */
#cnblogs_post_body img {
    display: block;
    box-shadow: 0px 8px 16px 1px hsla(0, 0%, 0%, 0.3);
    border-radius: 5px;
    margin: 1.5rem auto;
    max-width: 100%;
    vertical-align: middle;
    image-orientation: from-image;
}
 
/* 代码样式 */
.cnblogs-markdown .hljs,
.cnblogs-markdown .hljs-subst {
    display: block;
    overflow-x: auto;
    padding: .5em;
    background: #282828;
    color: #ebdbb2;
}
 
.cnblogs-markdown code,
.cnblogs-post-body code {
    color: #c7254e;
    background-color: #f2f2f2;
    font-family: Consolas, Monaco, "Courier New", Courier, "Andale Mono", "Ubuntu Mono", monospace !important;
    font-size: 12px !important;
}
 
.cnblogs-markdown code.hljs {
    display: block;
    font-family: Consolas, Monaco, "Courier New", Courier, monospace !important;
    font-size: 10pt !important;
    overflow-x: auto !important;
    padding: 0.5em !important;
    scrollbar-width: thin !important;
    -moz-tab-size: 4 !important;
    tab-size: 4 !important;
    background-color: #282828 !important;
}
 
.hljs-deletion,
.hljs-formula,
.hljs-keyword,
.hljs-link,
.hljs-selector-tag {
    color: #fb4934
}
 
.hljs-built_in,
.hljs-emphasis,
.hljs-name,
.hljs-quote,
.hljs-strong,
.hljs-title,
.hljs-variable {
    color: #83a598
}
 
.hljs-attr,
.hljs-params,
.hljs-template-tag,
.hljs-type {
    color: #fabd2f
}
 
.hljs-builtin-name,
.hljs-doctag,
.hljs-literal,
.hljs-number {
    color: #8f3f71
}
 
.hljs-code,
.hljs-meta,
.hljs-regexp,
.hljs-selector-id,
.hljs-template-variable {
    color: #fe8019
}
 
.hljs-addition,
.hljs-meta-string,
.hljs-section,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-string,
.hljs-symbol {
    color: #b8bb26
}
 
.hljs-attribute,
.hljs-bullet,
.hljs-class,
.hljs-function,
.hljs-function .hljs-keyword,
.hljs-meta-keyword,
.hljs-selector-pseudo,
.hljs-tag {
    color: #8ec07c
}
 
.hljs-comment {
    color: #928374
}
 
.hljs-link_label,
.hljs-literal,
.hljs-number {
    color: #d3869b
}
 
.hljs-comment,
.hljs-emphasis {
    font-style: italic
}
 
.hljs-section,
.hljs-strong,
.hljs-tag {
    font-weight: 700
}
 
#topics .postBody blockquote {
    padding: 0.5rem 1rem;
    border-left: 8px solid #2f845e;
    background-color: rgba(66, 185, 131, 0.1);
    border-radius: 4px;
}
 
#topics .postBody blockquote p {
    color: #282c34;
}
 
/* 代码行 */
 
.hljs-ln {
    max-width: 100% !important;
}
 
#cnblogs_post_body td {
border: none;
border-collapse: collapse;
padding: initial;
min-width: initial;
}
 
#cnblogs_post_body td.hljs-ln-numbers {
    text-align: center;
    color: #ccc;
    border-right: 1px solid #999;
    vertical-align: top;
    padding-right: 5px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
 
#cnblogs_post_body td.hljs-ln-code {
    padding-left: 10px;
}
 
.hljs-ln-n {
    width: max-content;
    display: inline-block;
    padding: 0 3px;
}
 
/* 目录 */
#catalog {
    position: fixed;
    top: 396px;
    width: 220px;
    left: 9%;
    box-shadow: 0px 8px 16px 1px hsla(0, 0%, 0%, 0.3);
    border-radius: 5px;
    background-color: white;
    padding: 5px;
}
 
.catalog {
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.3;
    color: #333;
    list-style: none;
}
 
.catalog.h2 {
    font-weight: 600;
    color: #000;
}
 
.catalog-list .catalog.h2:first-child > a {
    margin-top: 0;
}
.catalog-list .catalog.h2 > a {
    margin: 6px 0;
    padding: 4px 0 4px 21px;
}
.catalog-list .catalog.active a {
    color: #007fff;
    background-color: white;
}
.catalog-list .catalog a {
    display: block;
    position: relative;
    padding: 4px 0 4px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
 
.catalog-list .catalog.h2 > a::before {
    left: 5px;
    margin-top: -3px;
    width: 6px;
    height: 6px;
}
 
.catalog-list .catalog a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -2px;
    width: 4px;
    height: 4px;
    background-color: currentColor;
    border-radius: 50%;
}
 
.sub-list {
    margin: 0;
    padding: 0;
}
 
.catalog-list .catalog.h3 > a {
    padding-left: 36px;
}
 
.catalog-list .catalog.h3 > a::before {
    left: 24px;
}
 
.catalog-list .catalog.h4 > a {
    padding-left: 50px;
    font-size: 0.8rem;
}
 
.catalog-list .catalog.h4 > a::before {
    left: 38px;
}
 
.catalog-list .catalog.h5 > a {
    padding-left: 58px;
    font-size: 0.7rem;
}
 
.catalog-list .catalog.h5 > a::before {
    left: 46px;
    background-color: #a6a6a6;
}
 
.catalog-list a {
    color: initial;
}
 
/* 右下角浮动块 */
#custom-bottom {
    bottom: 20px;
    color: #333;
    font-size: 12px;
    background: #fff;
    box-shadow: 0px 1px 16px 1px hsla(0, 0%, 0%, 0.3);
    padding: 0 4px;
    position: fixed;
    right: 735px;
    border-radius: 30px;
}
 
 
#custom-bottom > div {
    cursor: pointer;
    width: 50px;
    height: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-repeat: no-repeat;
    background-position: 50%;
}
 
#custom-edit {
    border-bottom: 1px solid #eaebec;
    background-image: url(https://gitee.com/thepoy/image-bed/raw/master/cnblogs/icons/edit.svg);
}
 
#custom-edit:hover {
    background-image: url(https://gitee.com/thepoy/image-bed/raw/master/cnblogs/icons/edit-hover.svg);
}
 
#custom-top {
    background-image: url(https://gitee.com/thepoy/image-bed/raw/master/cnblogs/icons/top.svg);
}
 
#custom-top:hover {
    background-image: url(https://gitee.com/thepoy/image-bed/raw/master/cnblogs/icons/top-hover.svg);
}
 
 
#cnblogs_post_body .hljs-ln-code p {
    margin: 0 !important;
}

页脚 HTML 代码(需要js权限)

展开查看页脚HTML代码

<div class="sticky-block-box" id="catalog">
  <div class="catalog-block pure">
    <nav class="article-catalog">
      <div class="catalog-title">目录</div>
      <div class="catalog-body">
        <ul class="catalog-list" style="margin-top:0px;">
        </ul>
      </div>
    </nav>
  </div>
</div>
 
<div id="custom-bottom">
  <div id="custom-edit" class="custom-bottom-box" title="编辑"></div>
  <div id="custom-top" class="custom-bottom-box" title="回到顶部"></div>
</div>
 
<script src="//cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js"></script>
<script>
  $(function() {
    /* markdown模式下为代码加入行号, 调用插件highlightjs-line-numbers.js */
    hljs.initLineNumbersOnLoad();
  });
 
  if (!document.getElementById("topics")) {
    document.getElementById("catalog").remove()
  }
 
  function generateCatalog() {
    let contentBody = document.getElementById('cnblogs_post_body')
 
    let hs = new Array
    for (var i = 0; i < contentBody.children.length; i++) {
      let e = contentBody.children[i]
      switch (e.tagName) {
        case "H2":
          hs.push(e)
          break
        case "H3":
          hs.push(e)
          break
        case "H4":
          hs.push(e)
          break
        case "H5":
          hs.push(e)
          break
        case "H6":
          hs.push(e)
          break
      }
    }
 
    let html = ''
    let curr, last = 0
    hs.forEach((e) => {
      curr = e.tagName[1]
      if (last) {
        if (curr == last) {
          html += "</li>"
          html += '<li class="catalog h' + curr + '">'
          html += '<a href="#' + e.getAttribute("id") + '">' + e.innerText + '</a>'
        } else if (curr > last) {
          html += '<ul class="sub-list">'
          html += '<li class="catalog h' + curr + '">'
          html += '<a href="#' + e.getAttribute("id") + '">' + e.innerText + '</a>'
        } else {
          for (let i = 0; i < last - curr; i++) {
            html += '</ul>'
            html += '</li>'
          }
          html += '<li class="catalog h' + curr + '">'
          html += '<a href="#' + e.getAttribute("id") + '">' + e.innerText + '</a>'
        }
      } else {
        html += '<li class="catalog h' + curr + '">'
        html += '<a href="#' + e.getAttribute("id") + '">' + e.innerText + '</a>'
      }
      last = curr
    })
    for (let i = 0; i < last - 2; i++) {
      html += '</ul>'
      html += '</li>'
    }
    return html
  }
 
  let catalogList = $('.catalog-list')[0]
  let html = generateCatalog()
  if (html) {
    catalogList.innerHTML += generateCatalog()
  } else {
    document.getElementById("catalog").remove()
  }
 
  let titleEle = document.getElementsByClassName('postTitle')[0]
 
  /* 添加滚动事件，保证目录top不超过正文 */
  window.addEventListener('scroll', winScroll);
  function winScroll(e) {
    if (document.getElementById("catalog")) {
      let bottom = titleEle.getBoundingClientRect().bottom
      if (bottom >= 0) {
        document.getElementById("catalog").setAttribute("style", "top:" + bottom + "px")
      } else {
        document.getElementById("catalog").setAttribute("style", "top: 20px")
      }
    }
  }
 
  $("#custom-bottom").on("click", "#custom-edit", (e) => {
    document.querySelector('a[rel="nofollow"]').click()
  })
 
  $("#custom-bottom").on("click", "#custom-top", (e) => {
    window.scrollTo({
      left: 0,
      top: 0,
      behavior: 'smooth'
    })
  })
</script>