[Bug]: 代码块字体变成宋体 & H1等标签居右

everfu / hexo-theme-solitude

An elegant Hexo theme that supports lazy loading, PWA, Latex, and multiple commenting systems. 一款设计师风格的 Hexo 主题，支持懒加载、PWA、Latex以及多种评论系统。

https://solitude.js.org

MIT License

633 stars 55 forks source link

[Bug]: 代码块字体变成宋体 & H1等标签居右 #187

Closed Rean-Schwarze closed 6 months ago

Rean-Schwarze commented 6 months ago

前置确认

[X] 我确认我运行的是最新版本的主题，并且安装了所需的依赖，在FAQS中也未找到类似问题。

⚠️ 搜索issues中是否已存在类似问题

[X] 我已经搜索过issues和disscussions，没有跟我遇到的问题相关的issue

操作系统类型?

Windows

运行的Hexo版本是?

Hexo 7.0.0

你所使用的主题版本是稳定/最新?

稳定版（main）

问题描述 😯

如图所示，在官方的演示网站上同样存在代码块字体变宋体的问题；标签居右的原因未知，使用默认主题设置的时候仍然存在这个问题

终端日志 📒

No response

everfu commented 6 months ago

标签居右是更换了 markdown-it 插件

everfu commented 6 months ago

字体需要自定义配置

font:
  font-size: 16px
  code-font-size: 16px
  font-family: '"PingFang SC","Hiragino Sans GB","Microsoft YaHei"'
  code-font-family: 'monospace, monospace'

Rean-Schwarze commented 6 months ago

字体需要自定义配置

font:
  font-size: 16px
  code-font-size: 16px
  font-family: '"PingFang SC","Hiragino Sans GB","Microsoft YaHei"'
  code-font-family: 'monospace, monospace'

如果是默认的配置，这两个地方的字体都是宋体

更改code-font-family第一个字体为consolas，这里的字体可以起作用，但是代码块仍然是宋体

font:
  font-size: 16px
  code-font-size: 16px
  font-family: '"PingFang SC","Hiragino Sans GB","Microsoft YaHei"'
  code-font-family: 'consolas, consolas'

（另外还发现这里有序列表的序号似乎全是1）

标签居右是更换了 markdown-it 插件

这里没太懂，可以详细一点吗

everfu commented 6 months ago

发链接给我

Rean-Schwarze commented 6 months ago

https://rean-schwarze.github.io/p/e042d029/

everfu commented 6 months ago

你电脑没这个字体吧，我这里正常显示

everfu commented 6 months ago

标签靠右需要调整一下配置项，参考一下：

# markdown-it
markdown:
  preset: 'default'
  render:
    html: true
    xhtmlOut: false
    langPrefix: 'language-'
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
  enable_rules:
  disable_rules:
  plugins:
    - '@renbaoshuo/markdown-it-katex'
  anchors:
    level: 2
    collisionSuffix: ''
    permalink: true
    permalinkClass: 'headerlink'
    permalinkSide: 'left'
    permalinkSymbol: ''
    case: 0
    separator: '-'
  images:
    lazyload: true
    prepend_root: false
    post_asset: false
  inline: false

里面使用了ketx插件

Rean-Schwarze commented 6 months ago

字体是有的而且这里的字体显示正常只有下面代码的字体不正常，然后用手机访问能正常显示。。。好怪啊同样的字体配置，用回butterfly主题，可以正常显示

然后居右的问题，调整了配置项还是没有解决附一个控制台信息

everfu commented 6 months ago

是dev分支吧，重新拉一下

everfu commented 6 months ago

清一下缓存

everfu commented 6 months ago

我这里都显示正常的字体

Rean-Schwarze commented 6 months ago

还是不行，不知道哪一环有问题，这里css去掉flex-derection就居左了

Rean-Schwarze commented 6 months ago

字体的话似乎是配置无法影响到最终的css，使用的是默认的monospace

everfu commented 6 months ago

还是不行，不知道哪一环有问题，这里css去掉flex-derection就居左了

打印一下使用的插件 npm ls -dept 0

Rean-Schwarze commented 6 months ago

字体的话可能是edge的锅了默认monospace显示就是不行的。。。但是改solitude/source/css/_global/index.styl的134行为font-family consolas, monospace可以暂时解决

everfu commented 6 months ago

font:
  font-size: 16px
  code-font-size: 16px
  font-family: 'PingFang SC, Hiragino Sans GB, Microsoft YaHei'
  code-font-family: 'monospace, monospace'

标题在右是因为使用了markdown-it插件但没有设置 headerlink，需要加上，permalinkSymbol 可以为 ''

everfu commented 6 months ago

代码字体不对看你自己的配置项