St.code on multiple lines

Using Streamlit
1

Summary

Hi, I want to use st.code for the copy button functionality but it shows the text in one line, even if it is long. I know i can format the text with \n but i do not want that.

Steps to reproduce

Code snippet:

import streamlit as st
st.code('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.')

Expected behavior:

The text should be formatted the same as st.markdown, but using st.code and keeping the copy to clipboard functionality. If the text is too long, it should be split on multiple lines. Without using \n.

Actual behavior:

The text is printed on same line, no matter how long it is.

2

Hi @Erica

How about formatting as follows:

import streamlit as st
text = '''
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
'''
st.code(text)
st.markdown(text)

Here, we can explicitly format the text by adding a new line at the specific location that we see fit. Using ‘’’ to encapsulate the text content allows us to work with text on multiple lines.

Hope this helps!

3

Hi @dataprofessor, I have tried your code but it is not what I want. With the st.code, the text gets out of the box after the word tempor when it should continue on the next line, as the st.markdown. I want to make the format of st.markdown but with st.code, so I can also have the copy button without using st.button.

image
image1186×426 26.6 KB

4

Here in this repo

they are making it as a new file and using text from there[because formatting everything is hard] so instead get the data from elsewhere

if st.button("Show Code"):
        file_path = code_files[PathToFile/File.txt]
        code = read_code_file(file_path)
        st.code(code, language='c')
5

This has nothing to do with what I am trying to accomplish. And it still shows the content in one line:

image
image1281×589 22.5 KB

6

@erica Try using st.text_area instead.

7

This does not have the copy button that the st.code has. I need that copy button and the formatting behaviour from st.markdown. I tried using st.button but the page keeps refreshing and I have strange behaviour with it.

1 Like
8

One thing you can do is use css

import streamlit as st
from streamlit_extras.stylable_container import stylable_container

with stylable_container(
    "codeblock",
    """
    code {
        white-space: pre-wrap !important;
    }
    """,
):
    st.code(
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
        * 10
    )

image
image1726×1012 144 KB

9

@Erica also, you can use textwrap library to force the wrapping on a specific length.

import streamlit as st
import textwrap as tw


st.code(
    "\n".join(
        tw.wrap(
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
            width=80,
        )
    )
)

image
image788×138 4.35 KB

10

image
image835×372 16.9 KB

Its working for me

text file
image

image

and u can type however u want and it will show like that

11

Thank you, this is what I was looking for. Thank you to others too for the effort! Wish you a great day to all of you :slight_smile:

12

Do you guys have an idea on how could I find the css code of the text showed with st.markdown? I want to make the st.code output look the same as st.markdown. I tried to look with dev mode but it does not work.

2 Likes
13

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