在基于streamlit的程序中使用 Markdown 和图片

在 Streamlit 中使用 Markdown 和图片

在这篇文章中，我们将讨论如何在 Streamlit 应用中使用 Markdown 文件，并正确显示其中的图片。

读取和显示 Markdown 文件

首先，我们需要读取 Markdown 文件的内容，并在 Streamlit 应用中显示它。以下是一个简单的示例，展示如何使用 st.markdown 函数来显示 Markdown 文件的内容：

import streamlit as st

# 读取 Markdown 文件
with open("example.md", "r", encoding="utf-8") as file:
    markdown_text = file.read()

# 在 Streamlit 应用中显示 Markdown 内容
st.markdown(markdown_text)

处理 Markdown 文件中的图片

为了在 Streamlit 中正确显示 Markdown 文件中的图片，我们需要处理图片引用。使用 st.image 函数可以确保图片显示在正确的位置。

以下是一个改进的示例代码，展示如何在读取 Markdown 文件后，替换其中的图片引用为 st.image 函数调用：

import streamlit as st
import re

# 读取 Markdown 文件
with open("Operationdocument.md", "r", encoding="utf-8") as file:
    markdown_text = file.read()

# 在 Streamlit 应用中显示 Markdown 内容，同时处理图片
def render_markdown_with_images(markdown_text):
    # 匹配 Markdown 图片语法 ![alt text](image_url)
    pattern = re.compile(r'!\[.*?\]\((.*?)\)')

    # 记录上一个位置
    last_pos = 0

    # 查找所有匹配项
    for match in pattern.finditer(markdown_text):
        # 显示上一个位置到匹配位置之间的文本
        st.markdown(markdown_text[last_pos:match.start()], unsafe_allow_html=True)

        # 显示图片
        img_url = match.group(1)
        st.image(img_url)

        # 更新上一个位置
        last_pos = match.end()

    # 显示剩余的文本
    st.markdown(markdown_text[last_pos:], unsafe_allow_html=True)

# 调用函数显示内容
render_markdown_with_images(markdown_text)

运行 Streamlit 应用

将上述代码保存为 app.py 文件，并确保 Operationdocument.md 文件和图片文件在同一目录下。在命令行中运行以下命令以启动 Streamlit 应用：

streamlit run app.py

示例 Markdown 文件

假设你的 Operationdocument.md 文件内容如下：

# 操作文档

这是一些示例文本。

![示例图片](example_image.png)

- 项目1
- 项目2
- 项目3

点击 [这里](https://www.streamlit.io) 访问 Streamlit 官方网站。

并且 example_image.png 图片文件与 Operationdocument.md 文件在同一目录下，运行上述脚本时，Streamlit 应用会正确显示文档内容和图片。

总结

在 Streamlit 中使用 Markdown 文件时，可以通过 st.markdown 函数显示文本内容，并使用正则表达式和 st.image 函数处理并显示图片。这样可以确保 Markdown 文件中的图片在 Streamlit 应用中正确显示，并且图片的位置与文件中的位置一致。