You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在Streamlit消息的代码块中保持空格格式以对齐显示棋盘?

解决Streamlit代码块棋盘空格不对齐的方法

以下是几种可行的解决方案:

方法1:使用st.text()渲染文本

st.text()默认用等宽字体渲染内容,能严格保留所有空格的排版,最适配这种需要精确对齐的场景:

# 定义排版正确的棋盘文本
board_text = """
   a b c d e f g h
  -----------------
8 |R|N|B|Q|K|B|N|R|
7 |P|P|P|P|P|P|P|P|
6 | | | | | | | | |
5 | | | | | | | | |
4 | | | | | | | | |
3 | | | | | | | | |
2 |p|p|p|p|p|p|p|p|
1 |r|n|b|q|k|b|n|r|
  -----------------
"""
# 直接输出文本
st.text(board_text)

方法2:用非断空格替换普通空格(适配Markdown代码块)

如果坚持使用Markdown代码块,将文本中的普通空格替换为**非断空格( )**避免空格被压缩,同时开启unsafe_allow_html=True:

board_markdown = """```
   a b c d e f g h
 -----------------
8 |R|N|B|Q|K|B|N|R|
7 |P|P|P|P|P|P|P|P|
6 | | | | | | | | |
5 | | | | | | | | |
4 | | | | | | | | |
3 | | | | | | | | |
2 |p|p|p|p|p|p|p|p|
1 |r|n|b|q|k|b|n|r|
 -----------------
```"""
st.markdown(board_markdown, unsafe_allow_html=True)

方法3:强制代码块使用等宽字体(自定义CSS)

通过自定义Streamlit的CSS样式,强制代码块使用等宽字体,确保每个字符宽度一致:

# 注入自定义CSS样式
st.markdown("""
<style>
pre code {
    font-family: monospace !important;
}
</style>
""", unsafe_allow_html=True)

# 定义棋盘文本并渲染代码块
board = """
   a b c d e f g h
  -----------------
8 |R|N|B|Q|K|B|N|R|
7 |P|P|P|P|P|P|P|P|
6 | | | | | | | | |
5 | | | | | | | | |
4 | | | | | | | | |
3 | | | | | | | | |
2 |p|p|p|p|p|p|p|p|
1 |r|n|b|q|k|b|n|r|
  -----------------
"""
st.markdown(f"```\n{board}\n```")

内容的提问来源于stack exchange,提问作者Farsissimo

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.07 19:50:05