如何让Medium展示HTML可视化内容而非代码块

核心问题原因 #

Medium不支持直接嵌入含JavaScript的原始HTML文件，也不会自动渲染GitHub Gist里的HTML内容，只会把它们当成代码展示。要让交互式图表正常显示，需通过第三方托管+iframe嵌入的方式实现。

解决步骤（适用于Altair和BERTopic图表） #

方法1：GitHub Gist + Githack渲染嵌入

这是最直接的方案，利用Gist托管文件，通过Githack生成可渲染的HTTPS链接，再用iframe嵌入Medium：

1. 上传HTML文件到公开Gist
   把本地生成的Altair/BERTopic图表HTML文件上传到GitHub Gist（确保Gist设为公开）。
2. 获取渲染链接
   打开Gist页面，复制Gist的ID（比如链接https://gist.github.com/xxx/abc123里的abc123），拼接成Githack渲染链接：

   https://gist.githack.com/你的GitHub用户名/GistID/raw/你的文件名.html
   

   打开链接测试，确认图表能正常交互显示。
3. 生成iframe代码嵌入Medium
   把渲染链接转换成iframe代码，替换成你的链接：

   <iframe src="你的Githack渲染链接" width="500" height="300" frameborder="0" scrolling="no"></iframe>
   

   在Medium编辑器中插入代码块，粘贴这段iframe代码即可，Medium会自动渲染出交互式图表。

方法2：Observable托管嵌入

如果需要更稳定的托管环境，可以用Observable Notebook：

1. 导出图表为Vega-Lite JSON
   在生成Altair图表的Python代码末尾添加：

   fill.save('chart.json')  # 替换fill为你的图表变量名
   

2. 在Observable创建笔记
   注册并打开Observable，创建新笔记，粘贴以下代码（替换JSON内容为你的导出结果）：

   import {vegaEmbed} from "@observablehq/vega"
   vegaEmbed("#chart", {
     // 粘贴你的chart.json里的所有内容
   })
   

3. 获取嵌入代码
   发布笔记后，点击右上角「Share」→「Embed」，复制生成的iframe代码，粘贴到Medium的代码块中即可。

你的Altair图表生成代码（优化版） #

import altair as alt
from vega_datasets import data
import pandas as pd

states = alt.topo_feature(data.us_10m.url, 'states')
url = 'https://gist.github.com/mauvegrrl/40e6279e636b66d0a1f694a850334dc3/raw'
sbl = pd.read_csv(url)
upper_color = round(sbl['count'].max(), -2)

fill = alt.Chart(states).mark_geoshape().encode(
    tooltip=['state:N','count:Q', 'lists:N'],
    color = alt.Color('count:Q', 
                      scale=alt.Scale(domain=[0, upper_color]))
    ).project('albersUsa').properties(
    width=500,
    height=300
).transform_lookup(
    lookup='id',
    from_=alt.LookupData(sbl, 'id', ['state','lists','count'])
)

# 导出为HTML或JSON，用于后续嵌入
fill.save('us_states_choropleth.html')
# fill.save('us_states_choropleth.json')

内容的提问来源于stack exchange，提问作者mauve