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

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

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

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

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

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

import streamlit as st

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

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

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

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

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

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

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

• code: 表示する文字列
• language='python': 表示するコードの言語（構文ハイライトが有効になります）

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

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

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

パラメータ解説：

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

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

▶ Python

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

▶ HTML

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

▶ Bash（シェルコマンド）

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

▶ JavaScript

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

▶ SQL

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

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

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

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

print(square(3))
'''

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

対応している言語一覧（外部リンク）

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

👉 対応言語一覧はこちら（GitHub）

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

• python
• javascript
• html
• css
• bash
• sql
• json

よくある注意点

• language を間違えるとハイライトされません（指定ミスに注意）
• 表示内容は文字列として渡す必要があります
• line_numbers を付けすぎると、画面が狭いときに読みにくくなる場合があります

まとめ

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

ポイントをおさらい：

• 文字列としてコードを渡す
• language パラメータで構文ハイライト
• line_numbers=True で行番号付きも可能
• Python以外の言語にも対応！

参考リンク

• 🔗 公式ドキュメント：st.code
• 🔗 対応言語一覧（GitHub）

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