一

你也许已经发现了：在撰写操作指南或者其他什么介绍类的文章时，可能会有值得特别注意的点需要你着重标注出来。相比于正文的“平平无奇”，你可能希望这些要点能更加“引人注目”。

或许加粗是个不错的方法，只需要简单的 Ctrl+B 就能突出你想要的重点，但是这样未免显得有些“寒酸”。那标红呢？也是个不错的方法，简单易操作，同时也十分醒目，但是也有点“简陋”。有没有什么更加能够突出要点的方法呢？如果你想要你的文章中的要点优雅的展示出来，不如试试下面这种方法。

复制下面的代码到你的 Typora，或者其他 MD 编辑器中，在相应的冒号中填入你想要的内容，就和下面一样:

#"重要"提示提示框，在"重要："后填上你想要的内容，例如"这是一个示例。"
<div style="padding: 15px; border: 1px solid transparent; border-color: transparent; margin-bottom: 20px; border-radius: 4px; color: #31708f; background-color: #d9edf7; border-color: #bce8f1;">
&#x1F50A<b> 重要：这是一个示例。</b>
</div>

你会得到这样一个提示框：

你可以在倒数第二行的<b> </b>中填入任何你想要的内容来替换冒号前的内容。你也可以按照 HTML 的语法规则替换段代码的任何内容，例如将字体替换成白色、将方框的圆角改大并将背景色换成正蓝色。

#这段代码与上面那段不一样的地方: border-radius: 35px; color: #ffffff; background-color: #0000ff; border-color: #0000ff;
<div style="padding: 15px; border: 1px solid transparent; border-color: transparent; margin-bottom: 20px; border-radius: 35px; color: #ffffff; background-color: #0000ff; border-color: #0000ff;">
&#x1F50A<b> 重要：这是一个示例。</b>
</div>

效果是这样的：

看到这里，相信你应该知道如何让将这样的提示框应用在你自己的文章中了。如果你真的知道，那就快去试试吧！

二

在这里有几个作者常用的提示框示例，你也可以复制去你自己的编辑器中看看效果。

#"备注“提示框
<div style="padding: 15px; border: 1px solid transparent; border-color: transparent; margin-bottom: 20px; border-radius: 4px; color: #7d637a; background-color: #f6edf5; border-color: #f1e4f0;">
&#x1F4AC<b> 备注：</b>
</div>

#"提示"提示框
<div style="padding: 15px; border: 1px solid transparent; border-color: transparent; margin-bottom: 20px; border-radius: 4px; color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6;">
&#x1F442<b> 提示：</b>
</div>

#"重要"提示提示框
<div style="padding: 15px; border: 1px solid transparent; border-color: transparent; margin-bottom: 20px; border-radius: 4px; color: #31708f; background-color: #d9edf7; border-color: #bce8f1;">
&#x1F50A<b> 重要：</b>
</div>

#"注意"提示框
<div style="padding: 15px; border: 1px solid transparent; border-color: transparent; margin-bottom: 20px; border-radius: 4px; color: #8a6d3b;; background-color: #fcf8e3; border-color: #faebcc;">
&#x1F628<b> 注意：</b>
</div>

#"警告"提示框
<div style="padding: 15px; border: 1px solid transparent; border-color: transparent; margin-bottom: 20px; border-radius: 4px; color: #a94442; background-color: #f2dede; border-color: #ebccd1;">
&#x26D4<b> 警告：</b>
</div>

实际效果如下：

这篇小小的分享到这里就结束了，如果你有更好的表示重点语句的方法，可以发邮件到 [email protected] 告诉我。