I am using dash to produce an app. I need to write a sentence or two explaining the app. I am using code like this dcc.Markdown(dedent(''' ## Plot of Y_p vs. x_i, z_j shows blah blah blah ''')), this produces the sentence shown, number of hashtags determine size of font What I need to do is write subscripts and superscripts instead of for example x_i, I for it to output an actual subscript. Is this possible in the DC markdown? Is there another solution? PS: I already tried 'x_i' , r'x_i' ,text/etc… Any suggestions appreciated. I should mention that I was able to get subscripts and superscripts to work in html.Div() , by inserting html.Div([‘z’,html.Sub(‘j’)]), and I was able to get the subscripts to show in my actual plot by using text. These methods did not work in dcc.Markdown

Dash uses React Markdown to render the markdown: https://github.com/rexxars/react-markdown It provides a live way to test your markdown: https://rexxars.github.io/react-markdown/ The Markdown spec itself does not provide subscript or superscript: https://spec.commonmark.org/0.28/ And so most Markdown implementations fallback to HTML tags when you need further formatting features, including React Markdown, on their live demo this works: Plot of Y p vs. x i , z j shows blah blah blah But as you can see there are different HTML escaping procedures, it seems dcc.Markdown defaults to “escape” mode. Now it has an argument called dangerously_allow_html so I would assume this would work: dcc.Markdown( dangerously_allow_html=True, children=dedent( ''' Plot of Y p vs. x i , z j shows blah blah blah ''' ) ) But when I try it seems to use the “skip” html mode, not the “raw” html mode. So what I would say you have here is a bug in dcc.Markdown, I suggest you report it here with an example: https://github.com/plotly/dash-core-components/issues It might be a regression from 0.39 to 0.40 as well, I would check the version of Dash you have. Later tonight I will check both versions.

This solution worked perfectly. Thanks @Damian !

[image] ssgo: This solution worked perfectly. Thanks @Damian ! What version of Dash are you on?

Okay! Looks like it broke between 0.39 and 0.40, I will report a bug later tonight! Edit: Never-mind, I created 3 environments at home, 0.38, 0.39, and 0.40, and the only one it correctly works on for me it 0.40. So I’m very confused but as long as it works for you I’m glad!

Anyone has an explanation how to use superscript/subscript in 2024?

Dunno if it helps but if yo uadd annotation, for instance, adding yourtext around your text is enough fig.add_annotation( showarrow=False, font=dict(color="orange", size=10), xref="paper", x=0.069, xanchor="left", text=" 3 " ) You could also enable mathjax and use text=r"$\text{}{\ddagger\ddagger}$", valign="middle" [image] Latex Detailed examples of LaTeX including changing color, size, log axes, and more in Python. For instance. Never tried with markdown, though

Here’s an example of using mathjax with dcc.Markdown: [image] Poisson-distribution This app plots a Poisson distribution on a histogram, which contains a formula with MathJax. It has a top-down layout and a regular-callback. Also, this might be helpful: [image] How to make subscript and superscript in Dash Dash Python Hi @Mlevesque You can use the html.Sub() and the html.Sup() for subscripts and superscripts: html.Div(["H", html.Sub(2), "H", html.Sup(2)]) [image]

Superscripts and Subscripts

Dash Python

AnnMarieW January 2, 2024, 5:24pm 10

Here’s an example of using mathjax with dcc.Markdown:

Also, this might be helpful:

Topic		Replies	Views
How to use superscipts in Dash html components? Dash Python	0	409	July 9, 2018
How to make subscript and superscript in Dash Dash Python	3	2685	January 22, 2025
Supercripts and Subscripts in to_html 📊 Plotly Python	0	375	March 2, 2023
Superscript and subscript in a DataTable cell Dash Python	5	1495	June 8, 2023
Concatenate Dash html.Sub to other text as a subscript [SOLVED] Dash Python	0	784	February 28, 2020

Superscripts and Subscripts

Related topics