hexo-mater主题不显示行号问题

使用mater主题的时候，你也许会遇到代码不显示行号，影响一定的阅读或者学习效果。
你的是不是这样的呢？

你是不是更加想要这样的效果：

其实操作也很简单，那么如何添加代码显示行号呢？
在网上看了很多教程，也配置了很多，但是都未果。本人使用的hexo版本为5.4.0^，网上很多降低版本不能根本上解决问题。最后结合官方教程以及通过观察别人的博客,控制台看其他人的css、js文件,发现是主题本身就没有相应的css代码，所以即使设置改回来了，依然不能达到目的。由于主题并没有给出这个效果，因此我们需要增加相应的代码来解决问题。
首先你要找到你的博客根目录，结构应该是这样的：

1.在主题下的source/css/matery.css下添加如下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;
  }

保存，然后依次执行命令hexo clean，hexo s。
OK，大功告成。