How to get text highlighting to work and coloring sidebar and notepages

Version Number: 1.7.11
Operating system: Windows 10

Hello Joplin community!:heartpulse: I am a new user for joplin and came from scrivener for book writing, but I cant seem to get basic things like highlighting texts/changing highlighter colors and coloring my note pages or sidebar to work. So that I can come back and see what was important and also to differentiate them. I would also like to keybind the highlight function. Do I need to know some type of coding to be able to change layouts and place colors and icons to use joplin appropriately, as I do not know how to code but love customization. Any help would be appreciated :)! :blush: :blush: :blush:

  • I use joplin as is
  • My Joplin is tailor fit through coding for my needs

0 voters

2 Likes

You can use ==mark== syntax to highlight text, unfortunately it only works with one colour as far as I know.

There's this plugin which allows you to insert different colours with MARK and SPAN

Looks like it isn't in the official repository, so you need to dowload it manually.

As for the keybinding of highlight function I don't think it's available, but it can be coded in with the plugin perhaps.

1 Like

Can you give me advice on where to start and how to begin coding all this functionality that I need? But thank you for this addon!

https://joplinapp.org/#custom-css

hi! you can customize joplin by using css. there are two files, one for rendered markdown and one for everything else. more info here. but you don't need to create the files you can edit them by going options > appearance > show advance settings. when you click 'edit' the file will be opened up in a text editor (i guess it depends on the default app on your computer for css files).

you can find plenty of examples in this topic. some people add comments as well to explain what a code block does. also just like in your browser, you can toggle development tools (under help) in joplin, and look for element / class (?not sure what they're called) names to then modify them in your css files. but i think you can get by with examples on here for basic stuff which is mostly what i do. don't forget to restart joplin to see the changes after saving css file.

might be useful: this topic mentions highlighted text and has a link about dev tools.

in userchrome.css i have this to make ==mark== color to light yellow in the editor. probably took it from the above link.

.cm-search-marker {
  background: #ffff99 !important;
  color: black !important;
}

and i remember it changed the ctrl+F search highlight color so that's why i have this:

.cm-search-marker-selected {
  background: black !important;
  color: white !important;
  /* ctrl+F search highlighter */
  /* if not added, it is the same color as search-marker*/
  /* but text stays white, making it hard to read*/
}

for rendered markdown ==mark== color i have this in userstyle.css (it's the same light yellow):

mark {
   background-color: #ffff99;
}

colors can be hex codes like the one above.

anyway i hope someone will correct me if i said anything wrong.

1 Like

Wow thank you for this in depth response, when I get back from work I will try these things out. I also wanted to code multiple different highlighter colors to keybinds along with being able to change the sidebar, side note colors and even a word count at the bottom of the page. Rather than having to click on a button to see word count, do you know how this could be done?

no problem! i think multiple highlight colors for rendered markdown is possible with html tags, just like the plugin martinkorelic linked. but if you don't want to use those brackets, i think you could use autohotkey to add those tags when you use a certain shortcut, you can adapt this cool script for that. but they are displayed on the rendered side. i don't know how to do it for the editor.

for others.. i have no idea. there are couple themes that comes with joplin though.

edit: i remember seeing examples of sidebar customization. there are probably some in the share your css topic.

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.