3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Streamlitで文字色を自由に変えるhtml記法

Last updated at Posted at 2022-03-03

Streamlitでhtml記法を実現するには以下のように書けば良いわけだが(text部分は任意のraw html)、

st.write(text, unsafe_allow_html=True)

例えば条件によって文字の色を変えたい!でも改行とかは入れたくない!という時は、ここのtextにf-string表記を入れればよい。

数字のリストがあったとして、偶数はオレンジ、奇数はグレーで表示したい時の例

app.py
import streamlit as st

numbers = [1,2,3,4,5,6,7,8,9]
text = ""
for i in numbers:
  if i%2==0:
    text += f'<span style="color:coral">{i}</span>'
  else:
    text += f'<span style="color:darkgray">{i}</span>'        

st.markdown('**color change example:**\n') #太字
st.markdown("---") #区切り線
st.write(text, unsafe_allow_html=True)

出力結果
スクリーンショット 2022-03-03 17.12.59.png

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?