指定自定义字体时，代码块的行号和实际行的高度会不一样导致错位

lopo12123 commented 1 month ago

Issue Checklist

[X] I am using NexT version 8.0 or later.
[X] I have already read the Troubleshooting page of Hexo and Troubleshooting page of NexT.
[X] I have already searched for current issues, which does not help me.

Expected behavior

行号和实际行对应

Actual behavior

Links to repository or source code of the blog: https://github.com/lopo12123/lopo12123.github.io
Screenshots:

Steps to reproduce the behavior

添加一个这样的代码块，应该就可以看到错位

Node.js and NPM Information

node -v
v18.16.1

npm -v
9.5.1

yarn -v
3.6.4

Package dependencies Information

+-- @types/node@18.18.5                         
+-- hexo-generator-archive@2.0.0                
+-- hexo-generator-category@2.0.0               
+-- hexo-generator-index@3.0.0                  
+-- hexo-generator-searchdb@1.4.1               
+-- hexo-generator-tag@2.0.0                    
+-- hexo-renderer-ejs@2.0.0
+-- hexo-renderer-marked@6.2.0
+-- hexo-renderer-stylus@3.0.0
+-- hexo-server@3.0.0
+-- hexo-theme-next@8.19.1
`-- hexo@7.0.0

Hexo Configuration

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: lopo
subtitle: '霓为衣兮风为马'
description: 'find an anchor to stop drifting...'
keywords:
author: lopo
language: zh-CN
timezone: Asia/Shanghai

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://lopo12123.github.io
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: false # Set to 'false' to remove trailing 'index.html' from permalinks
  trailing_html: false # Set to 'false' to remove trailing '.html' from permalinks

# Directory
source_dir: source
public_dir: docs  # public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true
relative_link: false
future: true
syntax_highlighter: prismjs  # highlight.js
highlight:
  enable: false
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: true
  preprocess: true
  line_number: true
  tab_replace: ''

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: ''

search:
  path: search.xml
  field: post
  content: true
  format: html

NexT Configuration

// 设置了一下代码高亮的配置
codeblock:
  # Code Highlight theme
  # All available themes: https://theme-next.js.org/highlight/
  theme:
    light: default  # atom-one-light
    dark: stackoverflow-dark  # atom-one-dark
  prism:
    light: prism  # prism-tomorrow
    dark: prism  # prism-tomorrow
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Available values: default | flat | mac
    style: mac
  # Fold code block
  fold:
    enable: true
    height: 300

// 加了自定义样式
custom_file_path:
  style: source/_data/styles.css

// 样式里设置了字体
code {
    font-family: 'JetBrains Mono', monospace !important;
}

Other Information

No response

stevenjoezhang commented 1 week ago

你的网站上似乎没有问题

lopo12123 commented 6 days ago

现在好像确实没这个问题了，当时确实是像我的截图中那样有错位，可能是其他原因导致的吧。＞﹏＜

stevenjoezhang commented 6 days ago

确实很怪，行号的样式和代码应该是完全一样的。如果之后发现问题又出现了，欢迎继续回复～

next-theme / hexo-theme-next

指定自定义字体时，代码块的行号和实际行的高度会不一样导致错位 #778