如何在Google Colab中显示Alert提示框？

在Jupyter Notebook里，借助alert HTML标签嵌入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中渲染效果很差：

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