VS Code中Jupyter Notebook的Alert-block显示异常如何修复？

你使用以下HTML代码创建Alert警告块：

<div class="alert alert-block alert-danger"> In general, just avoid the red boxes. </div>

该代码在Anaconda Navigator启动的Jupyter Notebook中可正常渲染带样式的红色警告块，但在VS Code的Jupyter环境中显示异常，核心原因是VS Code的Jupyter插件默认未引入Bootstrap样式文件，而Anaconda自带的Jupyter环境内置了Bootstrap样式支持。

以下是几种可行的解决方法：

• 方法一：手动引入Bootstrap官方样式
  在Notebook的首个单元格中运行以下代码，加载Bootstrap的CSS资源：

  from IPython.display import HTML
  HTML('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">')
  

  执行后，再使用你的Alert块代码即可正常渲染样式。

• 方法二：自定义本地Alert样式
  若不想依赖外部CDN，可自行定义Alert的样式规则，在Notebook中添加并运行以下代码：

  from IPython.display import HTML
  HTML("""
  <style>
  .alert {
      padding: 15px;
      margin-bottom: 20px;
      border: 1px solid transparent;
      border-radius: 4px;
  }
  .alert-danger {
      color: #a94442;
      background-color: #f2dede;
      border-color: #ebccd1;
  }
  .alert-block {
      padding-top: 18px;
      padding-bottom: 18px;
  }
  </style>
  """)
  

  此代码会为Alert块添加和Bootstrap一致的样式效果，后续你的Alert代码就能正常显示。

• 方法三：检查VS Code Jupyter插件设置
  打开VS Code的设置界面，搜索“Jupyter”相关选项，查看是否有启用Bootstrap样式的开关（部分新版本插件可能新增此功能），若有则勾选启用即可。

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