markdown-viewer
markdown-viewer copied to clipboard
How can I change the syntax highlighting for code blocks
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.
Do you have a way to modify the syntax highlighting for code blocks?
Thank you very much.
I'm using the Everforest theme.
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.
Thank you for your reply. I changed the style of prism. Now it looks good. You`re my hero!
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.