サイトアイコン アマチュア無線局JS2IIU

【Streamlit】st.codeコードブロックを表示する

こんにちは、JS2IIUです。
Streamlitは、Pythonで手軽にWebアプリを作ることができるとても便利なライブラリです。
その中でも、プログラムコードを見やすく整えて表示したいときに活躍するのが st.code() です。

この関数を使えば、構文ハイライト付きの読みやすいコードブロックを表示できます。

st.code() を使ってみよう(基本編)

まずは、簡単なコードを表示する基本的な使い方から見てみましょう。

🔰 ステップ1:Streamlitをインポートしよう

Python
import streamlit as st

Streamlitの関数を使うために、最初にこのインポートが必要です。

🔰 ステップ2:表示したいコードを用意しよう

ここでは、Pythonの関数を例にします。

Python
code = '''def greet(name):
    return f"Hello, {name}!"
'''

このように、複数行のコードを1つの文字列変数(code)として用意します。

🔰 ステップ3:st.code() で表示しよう

Python
st.code(code, language='python')

st.code() の書式とパラメータ

公式ドキュメントに基づいて、st.code() の関数シグネチャを説明します。

Python
st.code(body, language="python", line_numbers=False)

パラメータ解説:

パラメータ説明
body(必須)表示するコード文字列
language(任意)コードの言語。構文ハイライトに使われます。デフォルトは "python"
line_numbers(任意)行番号を表示するかどうか(True または False

いろんな言語で試してみよう(実践編)

st.code() はPython以外にもたくさんの言語に対応しています。
ここでは、いくつかの例を実際に試してみましょう。

▶ Python

Python
st.code('print("Hello, Streamlit!")', language='python')

▶ HTML

Python
st.code('<h1>Hello, Streamlit!</h1>', language='html')

▶ Bash(シェルコマンド)

Python
st.code('ls -la', language='bash')

▶ JavaScript

Python
st.code('console.log("Hello, world!");', language='javascript')

▶ SQL

Python
st.code('SELECT * FROM users WHERE age > 18;', language='sql')

行番号を表示したいときは?

line_numbers=True を使うと、左側に行番号が表示されて見やすくなります。

Python
code = '''def square(n):
    return n * n

print(square(3))
'''

st.code(code, language='python', line_numbers=True)

対応している言語一覧(外部リンク)

使用できる言語の一覧は、以下のGitHubページで確認できます:

👉 対応言語一覧はこちら(GitHub)

よく使われる言語には以下のようなものがあります:

よくある注意点

まとめ

st.code() は、Streamlitアプリでコードを綺麗に表示したいときにとても便利です。

ポイントをおさらい:

参考リンク

最後まで読んでいただきありがとうございます。

モバイルバージョンを終了