Hexo Next 主题代码块显示语言名字

发表于 阅读次数：

修改_config.next.yml 文件，取消 custom_file_path 中style和 postMeta 的注释。

在 source/_data/ 文件夹中新建 post-meta.njk 文件，添加如下代码：

source/_data/post-meta.njk
<script>
    var elements = document.querySelectorAll('figure');
	for (var i = 0; i < elements.length; i++) {
		var lang = elements[i].getAttribute("class");
		if (lang != null ) {
		lang = lang.substr(10);
		}
		elements[i].setAttribute("data-language", lang);
	}
</script>

根据_config.netx.yml 中配置的代码渲染选项在 styles.styl 中添加代码：

source/_data/styles.styl
figure[class*=highlight]:before {
  color: var(--t-l);
  content: attr(data-language);
  font-size: 1.9em;
  font-weight: 700;
  opacity: .15;
  position: absolute;
  right: .3rem;
  top: .1em;
  text-transform: uppercase;
}
source/_data/styles.styl
pre[class*=language-]:before {
  color: var(--t-l);
  content: attr(data-language);
  font-size: 1.9em;
  font-weight: 700;
  opacity: .15;
  position: absolute;
  right: .3rem;
  top: .1em;
  text-transform: uppercase;
}

因为前端方面不太熟，目前没有太多时间研究，所以样式就先这样。所有代码块都显示感觉有那么一点点乱，以后有时间的话再来研究移动鼠标过去时显示语言。

参考