How to change the settings of `highlight.js` in Inkdrop?

Issues
1

Hi,

The Creating a Theme doc says

Highlighting code blocks is built with highlight.js, and CSS selectors for styling code blocks are compatible with it.

Could someone give me a pointer, how do I change my code block in preview using tomorrow theme?

Thanks.
Iwan

2

Hi,

Glad you are trying to make a preview theme.
Could you hold on making a preview theme for a little while?
Because the syntax highlighting on the preview pane will be replaced with new version in the next version soon.
highlight.js will be deprecated.
I’ll update the docs.

Following repos as an example of preview theme has been changed yesterday.
It’s not compatible with the current version now.

The styles for the syntax highlighting are from L526 to L557 in styles/github-markdown.less.
The syntax themes are now based on CodeMirror’s ones: https://codemirror.net/demo/theme.html

The next version will be released in this week.

1 Like
3

Hi,

Glad to hear!! I’ll wait then, I didn’t know that highlight.js will be depreciated.
Thank you!

4

highlight.js itself will not be deprecated, sorry.
The reason why I stop using highlight.js is that there are inconsistencies in syntax highlighting between the editor and the preview.
For example, CodeMirror supports JSX and Pug but highlight.js doesn’t.
Some users reported that’s confusing and annoying.

I’d like to solve this problem.
Thanks for waiting!

5

Got it! Thanks for your explanation.

6

v3.12.0 is out. Please refer to the readme of the example preview theme for theming code blocks:

2 Likes
7

Thanks. I’m using it now.