How to add code snippets as in Stack Overflow?

Dash Python
1

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?

image

2

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
3

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

1 Like
4

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

dcc.Markdown("""

```python

place your code here

```
""")

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

1 Like
5

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

1 Like