レインボー記法
文字装飾記法とかを見て、いじっていたらできてしまった。
けっこう派手なエフェクトをかける文字装飾記法です。
https://gyazo.com/c8da49864bae65052e83c327fd564af2
使い方は、自分のページのstyle.css に
code:css
@import "/api/code/scrapboxlab/レインボー記法/style.css"; /* レインボー記法用 */
と追加すると、[" ]という記法が追加されるので、
レインボー記法のテストだよ
レインボー記法のテストだよ
くどいようだけどレインボー記法のテストだよ
という風に記述する。
Chrome と Firefox では動いた。
code:style.css
/*.deco-\! {*/
.deco-\" {
color: #fff; /* 白文字 */
background: linear-gradient( to right,
red,
orange,
yellow,
green,
aqua,
blue,
purple,
red
) 0% center / 200% auto ; /* グラデーション */
padding: 0.1em 0.2em 0.1em 0.2em;
animation: rainbow 4s linear infinite;
}
@keyframes rainbow {
to { background-position-x: 200%; }
}
/help-jp/文字装飾記法
/forum-jp/文字色
文字装飾記法をUserCSSで拡張する
CSS だけでテキストを虹色のグラデーションでアニメーションさせる - Corredor
CSS グラデーションの使用 - CSS: カスケーディングスタイルシート | MDN
CSS アニメーションの使用 - CSS: カスケーディングスタイルシート | MDN
@keyframes - CSS: カスケーディングスタイルシート | MDN
#UserCSS
#文字装飾記法
入力を補助するスクリプト。
ポップアップメニューに追加される。
code: script.js
scrapbox.PopupMenu.addButton({
title: '🌈',
onClick: text => text.split(/\n/)
.map(line => {
if (line.match(/\[\"\s+/)) {
return line.replace(/\\"\s+/g, '').replace(/\/g, '')
} else {
if (!line.length) return line
return [" ${line}]
}
}).join('\n')
})
#UserScript
#正規表現