Hexo中几种自定义样式块的html写法

为什么不用更高级的md语法和渲染器？懒

直接将其写在文章的markdown里即可，不需要额外插件

提示

1
2
3
4
5
6
7

<div style="padding: 15px 20px; border-left: 5px solid #42b983; background-color: #f3f5f7; margin: 20px 0; border-radius: 5px;">
  <p style="font-weight: bold; margin: 0 0 8px 0; color: #2c3e50;">💡 提示</p>
  <div style="color: #34495e; line-height: 1.6;">
    这里是提示内容...
  </div>
</div>

效果：

💡 提示

这里是提示内容...

警告

1
2
3
4
5
6
<div style="padding: 15px 20px; border-left: 5px solid #e6a23c; background-color: #fdf6ec; margin: 20px 0; border-radius: 5px;">
  <p style="font-weight: bold; margin: 0 0 8px 0; color: #b88230;">⚠️ 警告</p>
  <div style="color: #5d6d7e; line-height: 1.6;">
    这里是警告内容...
  </div>
</div>

效果：

⚠️ 警告

这里是警告内容...

危险

1
2
3
4
5
6
<div style="padding: 15px 20px; border-left: 5px solid #f56c6c; background-color: #fef0f0; margin: 20px 0; border-radius: 5px;">
  <p style="font-weight: bold; margin: 0 0 8px 0; color: #c45656;">❗️ 危险</p>
  <div style="color: #5d6d7e; line-height: 1.6;">
    这里是危险警告内容...
  </div>
</div>

效果：

❗️ 危险

这里是危险警告内容...

知识

1
2
3
4
5
6
<div style="padding: 15px 20px; border-left: 5px solid #8a2be2; background-color: #f9f0ff; margin: 20px 0; border-radius: 5px;">
  <p style="font-weight: bold; margin: 0 0 8px 0; color: #7b68ee;">📚 知识</p>
  <div style="color: #5d6d7e; line-height: 1.6;">
    这里是知识要点内容...
  </div>
</div>

效果：

📚 知识

这里是知识要点内容...

一行写完

<!-- 提示 -->
<div style="padding:12px;border-left:4px solid #42b983;background:#f3f5f7;margin:16px 0"><strong>💡 提示</strong><br>内容...</div>

<!-- 警告 -->
<div style="padding:12px;border-left:4px solid #e6a23c;background:#fdf6ec;margin:16px 0"><strong>⚠️ 警告</strong><br>内容...</div>

<!-- 危险 -->
<div style="padding:12px;border-left:4px solid #f56c6c;background:#fef0f0;margin:16px 0"><strong>❗️ 危险</strong><br>内容...</div>