如何将Jupyter Notebook转换为无默认CSS或精简CSS的HTML文件

嘿，这个问题我之前也踩过坑！Jupyter默认导出的HTML带的默认CSS确实夸张，1万多行里大部分都是用不上的冗余代码。下面分享几个靠谱的解决办法，帮你生成不含默认CSS或者极度精简的HTML文件：

方法1：直接禁用默认CSS导出 #

用jupyter nbconvert的--no-styles参数，导出时完全不包含默认的CSS样式。这样生成的HTML只有纯内容结构，没有任何自带样式，你可以自己添加精简的自定义CSS。

命令示例：

jupyter nbconvert --to html --no-styles your_notebook.ipynb

注意：用这个参数导出的HTML会完全“裸奔”，所有元素都用浏览器默认样式，所以后续需要自己补充必要的基础样式（比如代码块、标题的样式）。

方法2：使用极简模板导出 #

nbconvert自带了一些轻量模板，比如basic模板，它的CSS比默认的full模板精简很多。你可以直接指定这个模板导出：

命令示例：

jupyter nbconvert --to html --template basic your_notebook.ipynb

如果basic模板的CSS还是不符合你的需求，还可以自定义Jinja2模板，完全掌控CSS内容。比如创建一个名为custom_light.tpl的模板文件：

{%- extends 'full.tpl' -%}

{% block header %}
    <meta charset="utf-8">
    <title>{{ resources.metadata.name if resources.metadata.name else "Notebook" }}</title>
    <!-- 这里只添加你需要的精简CSS -->
    <style>
        /* 基础文本样式 */
        body { font-family: system-ui, sans-serif; line-height: 1.6; max-width: 900px; margin: 0 auto; padding: 20px; }
        /* 标题样式 */
        h1, h2, h3 { color: #2d3748; border-bottom: 1px solid #e2e8f0; padding-bottom: 0.3em; }
        /* 代码块样式 */
        pre { background-color: #f7fafc; padding: 1em; border-radius: 6px; overflow-x: auto; }
        code { font-family: 'Monaco', 'Menlo', monospace; }
        /* 表格样式（如果需要） */
        table { border-collapse: collapse; width: 100%; margin: 1em 0; }
        th, td { border: 1px solid #e2e8f0; padding: 0.5em; text-align: left; }
    </style>
{% endblock header %}

{% block styles %}
    <!-- 清空默认的styles块，避免加载默认CSS -->
{% endblock styles %}

然后用这个自定义模板导出：

jupyter nbconvert --to html --template custom_light.tpl your_notebook.ipynb

方法3：事后精简现有CSS #

如果已经导出了带臃肿CSS的HTML，可以用工具自动移除未使用的CSS规则。推荐用PurgeCSS，它会扫描你的HTML内容，只保留实际用到的CSS规则。

步骤：

1. 先把HTML里的默认CSS提取出来保存为original.css文件
2. 安装PurgeCSS：npm install -g purgecss
3. 运行命令精简CSS：

purgecss --css original.css --content your_exported.html --output cleaned.css

4. 把HTML里的默认CSS替换成cleaned.css的内容

这个方法能把1万多行的CSS压缩到几百行甚至更少，非常高效。

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