Using Prism JS in Streamlit

Using Streamlit
,
1

Hello everyone

I am trying to replace st.code with Prism JS because of highlighting needs. I am stuck there, and I would appreciate any advice.

The following HTML code renders fine in my browser (Safari):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prism.js with Line Numbers</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-default.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css">
</head>
<body>
    <pre class="line-numbers"><code class="language-none">
        Example
    </code></pre>

    <script>
        Prism.highlightAll();
    </script>

</body>
</html>

However, the following Streamlit code (which looks equivalent to me) does not – it does not use the line numbering plugin:

st.markdown("""
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css">""", unsafe_allow_html=True)

st.markdown("""<pre class="line-numbers"><code class="language-none">
Example
</code></pre>""", unsafe_allow_html=True)

st.markdown("""<script>
Prism.highlightAll();
</script>""", unsafe_allow_html=True)

Note: I also tried st.html, but that didn’t work either.

Apologies in advance if I’m overlooking something obvious – I am new to HTML and Streamlit :-/

Many thanks!
Wolfram

2

I found the answer – one can use components.html:

import streamlit.components.v1 as components

components.html(f"""
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-default.min.css">
                <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css">
                            
                <div style="height:650px; overflow:auto;">
                    <pre class="line-numbers"><code class="language-none">{annotated_text}</code></pre>
                </div>
                            
                <script>Prism.highlightAll();</script>""", height=650)

Best
Wolfram

3

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.