Trilium: FR: Remove line numbers from markdown

[gerroon]

Hi

It would be very nice if the markdown source page does not have line numbers. It looks ugly at least to me. In fact line numbering should be optional for the source

see the image please

[jkurei]

This is easy to fix with custom CSS:

.CodeMirror-gutters,
.CodeMirror-gutter.CodeMirror-linenumbers,
.CodeMirror-linenumber.CodeMirror-gutter-elt {
    display: none;
}

(Create a CSS note and add the attribute appCss (label attribute, no value needed))

Remove the first one line if you want the gutter but not the line numbers, for lint markers or just visual cue:

.CodeMirror-gutter.CodeMirror-linenumbers,
.CodeMirror-linenumber.CodeMirror-gutter-elt {
    display: none;
}

Not saying it shouldn't also be an option, but this functionality gives Trilium a lot of flexibility.

[jkurei]

If @zadam thinks this should actually be an option I'd be happy to lend a hand.

[zadam]

For now I'd keep this on an @appCss customization. Thank you for giving a helpful answer!

[gerroon]

I am using docker and I do not know how to do this with docker

[zadam]

This is no different in docker. Just create a code note of type CSS, put the content jkurei mentioned, create label "appCss" (no value) and that's it. Actually you'll need to refresh the app - just F5 (or CTRL-R).

[gerroon]

Ahh ok I misunderstood, I thought this needed to be in the code folder

Ok I thought I understood this but I do not :(

I added a note with css, then added the attribute and put the lines in the code above.

But how does that affect my Python or MD files? I am sorry man I know jack shit about web or js development.

You realize not everyone understands this stuff, I bet most of your users wont.

[zadam]

This CSS code is loaded into the app (did you reload with F5 ?) and is applied to the whole page - including python or MD files.

You realize not everyone understands this stuff, I bet most of your users wont.

My approach here is that basic usage of the app doesn't require any coding skills. If you want something non-standard (as is currently not displaying line numbers), then this is possible, but you will probably need to understand how Trilium works and also bit of web coding skills.

[gerroon]

Ok thanks, F5 was the key.

Can I use a single note just for app wide customizations?

[zadam]

Can I use a single note just for app wide customizations?

Yes.

[gerroon]

thanks

Ok how about if I want line numbers for my .py but not for my .md files?

[zadam]

Each note type has special "mime" classes in DOM so you can distinguish .py from .md in CSS selectors to apply the above style to only ones you want. You can use you browser's DOM inspector to find specific classes you need to use.

[gerroon]

Ok thanks, that is above my knowledge of this stuff, but good to know it is possible

[jkurei]

@gerroon I'll try to get it done for you; it's interesting to me also, I wanna customize a few details that would be dependent on filetype.

@zadam I can't find the mime type in the DOM, and querying document.querySelectorAll(".py") or document.querySelectorAll(".python") yields nothing either. Is it posible that this funcionality was removed or something? I'd be glad to help you with it if it's missing.

[zadam]

This has been added in 0.28 so you need to have that.

Classes are created automatically from the file type mime type - for python it's "mime-text-x-python" (coming from mime type "text/x-python").

[jkurei]

oh, now I see it. sadly that class is only applied to the node in the tree, and not the codemirror component or the note editor, so making mime type-aware CSS is harder or impossible, am I right?

I'm on 0.28.3 by the way.

[zadam]

You are right, I didn't realize they are only in the tree. I just added them on the whole body for currently loaded note.

[jkurei]

Ok, now this works for me:

.mime-text-x-markdown .CodeMirror-gutters,
.mime-text-x-markdown .CodeMirror-gutter.CodeMirror-linenumbers,
.mime-text-x-markdown .CodeMirror-linenumber.CodeMirror-gutter-elt {
    display: none;
}

I had to checkout the master branch to get this change. It's probably best to wait until it's on stable, no?

@zadam I was expecting you to add the class to #note-detail-wrapper or something like that. I guess this way we can easily use it from everywhere, for instance to hide buttons that some plugins may add only for certain filetypes...

[zadam]

Yeah, it would be better to wait for stable or at least beta.

Originally I wanted to put it on #note-detail-wrapper as you say, but then e.g. you might want to style a title (which is outside of this class) or something similar. Putting it on body gives you most flexibility I think.

[zadam]

mime types on the body has been released in 0.29

[gerroon]

0.30.1-beta and the gutter line numbers are back in markdown (the offered fix does not work) :(