☰
×

STREAMLIT – Embed Code

Chapters
Embed Code Streamlit Feature

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()

Streamlit.code() – method displays a code block with optional syntax highlighting.

Syntax

streamlit.code(body, language = 'python')

Paramerters

  • 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.
For example:
import streamlit as st

body = ''' def hello():
    print("Hello World!")
'''

st.code(body, language = 'python')
Output
Streamlit Code

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

Installation

In order to use the Streamlit Embed Code feature install the streamlit-embedcode module.

pip install streamlit-embedcode

Github Gist

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.

Github

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.
Gist Text Box
  • Optionally, to create a public gist, click , then click Create public gist.
  • Click Create secret Gist or Create public gist.
Gist Visibility
  • 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)
Output
Github Gist Streamlit

Gitlab Snippet

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.
Text Gitlab Snippet

Name your File with an appropriate extension, such as example.py or 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.

Visibility Gitlab 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)
Output
Gitlab Snippet Streamlit