Are you using HTML in Markdown? Tell us why!

[isaac]

Yeah, sure. Here is an example of loading custom CSS.

st.markdown('<style>h1{color: red;}</style>', unsafe_allow_html=True)

And here is an example of loading a custom icon after I’ve included the icon CSS library using the hack above.

st.markdown('<i class="material-icons">face</i>', unsafe_allow_html=True)

More direct support for custom css using like st.css(css: str | dict) and custom icons using like st.icon('face') would be amazing.

[IyyappanA]

Thanks a lot Isaac. You saved my day.

[IyyappanA]

Hi Isaac,

Sorry to disturb you again. Could you please help me with how to import material-icons as you mentioned in the following line?
st.markdown(‘face’, unsafe_allow_html=True)

[isaac]

1. Download the Google Material Design CSS stylesheet from https://fonts.googleapis.com/icon?family=Material+Icons locally to e.g. icons.css.
2. Load css using hack I specified above.

st.markdown('<style>' + open('icons.css').read() + '</style>', unsafe_allow_html=True)

3. Display icon by injecting icon html.

st.markdown('<i class="material-icons">face</i>', unsafe_allow_html=True)

But it would be awesome if the maintainers could add st.css() and st.icon() features.

[thiago]

@isaac

But it would be awesome if the maintainers could add st.css() and st.icon() features.

That’s a cool idea, but we’ll have to think a bit about how it fits with the rest of the API. For example, should icons be clickable? How would st.css interop with our planned horizontal/grid layout APIs? etc.

In the meantime, you could always create your own library and share with the community through Github

Something like:

(NOTE: This code is untested!)

import streamlit as st

def local_css(file_name):
    with open(file_name) as f:
        st.markdown('<style>{}</style>'.format(f.read()), unsafe_allow_html=True)

def remote_css(url):
    st.markdown('<style src="{}"></style>'.format(url), unsafe_allow_html=True)

def icon_css(icone_name):
    remote_css('https://fonts.googleapis.com/icon?family=Material+Icons')

def icon(icon_name):
    st.markdown('<i class="material-icons">{}</i>'.format(icon_name), unsafe_allow_html=True)

[thiago]

EDIT: Found the static html folder, I’ll just symlink my generated htmls inside it for the time being. It’s a bit of a sketchy workaround, but it’s okay for now![/quote]

Nice hack workaround! You could also copy your JS/CSS into that folder from within Python, so anyone running your app would get the hack for free.

For that, you’d have to find the root folder for Streamlit by using os.path.dirname(st.__file__)

@arminp

Being able to embed js in streamlit at some point would be awesome!

Yup!! We’re planning on supporting that via easy-to-build plugins: Plug-in architecture for Streamlit · Issue #327 · streamlit/streamlit · GitHub

[arminp]

Nice hack workaround! You could also copy your JS/CSS into that folder from within Python, so anyone running your app would get the hack for free.
For that, you’d have to find the root folder for Streamlit by using os.path.dirname(st.__file__)

Wow, that is all that was needed to make the hack perfect! Thank you, and I’m still looking forward to the plugins
Have a nice day!

[neliseiska]

@thiago

• Why are you using it?
• Any thoughts on what you’d like to see in Streamlit if you did not have the ability to use HTML?

1.Currently I find folium -maps much better than deck_gl_chart. So therefore I use for example:

import streamlit as st
import pandas as pd
import folium

all_cities = pd.DataFrame(
    [(40.7127837, -74.0059413),(34.0522342, -118.2436849),(41.8781136, -87.6297982)],
    ['New York', 'Los Angeles', 'Chicago'],
    ['lat','lon'])

selected_city = st.selectbox('Select city', all_cities.index)

route_map = folium.Map(location=(all_cities.loc[selected_city]), zoom_start=9, control_scale=True)

folium\
    .Marker(all_cities.loc[selected_city], popup='<i>'+selected_city+'</i>', tooltip='Where am I?')\
    .add_to(route_map)

st.markdown(route_map._repr_html_(), unsafe_allow_html=True)

2. Maybe you could add st.folium to the API?

[isaac]

Hi Thiago,

Thanks for working on Streamlit. It’s a great tool. I definitely hear your concerns about how would st.css play nicely with the planned grid layout API, but I still think there is a use-case for custom user-defined css. For a specific example, how else do I color/size my titles and links to match my product branding? Even if we could pass in custom options to those fields, I would still prefer to have the full low-level control enabled by writing my own css which takes precedence over the streamlit-default css. My hope is that you don’t deprecate the st.markdown(..., unsafe_allow_html: True) option before we have another way to accomplish that.

Thanks!
Isaac

[mzeidhassan]

The documentation still says “Also note that unsafe_allow_html is a temporary measure and may be removed from Streamlit at any time.”

Has this decision been made yet? I think it’s important to keep ‘allow_html’.

I would like to change text direction to right to left ‘RTL’. Does Streamlit markdown support something like that?

Thanks

[Yang_Zhang]

Awesome! I was wondering if I am the only one using folium. I am wondering could you change the size of map box. Thanks a lot

[neliseiska]

Hi @Yang_Zhang ,

Check here:
https://python-visualization.github.io/folium/modules.html

You can pass width and height either as a pixel int or percentage string (default: ‘100%’).

[Yang_Zhang]

Thank you~

[mschmill]

I have user texts in my data that may or may not contain line breaks, sometimes two in a row. It seems that the markdown processor does something strange when this happens. Only the first paragraph is enclosed in the HTML tags:

st.markdown(f'<div style="font-size: small">{document}</div>',unsafe_allow_html=True)

renders to

<div class="markdown-text-container stText" style="width: 698px;">
  <div style="font-size: small;">This is paragraph 1 text.</div>
  <p>This is paragraph 2 text.</p>
  <p>This is paragraph 3 text.</p>
</div>

All I really want is some way to have the text stand out, be word-wrapped, and respect line breaks in the original text. I wanted to use markdown blockquote but the prepending a “>” to the document only blockquotes the first paragraph. What’s the best way to do this?

[snakers41]

Created a whole issue on this topic - Using streamlit for an STT / TTS model demo?

I wonder if I should create a feature request?

[aghasemi]

I do, because of <sub>subscriptsts</sub>

[nthmost]

@mzeidhassan

I would like to change text direction to right to left ‘RTL’. Does Streamlit markdown support something like that?

I’m curious what your application for directly specifying RTL would be. I’ve been able to create text in RTL languages using st.write without any special markup around them, relying on browser detection only.

If you mean you are trying to reverse an LTR language, I’m not sure there’s a solution for that even in HTML.

Since this is a thread asking “what are you using HTML for”, I’m wondering how far you can get in Streamlit without using HTML for what you are doing @mzeidhassan.

[tim]

Hey @arminp,

As a workaround for file download support, here’s a Gist that demonstrates patching Streamlit to allow static file downloads: https://gist.github.com/tconkling/1e5ead87c796a82de7fa71fcc4a74777.

[nthmost]

@mschmill

Only the first paragraph is enclosed in the HTML tags:

Hi @mschmill – I’ve reproduced your bug and filed it on GitHub. I agree that this is unwanted/unexpected behavior!

st.markdown + HTML: some styling only applies to first block prior to 2+ breaklines.

[Alexandre_Domingues]

I work a lot with geo-annotated data so I render a LOT of maps.
deck_gl_chart on streamlit is nice but it’s still extremely limited so I’m still using folium, an awesome mapping library.
I’m able to embed folium maps on streamlit using

m = folium.Map(location=[45.5236, -122.6750])
st.write(m._repr_html_(), unsafe_allow_html=True)