How to change the theme of code highlights in dcc.Markdown

If you want to show code in your app, you can use the dcc.Markdown component like this:

dcc.Markdown("""```python put your code here ```""")

I just figured out how to change the theme of the code highlights, so I thought I would share (The highlight_config prop in dcc.Markdown doesn’t seem to work)

You can get a preview of all the different themes here: highlight.js demo

Highlighting is taken care of automatically in Dash by highlight.js . You can change the theme by adding the URL of the theme to the external_stylesheets or add it to the /assets folder

You can find a url for the theme here.


So this is what some code looks like without any additional stylesheet:

image



Here’s the Github Dark Dimmed theme:

2 Likes