simov / markdown-viewer

Markdown Viewer / Browser Extension
MIT License
1.07k stars 135 forks source link

How can I change the syntax highlighting for code blocks #218

Closed Thweki closed 5 months ago

Thweki commented 1 year ago

Thank you very much for the plugin you've developed. It has been incredibly helpful to me.

I want the rendered Markdown file to be consistent with my system and Vim theme. To achieve this, I have written a CSS file.

At first, everything went smoothly, but when it came to code blocks, I became unsure of how to make the syntax highlighting consistent with the overall theme.

image

Do you have a way to modify the syntax highlighting for code blocks? Thank you very much.

Thweki commented 1 year ago

I'm using the Everforest theme.

simov commented 1 year ago

The syntax highlighting for code blocks is being done using prismjs, you can find their stylesheets in their repo.

One way is to install Markdown Viewer manually and update the styles that the extension uses directly, note that in this case you won't receive any future updated automatically.

Another way is to inspect the code blocks in your browser and see which styles are being applied, then maybe add a style tag at the bottom of your markdown file (you should be allowing HTML tags in your parser settings) and add your style overrides there with higher weight than the ones used by the viewer so that they can take effect.

I haven't tried this so it may not work, also having styles in your document is not ideal, but worth a try at least.

Thweki commented 1 year ago

Thank you for your reply. I changed the style of prism. Now it looks good. You`re my hero!

simov commented 5 months ago

Custom theme support landed in v5.3, have a look at the documentation

When you select the CUSTOM theme at the bottom of the themes dropdown you get a blank theme. Then you can add a style tag in your markdown and create your own theme, here is an example. Once you are ready go to the Advanced Options page and click on Settings in the header, if the CUSTOM theme is selected there will be a button below to select your .css file and make it permanent. Don't forget to remove the inline tag from your document. You can also update or remove the uploaded custom theme.