YunYouJun/hexo-theme-yun

代码块左侧宽度不一致[Bug Report]

zsbai opened this issue · 6 comments

zsbai commented

Describe the bug
代码块左侧标号的宽度不一致，貌似会随着代码的行数变化...?
图片

貌似代码行数越少，左侧宽度越宽
图片

手机Safari并没有复现，但是在电脑端 Edge和Firefox都可以复现

To Reproduce
在Mardown中正常插入一个代码块并发布文章

Expected behavior
左侧宽度固定

Desktop (please complete the following information):

  • OS: Windows11

  • Browser Firefox

  • Version 122.0.1

  • Browser Edge

  • Version 121.0.2277.128

Smartphone (please complete the following information):

  • Device: iPhone13Pro
  • OS: iOS15.4.1
  • Browser Safari
YunYouJun commented

hexo-theme-yun 已经进入维护模式，推荐使用 valaxy 与 valaxy-theme-yun。

基于 shikijs 实现了更加完美功能更多的代码高亮。可参见：https://valaxy.site/guide/markdown#%E4%BB%A3%E7%A0%81%E8%A1%8C%E9%AB%98%E4%BA%AE

zsbai commented

hexo-theme-yun 已经进入维护模式，推荐使用 valaxy 与 valaxy-theme-yun。

基于 shikijs 实现了更加完美功能更多的代码高亮。可参见：https://valaxy.site/guide/markdown#%E4%BB%A3%E7%A0%81%E8%A1%8C%E9%AB%98%E4%BA%AE

明白了，我本以为是自己的配置问题，这段时间准备迁移至valaxy，感谢回复！

YunYouJun commented

此前基于 hexo 实现的代码高亮，使用 highlight.js 或 prism，配置繁琐，且需要安装额外插件，同时运行时则很难自定义添加更多功能。
shiki 则仍在活跃更新中，且提供了 transfomer 等很多可自定义的功能。
功能上可以对比 valaxy 的代码高亮示例和 hexo 官网的代码高亮示例。

  • 👍1
zsbai commented

此前基于 hexo 实现的代码高亮，使用 highlight.js 或 prism，配置繁琐，且需要安装额外插件，同时运行时则很难自定义添加更多功能。 shiki 则仍在活跃更新中，且提供了 transfomer 等很多可自定义的功能。 功能上可以对比 valaxy 的代码高亮示例和 hexo 官网的代码高亮示例。

* valaxy: https://valaxy.site/guide/markdown#%E4%BB%A3%E7%A0%81%E8%A1%8C%E9%AB%98%E4%BA%AE

* hexo: https://hexo.io/zh-cn/docs/syntax-highlight

感谢，我其实感觉这个问题貌似不是因为高亮引起的，因为我无论使用highlight还是prism都会出现这个问题，刚才又测试了一下，可能和屏幕宽度有关

YunYouJun commented 
# 关闭 highlight
highlight:
  enable: false
# 启用 prism
prismjs:
  enable: true
  preprocess: true
  line_number: false
  tab_replace: ''

你的样式是没有成功开启高亮时候的效果。

zsbai commented

这就奇怪了，这是我的_config.yml配置，感觉并没有问题，但是样式一直是这样，我之前没有特别在意这个事情，现在才感觉好像不太对
图片