search

YunYouJun / hexo-theme-yun

☁️ A fast & light & lovely theme for Hexo. 一个对可爱自以为是的 Hexo 主题。
https://yun.yunyoujun.cn
MIT License
1.38k stars 167 forks source link

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

Closed zsbai closed 4 months ago

zsbai commented 4 months ago

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

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

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

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

Expected behavior 左侧宽度固定

Desktop (please complete the following information):

Smartphone (please complete the following information):

YunYouJun commented 4 months ago

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 4 months ago

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 4 months ago

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

zsbai commented 4 months ago

此前基于 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 4 months ago 
# 关闭 highlight
highlight:
  enable: false
# 启用 prism
prismjs:
  enable: true
  preprocess: true
  line_number: false
  tab_replace: ''

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

zsbai commented 4 months ago

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