silverbulletmd
Adding horizontal scrolling functionality to code blocks
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.
Below is an example of code block scrolling done well.
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!
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.
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
```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:
There seems to be a cm-lineWrapping class assigned to the content div (div.cm-editor > div.cm-scroller > div.cm-content.cm-lineWrapping), which can be removed as a quick and dirty workaround, but I assume that it can probably be controlled by an argument that is most likely exposed via the JS API of CodeMirror. I'll look into it if I manage to find the time.
I support this, as this would improve the readability of config files tremendously.
