silverbulletmd / silverbullet

The knowledge tinkerer's notebook
https://silverbullet.md
MIT License
2.35k stars 169 forks source link

Adding horizontal scrolling functionality to code blocks #909

Open JaredStemper opened 3 months ago

JaredStemper commented 3 months ago

As a recent convert to the silverbullet way of life I noticed that there seems to be no functionality to enable horizontal scrolling on code blocks. Below is an example of current output given the below YAML snippet, and beneath that is an example of this functionality done very well (stackoverflow).

I believe this would be a strong feature to add considering how heavily this tool lends itself to a programming/scripting-heavy user base.

As seen below, the current word wrapping makes reading any longer chunks of code rather cramped. image

Below is an example of code block scrolling done well. stackoverflow

This tool does great work and I'm already a huge fan and working to convert peers and friends over, so thank you for all the hard work!

zefhemel commented 3 months ago

While this would definitely be possible to implement, it's not as trivial as I initially thought, because CodeMirror renders each line of a fenced code block as a separate HTML element. There's nothing that wraps the entire block — otherwise this would just have been a simple CSS tweak.

mjf commented 2 weeks ago

Is there any progress with this issue, please? I also find the wrapping very annoying, especially when on mobile or a small screen. I've found that CodeMirror enables wrapping with an EditorView.lineWrapping extension. For me, the best would be to allow for, e.g.,

```language nowrap
bla bla long line
in case wrapping was enabled by default _vs_ some
`````markdown
```language wrap
bla bla long line to be wrapped

in case it was disabled by default.

If not, I would appreciate at least some space-scoped setting or something alike. Is it possible to achieve something like that? Thank you.

**Update:** I should have looked into the page source code first instead of beying so naive. I assumed that every logical part of the content (_e.g._, a paragraph, a heading, a code block _etc._) to be contained by an instance of CM or that it is "somehow" passed into an instance of CM by JS or something alike. But it seems that everything is wrapped in a single CM instance, right? That also means that if CM itself does not support enabling or disabling things like wrapping, line numbers etc. on a specific range only (and with counter reset/setting _etc._ in case of, _e.g._, line numbers) this for sure may not have an easy solution (I wanted to ask for toggling line numbers for code blocks too in addition to this). I do not know CM much so I cannot tell personally what the solution could be. Could you please clarify the whole topic a little more? Thanks.

/me Confused! :smile: