.CodeMirror-lines, .markdown-preview-view{
max-width: var(--view-max-width);
margin: auto;
}
I found this can move the scrollbar to the edge of editor mode. But I cann’t do anything to the preview mode.
btw: how do you hide the scrollbar. I am newb…
Thanks, folks, for the inspiration to implement this.
This selector chooses only the contents of both source and preview, as far as I can tell:
.CodeMirror-scroll, .markdown-preview-section {
max-width: 40rem;
margin: auto;
}
3 Likes
That solved for me.
.CodeMirror-lines, div.markdown-preview-section {
max-width: 800px;
margin: auto;
}
FYI this will likely be less of a problem in 0.7!
2 Likes
While selecting the whole page there was a glitch, added ‘selected’ div as well.
.CodeMirror-lines, .CodeMirror-selected, .markdown-preview-section {
max-width: 700px;
margin: auto;
}
2 Likes
Which font are using? It looks really cool!
I was responding to the OPs example. In the photo, I liked the font.
My Font:
Header: Avenir (It’s clean and looks cool)
Body: Open Sans (its easy to read)
So this is a nice solution for the preview mode; I can choose the max-width of the text, and the scroll bar is on the far right. However, now, in source view I have two scroll bars which is pretty ugly. Is there any way for edit mode to have this same feature (user specified width, scroll bar on the far right)?
.CodeMirror-scroll, .markdown-preview-section {
max-width: 40rem;
margin: auto;
}
This thread represents quite an old problem + solution. Have you tried the “Readable line length” setting in Preferences → Editor?
1 Like
I don’t know if this is an intended behavior or design prerogative, but should the “readable line length” take into consideration the font size used in the editor/preview mode? I’m using a larger font because I’m getting a little blind, but due to the extreme width limitations in line length, I find myself with lines that have very few words.
1 Like
Good point —tagging in @Silver for clarification!
I’m having a disproportionate amount of trouble selecting the sapan inside a
“CodeMirror-line”
<pre class=" CodeMirror-line " role="presentation">
<span role="presentation"
style="">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||~
</span></pre>
The CSS above is suppose to brake at the “~”.
I’m a screenwriter and my notes requiere a limit on characters per line.
I’ve tried this so far:
.CodeMirror-line span{
max-width: 570px;
}
This shouldn’t be this hard. I’m definitely doing something wrong.
Klaas
March 7, 2021, 5:51am
33
@KauDerK : if I understand your issue, you could try temporarily disable the span by deleting the relevant <
, make your alteration, then put the <
back in.
1 Like
I’m sorry I don’t totally follow, I’m that skilful at CSS.
" deleting the relevant <
" do you mean: the actual CSS snippet on the inspector window?
Klaas
March 7, 2021, 9:20am
35
@KauDerK : there is no snippet in the inspector window. But that is not what I mean anyway.
In the code you posted there is <span role
: delete the <
, make your amendment, then put <
back.
If that does not make the selecting any easier, take out the <
in <pre class
too, then put it back.
Hi everyone,
Trying Obsidian right now, getting some customization setup and I got into this amazing conversation about the line width with the scrollbar.
I believe a better solution would be changing the default –file-line-width property from body element, as follows:
body {
--file-line-width: 1100px;
}
This will keep the scrollbar on the right place, while it will make the content width larger.
Sorry for reviving the post, but I thought this could help somebody.
Thanks!
7 Likes