How to add code snippets as in Stack Overflow?

I’m willing to make a Dash app to use as a portfolio platform of my projects and I have this data analysis project that I made it in Jupyter Notebook. I wanna follow through my analysis adding some code snippets (e.g image above). Is there any way that I can add it to my app?


Hi @bona_019 ,

What you’re after might be the html.Code component, which is the wraper for the code element in html.

1 Like

Hi @jhupiterz,
Found exactly what I needed, thank you so much for the response! :slight_smile:

1 Like

Here’s another solution. You can use the dcc.Markdown component and enclose the code in three back ticks. You can also use different themes for the code syntax hilighting, like in this post: How to change the theme of code highlights in dcc.Markdown



place your code here


More info here: Markdown | Dash for Python Documentation | Plotly

1 Like

Actually this is exactly what I’ve been looking for, thank you so much for your response! :slight_smile:

1 Like