Skip to content

Streamlit の Markdown で特定箇所のみ、スタイルを適用する

現状の Streamlit に用意されている各エレメントは標準機能だけでは「フォントのカスタマイズ」などがあまり出来ず、「Markdown で CSS を挿入する」といった工夫が必要です。 Change font size and font color で議論されていますが、「ピンポイントで特定箇所のフォントだけをカスタマイズして表示したい」という場合は Markdown で該当箇所のみ、スタイルを適用します。

サンプルコード

サンプルコードは以下の通りです。

1
2
3
4
5
6
7
import streamlit as st

st.markdown('<p style="font-family:serif; color:cyan; font-size: 12px;">serif</p>', unsafe_allow_html=True)
st.markdown('<p style="font-family:sans-serif; color:silver; font-size: 16px;">sans-serif</p>', unsafe_allow_html=True)
st.markdown('<p style="font-family:cursive; color:gold; font-size: 20px;">cursive</p>', unsafe_allow_html=True)
st.markdown('<p style="font-family:fantasy; color:salmon; font-size: 24px;">fantasy</p>', unsafe_allow_html=True)
st.markdown('<p style="font-family:monospace; color:purple; font-size: 28px;">monospace</p>', unsafe_allow_html=True)

実行結果

サンプルコードを実行してみます。

1
streamlit run sample.py

http://ADDRESS:8501/ へアクセスすると以下のように表示されました。

file