Markdown 实现 Callout

成功样式

✅ 成功
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div>
  <style>
      .callout-note-b-sucess {
        border-top-color: rgb(238, 227, 207);
        border-right-color: rgb(238, 227, 207);
        border-bottom-color: rgb(238, 227, 207);
        border-left-color: rgb(238, 227, 207);
        margin-bottom: 20px;
        padding: 15px;
        position: relative;
        border: 0px solid #eee;
        border-left-width: 5px;
        border-radius: 3px;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 2px 1px 3px #bbb;
        background-color: #f0fff0;
        color: #004d00;
        border-color: #62b32d;
      }
  </style>
  <div class="callout-note-b-sucess">
✅ 成功
  </div>
</div>

信息样式

➡ 信息
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div>
  <style>
      .callout-note-b-info {
        border-top-color: rgb(238, 227, 207);
        border-right-color: rgb(238, 227, 207);
        border-bottom-color: rgb(238, 227, 207);
        border-left-color: rgb(238, 227, 207);
        margin-bottom: 20px;
        padding: 15px;
        position: relative;
        border: 0px solid #eee;
        border-left-width: 5px;
        border-radius: 3px;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 2px 1px 3px #bbb;
        background-color: rgb(235, 241, 251);
        color: darkblue;
        border-color: #4983df;
      }
  </style>
  <div class="callout-note-b-info">
 ℹ️ 信息
  </div>
</div>

警告样式

⚠️ 警告
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div>
  <style>
      .callout-note-b-warning {
        border-top-color: rgb(238, 227, 207);
        border-right-color: rgb(238, 227, 207);
        border-bottom-color: rgb(238, 227, 207);
        border-left-color: rgb(238, 227, 207);
        margin-bottom: 20px;
        padding: 15px;
        position: relative;
        border: 0px solid #eee;
        border-left-width: 5px;
        border-radius: 3px;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 2px 1px 3px #bbb;
        background-color: #fefee9;
        color: #ee912a;
        border-color: #ec762f;
      }
  </style>
  <div class="callout-note-b-warning">
⚠️ 警告
  </div>
</div>

错误样式

❌ 错误
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div>
  <style>
      .callout-note-b-error {
        border-top-color: rgb(238, 227, 207);
        border-right-color: rgb(238, 227, 207);
        border-bottom-color: rgb(238, 227, 207);
        border-left-color: rgb(238, 227, 207);
        margin-bottom: 20px;
        padding: 15px;
        position: relative;
        border: 0px solid #eee;
        border-left-width: 5px;
        border-radius: 3px;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 2px 1px 3px #bbb;
        background-color: #faf4f4;
        color: #bf1717;
        border-color: #e81b41;
      }
  </style>
  <div class="callout-note-b-error">
❌ 错误
  </div>
</div>