拡張記法がきた!
*や/だけでなく、!"#%&'()*+,-./{|}<>_~などの記号も使用できます
記号はdeco-{ deco-! deco-*のように、css classとして出力されるので
UserCSSを使って自由な見た目を与える事ができます
とんでもねえことになったな!!!!!!!
まずは実際のヘルプページを見てきてほしいけど、こんな表現ができるようになってるよ。
https://gyazo.com/1ff69c777924dd943b0a5222977d4378
すごい(すごい)
こんなん楽しいに決まっとるわ!!!
さっそく遊んでみたよ! 秋なので特番ぽく三連発だおらーーー!!
-.icon
1. 校正用のスタイル
削除 [- 削除] ※これはデフォルトの打ち消し線の記法
挿入[+ 挿入] 挿入を意味する記法ってことにしてみた
挿入を取り消し[-+ 挿入を取り消し] こういう表示で意味が通るのか、ちょっとわかんない
例)春は曙あけぼの。ようよう白くなりゆく山ぎは山際、少し明かりて、紫だちたる雲の細くたなびきたる。
code: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. 解説を控えめに挿入
コメントっぽい[# コメントっぽい]
例)文章の途中ですが解説という名の補足です。
code:style.css
.deco-\# { color: green; font-size: smaller; padding: 0 .2em }
3. 文中に引用を挿入
ねこだいすき[" ねこだいすき]
例)文章の途中ですがここだけ引用です。
code: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 のアップデートに対応