拡張記法がきた!
> *
や /
だけでなく、 !"#%&'()*+,-./{|}<>_~
などの記号も使用できます
> 記号は deco-{ deco-! deco-*
のように、css classとして出力されるので
> UserCSSを使って自由な見た目を与える事ができます
とんでもねえことになったな!!!!!!!
まずは実際のヘルプページを見てきてほしいけど、こんな表現ができるようになってるよ。
すごい(すごい)
こんなん楽しいに決まっとるわ!!!
さっそく遊んでみたよ! 秋なので特番ぽく三連発だおらーーー!!
1. 校正用のスタイル
削除 [- 削除]
※これはデフォルトの打ち消し線の記法
挿入 [+ 挿入]
挿入を意味する記法ってことにしてみた
挿入を取り消し [-+ 挿入を取り消し]
こういう表示で意味が通るのか、ちょっとわかんない
例)春は曙あけぼの。ようよう白くなりゆく山ぎは山際、少し明かりて、紫だちたる雲の細くたなびきたる。
style.css/* [+ 挿入] */
.deco-\+ { color: blue }
/* [-+ 挿入取り消し] */
.deco-\+.deco-- { color: lightgrey }
.deco-\+.deco--::before {
content: 'イキ'; display: inline-block;
color: blue; font-size: smaller; text-decoration: none !important; vertical-align: super }
2. 解説を控えめに挿入
コメントっぽい [# コメントっぽい]
例)文章の途中ですが解説という名の補足です。
style.css.deco-\# { color: green; font-size: smaller; padding: 0 .2em }
3. 文中に引用を挿入
ねこだいすき [" ねこだいすき]
例)文章の途中ですがここだけ引用です。
style.css.deco-\" {
border-radius: .2em; padding: 0 .4em; background-color: rgba(128,128,128,0.1);
font-size:95%; font-style: italic }
.deco-\"::before {
color: #a0a0a0; font-size:85%; font-family: 'Font Awesome 5 Free'; font-weight: 900;
content: '\f10d'; vertical-align: super }
これはアイデア次第で色々できそうだ~~~!
初出 2017-10-16
2021-07-06 Font Awesome のアップデートに対応