有没有办法在 google colab 上显示警报框？

Question

要在 Jupyter Notebooks 上显示漂亮的框，可以使用alertHTML 标签并放入一些 Markdown 内容。

这里是一个Jupyter Lab实例上显示的示例：

<div class="alert alert-info" role="alert" style="color: rgba(0,0,0,.8); background-color: white; margin-top: 1em; margin-bottom: 1em; margin:1.5625emauto; padding:0 .6rem .8rem!important;overflow:hidden; page-break-inside:avoid; border-radius:.25rem; box-shadow:0 .2rem .5rem rgba(0,0,0,.05),0 0 .05rem rgba(0,0,0,.1); transition:color .25s,background-color .25s,border-color .25s ; border-right: 1px solid #dee2e6 ; border-top: 1px solid #dee2e6 ; border-bottom: 1px solid #dee2e6 ; border-left:.2rem solid #007bff80;">
<h3 class="alert-heading"><i class="fa fa-comment"></i> Note</h3>

An example of a nicely formatted box

</div>

这甚至可以简化为基本警报：

<div class="alert alert-info" role="alert">
<h3 class="alert-heading">Note</h3>

An example of a nicely formatted box

</div>

但是，同一个笔记本在以下设备上渲染效果不佳Google Colab：

示例笔记本在这里

Answer 1

也许可以开设自己的课程。以下代码在 collab 和 jupyter 中均有效 您可以使用 HTML magic 命令直接显示 HTML 代码

from IPython.core.display import HTML
HTML("""
<div class="alert">
  <p>This is an alert box.</p>
</div>

<style>
.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
  margin-bottom: 15px;
}
</style>
""")

Answer 2

也许作为一个想法，将其作为 python 代码块来运行：

\n

#@title Alert Notification\nfrom IPython.display import HTML\n\nalert_info = \'\'\'\n<div class="alert alert-info" role="alert">\n  <h3 class="alert-heading">Note</h3>\n  An example of a nicely formatted box\n</div>\n\'\'\'\n\ndisplay(HTML(\'<link href="https://nbviewer.org/static/build/styles.css" rel="stylesheet">\'))\ndisplay(HTML(alert_info))\n

\n

\n

文本单元格使用Markdown语言版本进行格式化，该版本也在 GitHub 上使用。GitHub 上对该功能的支持仍在讨论中。

\n

我将 UTF-8 图标与引号块结合使用：

\n

> #  Info\n> This is a note.\n\n> # \xe2\x9a\xa0 Warning\n> This is a warning.\n\n> # \xe2\x9b\x94 Alert\n> This is an alert.\n

\n

\n