解决主题代码块没有行号的问题

也是看了网上许多的解决方案,因为自己并不是很清楚这个hexo渲染页面详细的原理,所以对于一些基本的解决方案并没有自己的思考。通过观察别人的博客,通过控制台看其他人的css、js文件,终于发现可能是主题本身就没有写这部分,所以即使设置改回来了,还是没有办法实现。

解决方案

1.在主题下的source/css/matery.css下添加如下代码

.line-numbers-rows {
    border-right-width: 0px !important;
}

.line-numbers {
    padding: 1.5rem 1.5rem 1.5rem 3.5rem !important;
    margin: 1rem 0 !important;
    background: #272822;
    overflow: auto;
    border-radius: 0.35rem;
    tab-size: 4;
}

2.在主题下的source/libs/prism/prism.css中添加如下代码

pre[class*="language-"].line-numbers {
 position: relative;
 padding-left: 3.8em;
 counter-reset: linenumber;
}

pre[class*="language-"].line-numbers > code {
 position: relative;
 white-space: inherit;
}

.line-numbers .line-numbers-rows {
 position: absolute;
 pointer-events: none;
 top: 0;
 font-size: 100%;
 left: -3.8em;
 width: 3em; /* works for line-numbers below 1000 lines */
 letter-spacing: -1px;
 border-right: 1px solid #999;

 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;

}

 .line-numbers-rows > span {
  pointer-events: none;
  display: block;
  counter-increment: linenumber;
 }

  .line-numbers-rows > span:before {
   content: counter(linenumber);
   color: #999;
   display: block;
   padding-right: 0.8em;
   text-align: right;
  }