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

最新推荐文章于 2024-08-31 09:00:00 发布

老叭美食家

最新推荐文章于 2024-08-31 09:00:00 发布

阅读量665

点赞数 3

文章标签： hexo

本文链接：https://blog.csdn.net/weixin_45453133/article/details/120853394

版权

本文档介绍了如何为使用Hexo主题Matery的博客添加代码块行号。首先确认你的Hexo版本为5.0.0或以上。问题在于主题本身可能未包含行号显示功能。解决方案包括在`source/css/matery.css`和`source/libs/prism/prism.css`中添加特定的CSS代码来实现行号显示。确保按照提供的代码片段进行修改。

摘要由CSDN通过智能技术生成

前言

本人使用的hexo版本为5.0.0^
在这里插入图片描述
另外，拉取的最近提交的主题代码，如果版本的不一样的话有很有可能无法解决问题。所以请先明确自己情况再对症下药。

最后，基本的问题可以看主题的readme文档,里面写的都很清楚。
https://github.com/blinkfox/hexo-theme-matery

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

也是看了网上许多的解决方案,因为自己并不是很清楚这个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;
  }