Custom code block syntax, presumably by executing js script from userstyle.css?

Support
1

Hi,
I have been digging around to see if I can customize the way that my Joplin render the code block. Ideally, I want to use the Google Code prettify (its demo gallery) to show the code block as this is the same script I use to highlight the code block on my own blog. So I would like to keep the consistency. On my Jekyll based blog, this prettify script is called in the html file so I now need to figure out how to archive the same thing in Joplin while I can only modify the userstyle.css configuration.

I do see some posts and stackoverflow showing how to call javascript from css. Hence I have tried the following in Joplin’s userstyle.css but nothing changes.

pre {
    behavior:url("https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js")
}

I’m really kind of lost since I don’t know much about how the markdown engine/css/html stuff work. What should be my next step if I want to enable custom code syntax highlighting in Joplin? My minimum goal will be to enable a dark theme code block with my custom css and a white theme Joplin. What do people usually do?

2

These are the CSS files to set the colours and styles for code blocks. If you open one up and take a look you should be able to override all those colours etc. in your userstyle.css. unfortunately it might take a bit of manual work. Let me know if you’re successfully able to override those colours, there are some limitations to the userstyle.css but I’m not sure what all of them are yet.

1 Like
3

Thank you for pointing me to the correct place to look at! The original reason that I want to have custom code syntax highlight is that the default code block isn’t really working well with my custom css. Hence I was trying to see if I can make the color in code block more distinguishable from the rest of my Joplin note. Although it is still unclear to me if I can run custom javascript to prettify the code, I think I will at least be able to do some manual modification to these css files and archive my minimum goal.
Thank you again! I will post back if I found something interesting later.

4

There's no official way to do this at the moment. You might be able to hack it somehow by playing with html and script tags, but it's not guaranteed it will keep working.