有没有办法在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 代码块进行剪裁来运行：

#@title Alert Notification
from IPython.display import HTML

alert_info = '''
<div class="alert alert-info" role="alert">
  <h3 class="alert-heading">Note</h3>
  An example of a nicely formatted box
</div>
'''

display(HTML('<link href="https://nbviewer.org/static/build/styles.css" rel="stylesheet">'))
display(HTML(alert_info))

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

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

> # 🗒 Info
> This is a note.

> # ⚠ Warning
> This is a warning.

> # ⛔ Alert
> This is an alert.

Answer 3

类

alert-*

很可能是在 Jupyter Notebook 中预定义的，但在 Google Colab 中却没有。我看到一个简单的解决方案 - 只需自己定义这些类，也许像这样：

.alert {
  border-radius: 10px;
  background-color: #bbb;
  border: 2px solid #999;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-left: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-family: 'Arial', sans-serif;
}

.alert > h3 {
  display: block;
  font-size: 30px;
  margin-top: 5px;
  margin-bottom: 15px;
}

.alert-info {
  background-color: #1af !important;
  border: 2px solid #04a !important;
}

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

  An example of a nicely formatted box
</div>

或者也许改变颜色（

1af

等）。

如果您需要一个比运行上面代码片段时出现的框更好的框，您可以使用第一个漂亮框示例中的样式。

更新：使用您的风格的框。

.alert {
  border-radius: 10px;
  background-color: #bbb;
  border: 2px solid #999;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-left: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-family: 'Arial', sans-serif;
}

.alert > h3 {
  display: block;
  font-size: 30px;
  margin-top: 5px;
  margin-bottom: 15px;
}

.alert-info-stylish {
  color: rgba(0,0,0,.8) !important;
  background-color: white !important;
  margin-top: 1em !important;
  margin-bottom: 1em !important;
  margin: 1.5625emauto !important;
  padding: 0 .6rem .8rem !important;
  overflow: hidden !important;
  page-break-inside: avoid !important;
  border-radius: .25rem !important;
  box-shadow:0 .2rem .5rem rgba(0,0,0,.05), 0 0 .05rem rgba(0,0,0,.1) !important; 
  transition: color .25s, background-color .25s, border-color .25s !important;
  border-right: 1px solid #dee2e6 !important;
  border-top: 1px solid #dee2e6 !important;
  border-bottom: 1px solid #dee2e6 !important;
  border-left:.2rem solid #007bff80 !important;
}

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

  An example of a nicely formatted box
</div>

Answer 4

来自 google.colab 导入输出

output.eval_js('alert("我是警报")')