有时候我们不局限于 Markdown 自带的基础标签，那么这篇文章通过直接写 HTML 和 CSS 的方式去让文章内容有更多表达的多样式。
注意：我写的外挂标签是基于 React 和 SCSS，所以语法会和 HTML、CSS 有些许不同。
H1引用 Note
语法：
markdown
color: tiffany, blue, pink, red, orange, purple, green
<blockquote className="color"></blockquote>样式：
scss
blockquote {
border-radius: var(--border-radius);
border: var(--card-border-grey);
background-color: var(--color-bg-grey);
padding: 1rem 1.125rem;
p,
span {
color: var(--color-font-grey);
}
@each $color in tiffany, blue, pink, red, orange, purple, green {
&.#{$color} {
background-color: var(--color-#{$color}-trsp);
border-color: var(--color-#{$color});
}
}效果：
蝉鸣是窗外渐渐倒数的钟声
考卷的分数是往上爬的树藤
我画在你手掌上的蝴蝶，飞走了吗？
白云是蓝天正在放的风筝
青春是操场奔跑的我们
不要担心受伤
勇敢地朝梦想闯一闯
H1折叠框 Folding
语法：
markdown
color: tiffany, blue, pink, red, orange, purple, green
<details [open] className="color">
<summary>title</summary>
<div>content</div>
</details>样式：
scss
details {
border-radius: var(--border-radius);
border: var(--card-border-grey);
overflow: hidden;
margin-top: 1.5rem;
summary {
list-style: none;
position: relative;
padding: 0.875rem 1rem;
background-color: var(--color-bg-grey);
line-height: 1;
font-weight: bold;
cursor: pointer;
&::after {
position: absolute;
content: "⏵";
inset: 50% 0.875rem auto auto;
transform: translateY(-50%);
font-size: 1.25rem;
}
}
&[open] summary {
border-bottom: var(--card-border-grey);
&::after {
content: "⏷";
}
}
div {
padding: 0.75rem 1rem;
}
@each $color in tiffany, blue, pink, red, orange, purple, green {
&.#{$color} {
border-color: var(--color-#{$color});
summary {
background-color: var(--color-#{$color}-trsp);
}
&[open] summary {
border-bottom: 1px solid var(--color-#{$color});
}
}
}
}效果：
title
content
title
content
title
content
title
content
title
content
title
content
title
content
H1诗词标签 Poem
语法：
markdown
<div className="poem">
<span>title</span>
<span>poet</span>
content
</div>样式：
scss
.poem {
margin: var(--gap) auto;
max-height: 540px;
text-align: center;
writing-mode: vertical-rl;
span,
p {
font-family: var(--font-poem);
text-align: center;
}
span:nth-child(1) {
font-size: 2.5rem;
display: block;
}
span:nth-child(2) {
opacity: 0.6;
font-size: 1.125rem;
}
p {
font-size: 1.5rem;
line-height: 2;
text-decoration: underline dashed rgba(210, 13, 13, 0.7);
}
}效果：
水调歌头苏轼
丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。
明月几时有？把酒问青天。不知天上宫阙，今夕是何年？我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间？
转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。
H1未完待续框 To be continued
语法：
markdown
<div className="continued">
<span>☕欲知后事如何，</span>
<span>且听下回分解🍵</span>
</div>样式：
scss
.continued {
text-align: center;
background: var(--color-bg-grey);
border-radius: 12px;
padding: 10px;
span {
font-size: 1.5em;
}
span:first-child {
color: #ce6a28;
}
span:last-child {
color: #a8c212;
}
}效果：
☕欲知后事如何，且听下回分解🍵
