Homepage    |    GitHub    |    API    |    Wiki    |    FAQ

Custom Css for note editor (markdown)

Hello. How can I write a custom .css style sheet only for the note editor? I tried to make one but it applied to the wrong side (rendered). I would like the .css to be applied only to the editor section. I’d like to keep the aritim dark theme if possible. By the way I am on Windows 10, desktop app 1.0.227

This is the css i’m trying to use

Screenshot

There are 2 stylesheets available to customize the app:

  1. userstyle.css - this one changes the rendered markdown (looks like this is what you edited)
  2. userchrome.css - this affects the rest of the app – tool bars, notebook lists, settings, etc + the markdown editor.

Since changes to userchrome.css will change everything, you might want to nest your custom css in the .ace_content class. That should make your changes apply only to the markdown editor.

For reference, both of these stylesheets are accessible from Settings > Appearance > Show Advanced Settings. Also to note, as far as I know, there is not a way to customize the WYSIWYG editor yet.

1 Like

@karma12gaming

I do not know how much you have experimented with Joplin’s settings but be aware that there are actually TWO markdown code editors in Joplin, not including WYSIWYG; the default Ace editor and the CodeMirror editor (Options > Note > Use CodeMirror as the code editor (WARNING: BETA). The css classes are different for each.

From what I have seen the Ace editor classes start .ace_ whilst the CodeMirror editor ones start .cm-. Furthermore you cannot just change the initial letters of a class to “port” it to the other editor. For example changing a link colour for Ace uses .ace_underline whereas for CodeMirror it is .cm-link, .cm-url.

So before you customise anything it may be best to decide which editor you prefer. Otherwise if you later change the editor you will have to start all over again. I suppose that it’s possible to create a single userchrome.css file that covers both editors but that seems like an awful lot of work…

4 Likes

Thank you Amanda. This is exactly what I was looking for.

Thanks for the warning. I did not know there were two editors. Is there any documentation explaining the difference between the two? I’m using Joplin primarily for loose note taking. I’ve been writing the markdown myself, so I haven’t been using any advanced editing features.

There isn’t any documentation that I am aware of and the CodeMirror editor has only recently been introduced as a beta. You use both exactly the same so swapping between them should not cause you any problems in using them (some advanced keyboard shortcuts will not be the same but you say you do not use any of the advanced features).

Basically they both assist with highlighting the markdown code you type, to try to make the markdown clearer, but they present it slightly differently. For instance the markdown # indicates the following text will be a header <h1>. Ace editor turns the text blue to make it stand out. CodeMirror however turns the text blue and bold and also makes it larger so it is slightly more evident that what you have just typed in markdown is a header. You can swap between them and look at the differences and see what one you prefer.

Some posts I have seen seem to indicate that @laurent may be minded to swap the editor to CodeMirror, but nothing is certain until it happens!

The big difference comes if you want to customise the css that drives the highlighting. They each use completely different css element names. Therefore a custom css for Ace will not work with CodeMirror and vice versa. That’s why I suggested you decide what one you prefer before embarking on the long voyage of css customising !!! You may actually find that the CodeMirror editor presents the markdown you type in a way that means you will not actually need to customise anything…

2 Likes

Thank you. I think I will go with the CodeMirror. As soon as I changed it, my CSS style started working (at least a little bit) on the editor. :blush:

Does anyone have the default CodeMirror CSS so I can know what the classes are?

I am not aware of one and using a custom stylesheet is not a supported feature, so I cannot see there being any reason for any of the devs to collate a list of the css elements used.

The easiest way is to open the Development tools in Joplin (Help > Toggle development tools) and use the “picker” ([1] in picture) to select an item you are looking to customise. This will show a flyout ([2] in picture) and the code ([3] in picture) that can help you to determine the element / class you wish to modify.

2 Likes

@dpoulton’s ideas for how to discover the CSS are your best bet. I documented a couple of the classes in this comment: Share your CSS

Let me know if you are stuck on anything in particular.

1 Like

Thanks everyone I was able to style Code Mirror. Here’s the CSS if anyone wants it. I’m using Aritim Dark theme with it.