画像を並べて表示する記法
文字にも使える
1234567890
from Settings
使い方：
一行に敷き詰め:
[| [画像URL][画像URL][画像URL]…] 横幅いっぱい1列並べ:
[*| [画像URL][画像URL][画像URL]…] 3列並べ :
[***| [画像URL][画像URL][画像URL]…] 5列並べ:
[*****| [画像URL][画像URL][画像URL]…] 最後の2行を有効にした場合、通常ならエディタの横幅を超える複数の画像を1行に敷き詰めて表示すると、下に余白？ができてしまう問題
でも本家ではなっていなさそう、、なぜだろう
style.css /* マトリクス記法 */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image { object-fit: contain; margin: 0 }
/* 太字記法と組み合わせて列数を変える */
.line [class^="level"] .deco-\| { flex-wrap: wrap }
.line .level-1 .deco-\| > span { width: calc(100%/1) }
.line .level-2 .deco-\| > span { width: calc(100%/2) }
.line .level-3 .deco-\| > span { width: calc(100%/3) }
.line .level-4 .deco-\| > span { width: calc(100%/4) }
.line .level-5 .deco-\| > span { width: calc(100%/5) }
.line .level-6 .deco-\| > span { width: calc(100%/6) }
.line .level-7 .deco-\| > span { width: calc(100%/7) }
.line .level-8 .deco-\| > span { width: calc(100%/8) }
.line .level-9 .deco-\| > span { width: calc(100%/9) }
.line .level-10 .deco-\| > span { width: calc(100%/10) }
.line [class^="level"] .deco-\| img.image { object-fit: cover; width: 100%; height: 100% }
/* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */
.line .deco-\| > span, .line [class^="level"] .deco-\| > span { overflow: hidden }
.line .deco-\| img.image, .line [class^="level"] .deco-\| img.image { margin: .2em }文字サイズ固定化
[* ] と [| ] を併用時に文字サイズを大きくする必要はないと思うのでstyle.css.line .deco-\|.deco-\* > span{ font-size: 15px; line-height: 15px;}もう公式で対応してしまったので、新しく使うことはない？
n列並べとかは一応あるか