Annotations in header / in list, with Markdown and st-annotated-text

Using Streamlit
1

I’m using annotation from st-annotated-text and tried something like that:

    st.markdown("### " + text + str(annotation("apple", "fruit")), unsafe_allow_html=True)

While the HTML seems perfectly fine, st.markdown struggled with parsing it (see image).

What can I do?

image
image1608×430 38.8 KB

2

Also, when using annotated_text it produces large, unreasonable margins (see image).

    annotated_text(("annotated", "adj", "#faa"))

Is it possible to use annotations in a heading / in a list (possibly in conjunction with Markdown)?

Can you help, @thiago, since you’re the maintainer of the project?

image
image1570×505 9.15 KB

3

Hey @scientia

I’m using annotation from st-annotated-text and tried something like that:

    st.markdown("### " + text + str(annotation("apple", "fruit")), unsafe_allow_html=True)

While the HTML seems perfectly fine, st.markdown struggled with parsing it (see image).

What can I do?

Looks like a bug with our HTML sanitizer. I created a new bug report for this here.

Is it possible to use annotations in a heading / in a list (possibly in conjunction with Markdown)?

I found out that the bug above goes away if you wrap everything in an single HTML element, thing render correctly. So the way to do what you want is something like this:

st.markdown("<h3>" + text + str(annotation("apple", "fruit")) + "</h3>", unsafe_allow_html=True)

Or, if you want to be fancy you can use my htbuilder library:

from htbuilder import h3
st.markdown(
    h3(
        text,
        annotation("apple", "fruit"),
    )
, unsafe_allow_html=True)

Also, when using annotated_text it produces large, unreasonable margins (see image).

This should be improved in the latest release of st-annotated-text. The annotations are no longer as huge as before :laughing:

1 Like
4

Hi, Im using annotated_text
I have list of htmlelements to be passed to this method.
In list I have…
If I do annotated_text(htmlelement1, htmlelement2, htmlelement3), it works.
But since I have all these in list variable, I cannot do … What is the best way to do?