mdBook icon indicating copy to clipboard operation
mdBook copied to clipboard

Support line numbers for any block of code

Open dallascao opened this issue 5 years ago • 6 comments

Hi,

I am not able to make the code line numbers show. Here is the book.toml file. And I am using the Windows binary.

I am trying to follow the instructions here: https://rust-lang.github.io/mdBook/format/config.html

Here is an example of the rendered page: https://easiest.studio/php/zh-cn/chapter_1.html

Thanks!

Dallas

[book] authors = ["曹首光"] language = "zh-cn" multilingual = false src = "src"

[output.html] default-theme = "light" preferred-dark-theme = "navy"

[output.html.fold] enable = false level = 0

[output.html.playground] editable = true copyable = true copy-js = true line-numbers = true

dallascao avatar Aug 25 '20 13:08 dallascao

The playground only supports Rust. I do not see any Rust code on your sample page.

ehuss avatar Aug 25 '20 15:08 ehuss

Thanks for the explanation Ehuss and thank you for the great work!

dallascao avatar Aug 27 '20 01:08 dallascao

Is there any plan to support adding support line numbers for other languages apart from Rust

Celthi avatar Jul 14 '22 15:07 Celthi

Some rationale behind this: if the intent of mdbook is writing books dealing primarily with source code, then the need for having numbered code examples is great. Take the following for example:

On line 42, we....

With the current level of support, we are expecting the reader to count 42 lines by hand or input the text into an editor and determine which is line 42. Neither of these is ideal. I'm all ears for alternative solutions that resolve this issue.

jmgilman avatar Sep 13 '22 16:09 jmgilman

I was looking into the source code to figure out how that works (not sure if this was mentioned in the docs but if it was then I missed it), I found this test which asserts that any arg passed in the code block generates a CSS class.

Since that is the case, isn't adding line numbers rather straight forward? A developer's famous last words I know.

I'm not really a CSS person but we could perhaps do something similar to this if an argument show_line_numbers is present?

AntoniosBarotsis avatar Jan 11 '23 19:01 AntoniosBarotsis

It would be much nicer if the line numbers are shown without the need for the code to be editable.

ghost avatar May 14 '23 16:05 ghost

Heya, I've roughly implemented this:

image

image

Currently I use it with additional-js.

Tested:

  • :white_check_mark: code copy button

  • :white_check_mark: copy using Ctrl C

  • :white_check_mark: hidden lines

  • :white_check_mark: theming (through doc/theme/highlight.css):

    image

The implementation could probably be cleaned up some more -- I cloned https://github.com/wcoder/highlightjs-line-numbers.js and worked backwards (swapping JS + table elements for CSS + div).

But also, maybe swapping highlightjs for syntect for static generation is a more favourable option.

azriel91 avatar Dec 02 '23 01:12 azriel91