In this article, we are going to talk about how to embed code snippets in our streamlit application.
Streamlit has built-in methods to embed code snippets. And also streamlit components allows us to add GitHub Gist and Git Lab code snippets in our streamlit application.
Built-In method to embed code
Streamlit.code() – method displays a code block with optional syntax highlighting.
streamlit.code(body, language = 'python')
- body: the body is a string data type parameter, this string is to display as a code .
- language: language is also a string data type parameter. Language signifies the language the code is written in, for syntax highlighting. If omitted, the code will be unstyled.
import streamlit as st body = ''' def hello(): print("Hello World!") ''' st.code(body, language = 'python')
Streamlit Components to embed Code
Streamlit – EmbedCode component provides the easiest way to embed code snippets into your Streamlit app! This component supports the following code-sharing services:
- GitHub gist
- GitLab snippets
In order to use the Streamlit Embed Code feature install the streamlit-embedcode module.
pip install streamlit-embedcode
GitHub is a popular source code hosting site that serves as a collaborative coding platform. The many features of GitHub have greatly facilitated developers’ collaboration, communication, and coordination.
Gists are one feature of GitHub, which defines them as “a simple way to share snippets and pastes with others.”
Creating a gist
- Sign in to GitHub.
- Navigate to your gist home page.
- Type an optional description and name for your gist.
- Type the text of your gist into the gist text box.
- Optionally, to create a public gist, click , then click Create public gist.
- Click Create secret Gist or Create public gist.
- Get the URL of the Gist. And pass the URL of the Gist as a parameter to the
github_gist()method of the streamlit-embedcode module.
import streamlit as st from streamlit_embedcode import github_gist link = "https://gist.github.com/opeeyum/1b0b88f31bc1687fead0df25dd2000c4" st.header("Embed Github Gist:") github_gist(link)
GitLab snippets allow us to store and share bits of code and text with other users. One can comment on, clone, and use version control in snippets. Snippets can contain multiple files.
Github Snippet also supports syntax highlighting, embedding, downloading, and one can maintain snippets with the snippets API.
Creating the Snippet
You can create snippets at GitLab in multiple ways, depending on whether you want to create a personal or project snippet. Select the kind of snippet you want to create:
- To create a personal snippet: On the Snippets dashboard, click New snippet.
- Add a Title and Description to the Snippet.
Name your File with an appropriate extension, such as
index.html. Filenames with appropriate extensions display syntax highlighting. Failure to add a filename can cause a known copy-pasting bug. If you don’t provide a filename, GitLab creates a name for you.
Select a visibility level (i.e Private or Public), and select Create snippet.
Get the URL of the Snippet. And pass the URL of the Snippet as a parameter to the
gitlab_snippet() — method of the streamlit-embedcode module.
import streamlit as st from streamlit_embedcode import gitlab_snippet link = "https://gitlab.com/-/snippets/2185648" st.header("Embed Gitlab Snippet:") gitlab_snippet(link)