[Bug report] Line numbers do not match code

vuepress / core

Vue-Powered Static Site Generator

https://vuepress.vuejs.org

MIT License

2.29k stars 925 forks source link

[Bug report] Line numbers do not match code #124

Closed KnorpelSenf closed 3 years ago

KnorpelSenf commented 3 years ago

Bug report

Description

When using a code snippet in markdown, column with the line numbers on the left does not match the code block. This can be observed here: https://vuepress2.netlify.app/reference/default-theme/config.html#sidebar

Steps to reproduce

Use a code block, i.e.

// code here

Expected behavior

The line numbers are aligned with the code.

Screenshot

Environment info

Browser: Chrome and FF, but it's worse on Chrome

meteorlxy commented 3 years ago

It looks good here.

Please provide more context, e.g. OS, Browser version, etc.

KnorpelSenf commented 3 years ago

$ uname -a
Linux steffens-pc 4.19.0-16-amd64 #1 SMP Debian 4.19.181-1 (2021-03-19) x86_64 GNU/Linux
$ google-chrome --version
Google Chrome 90.0.4430.93 
$ firefox --version
Mozilla Firefox 78.10.0esr

It works well on Android 10 (Chrome), and on Windows 10 (both Chrome and Firefox).

Could it be related to the fonts that are installed on the system?

meteorlxy commented 3 years ago

Could it be related to the fonts that are installed on the system?

That might be the reason.

Here's the related styles. We may need to provide a fallback for linux.

https://github.com/vuepress/vuepress-next/blob/e971d6aa216102befaa387e062d49b3632fe579c/packages/%40vuepress/theme-default/src/client/styles/code.scss#L156-L159

I don't hava a linux pc. Could you help for this?

KnorpelSenf commented 3 years ago

@meteorlxy I opened the PR #125