Note 文字装飾記法
テキスト見本
code:style.css
.line span.deco-\! {
display: block;
padding: 1em;
border-radius: 4px;
vertical-align: middle;
background-color: #555; /* Info Message の背景色 */ color: #ccc; /* Info Message の文字色 */ }
.line:not(.cursor-line) span.deco-\! {
margin-top: -1.8em;
margin-bottom: -1.8em;
}
/* 左にアイコンを挿入する */
.line:not(.cursor-line) span.deco-\!::before {
font-family: 'Font Awesome 5 Free';
content: "\f06a";
font-weight: 700;
margin-right: .3em;
}
/* !* という記法の場合 Warning Message とする */ .line .level-1 span.deco-\! {
font-weight: normal;
}
/* !** という記法の場合 Alert Message とする */ .line .level-2 span.deco-\! {
font-size: .833em; /* 1/1.2 */
font-weight: normal;
}
サンプル
[! Info Message]
[!* Warning Message]
[!** Alert Message]
Info Message
Warning Message
Alert Message