コードブロックの直後にインデントされた本文を置くUserCSS

コードブロックの直後にはインデントされた文章が置けない

code:test.js

console.log("hello world")

このコードブロック直後にある文章をインデントすると

code:test.js

console.log("hello world")

このようにコードブロックの中身になる

すでにある対処法↓

code:c

hogefuga

こうなる

code:c

hogefuga

コメント

これを解消するためにコードブロックの直後の空白行を非表示にするCSSスタイルを作った

コードブロックの直後に作った空白行を非表示にする

あたかもインデントされた本文が置かれたような見た目になる

https://gyazo.com/60d92e9658bc6017e113338eb83d89d4

code:style.css

.line:has(> .code-block) + .line:has(.empty-char-index):not(:has(.code-block)) {

/* background-color: red; */

display: none;

}

code:style.css

.line:has(> .code-block) + .line:has(.empty-char-index):not(:has(.code-block)) {

/* background-color: red; */

height: 0px;

}

このCSSルールの問題

非表示になった空白行の直後に行を追加する操作がめちゃくちゃ面倒

https://gyazo.com/241bf62218ecf17d23655adca377f478

コードブロックの最後の行にカーソルを置いてEnterで改行し新しく非表示の空白行を作ると、もともとあった非表示の空白行が現れる。スタイルセレクターの指定条件から外れて適用されなくなるので

これを防ぐには、行を追加するために次の行で行から行を作る

https://gyazo.com/7b5249fedea8ce3fd93fa5bd2e612cf2

いつもの操作とは異なる特別な操作をしなくてはならず面倒

将来このCSSが利用できなくなったときに、ページのそこら中に謎の空白行が現れて読みづらくなりそう