memo
No.1254
相変わらずの四苦八苦だが、別アカのほうで助けてもらってwhite-space: pre;を追加。
あんまり効いてないと思う。
でも教えてもらわなかったらこれが必要なんだってことすらわかんなかった。
あとcode（インラインブロック）とpre（ブロック）に分けた。
code側ではmax-width: 100%;を指定して記事からはみ出ないようにした。
/* code */
.deco-code {
display: inline-block;
max-width: 100%;
overflow-x: auto;
border-radius: 5px;
padding: 1px 2px;
vertical-align: text-bottom;
white-space: pre;
}
意外とこういうのが効く。PC側から見たスクロールバーダサい問題は後で考えよう。
pre（ブロック）が、むっずい…！
ハイライトjsを捨てればうまくいく方法を教えてもらったが、捨てるのか…。うーん。
いまのとここんな感じ。
/*pre*/
.deco-pre {
display: block;
overflow-x: auto;
border-radius: 5px;
padding: 15px 5px;
white-space: pre;
}
/*インデントなし 要素・クラス*/
.deco-pre :is(.hljs-comment, .hljs-meta .hljs-deletion, .hljs-doctag, .hljs-regexp, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id, .hljs-selector-pseudo, .hljs-tag, .hljs-template-tag, .hljs-variable.language_)::before {
content: "\A";
}
/*インデントなし 先頭行の改改行は無効*/
.deco-pre :is(.hljs-comment, .hljs-meta .hljs-deletion, .hljs-doctag, .hljs-regexp, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id, .hljs-selector-pseudo, .hljs-tag, .hljs-template-tag, .hljs-variable.language_):first-child:before {
content: "";
}
/*インデントあり プロパティ*/
.deco-pre :is(.hljs-attribute, .hljs-built_in)::before {
content: "\A ";
}
クラスや要素の後に改行文字つっこんでるんだけど、指定してるクラスが１つならいいけど大量にあるとダサい。
大量に書かなければいいか？
こんなに指定してるほうがあんまりないか。
プロパティのところは見ればわかるんだけど、インデントがうまくいかなくて、改行の後に全角スペースつっこんでインデントぽくしてるっていう。
単純にデザインの問題なんだよな。
htmlのほうは単純に改行はできるんだけど、余白がないのでやっぱりwhite-space: pre;が効く状況を作る必要があると思う。
私のやり方が違うのかもしれないけど、にほんごドキュメント にある
hljs.configure({
useBR: true, // 改行にbrタグを使用
tabReplace: ' ', // タブを全角スペース2つに変更
});もあんまり効いてない気がする。
いや、聞いてはいるっぽいんだけど、<br>の出力ができないので
コード記述【本来js側で入れる改行】【スペース】
【beforeで入れた改行】コード記述
になってるので、意味なくなってる。
てがろぐ側では単なるtextに対して何かしらアクションは…。
設定で「投稿内の改行は反映する」としているので、これ以上打つ手がないかも。
いったん終わるか。
コピペ用のjsまでセットできたらたこつぼのほうに投げてもいいかもな。
あんまり効いてないと思う。
でも教えてもらわなかったらこれが必要なんだってことすらわかんなかった。
あとcode（インラインブロック）とpre（ブロック）に分けた。
code側ではmax-width: 100%;を指定して記事からはみ出ないようにした。
/* code */
.deco-code {
display: inline-block;
max-width: 100%;
overflow-x: auto;
border-radius: 5px;
padding: 1px 2px;
vertical-align: text-bottom;
white-space: pre;
}
意外とこういうのが効く。PC側から見たスクロールバーダサい問題は後で考えよう。
pre（ブロック）が、むっずい…！
ハイライトjsを捨てればうまくいく方法を教えてもらったが、捨てるのか…。うーん。
いまのとここんな感じ。
/*pre*/
.deco-pre {
display: block;
overflow-x: auto;
border-radius: 5px;
padding: 15px 5px;
white-space: pre;
}
/*インデントなし 要素・クラス*/
.deco-pre :is(.hljs-comment, .hljs-meta .hljs-deletion, .hljs-doctag, .hljs-regexp, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id, .hljs-selector-pseudo, .hljs-tag, .hljs-template-tag, .hljs-variable.language_)::before {
content: "\A";
}
/*インデントなし 先頭行の改改行は無効*/
.deco-pre :is(.hljs-comment, .hljs-meta .hljs-deletion, .hljs-doctag, .hljs-regexp, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id, .hljs-selector-pseudo, .hljs-tag, .hljs-template-tag, .hljs-variable.language_):first-child:before {
content: "";
}
/*インデントあり プロパティ*/
.deco-pre :is(.hljs-attribute, .hljs-built_in)::before {
content: "\A ";
}
クラスや要素の後に改行文字つっこんでるんだけど、指定してるクラスが１つならいいけど大量にあるとダサい。
大量に書かなければいいか？
こんなに指定してるほうがあんまりないか。
プロパティのところは見ればわかるんだけど、インデントがうまくいかなくて、改行の後に全角スペースつっこんでインデントぽくしてるっていう。
単純にデザインの問題なんだよな。
htmlのほうは単純に改行はできるんだけど、余白がないのでやっぱりwhite-space: pre;が効く状況を作る必要があると思う。
私のやり方が違うのかもしれないけど、にほんごドキュメント にある
hljs.configure({
useBR: true, // 改行にbrタグを使用
tabReplace: ' ', // タブを全角スペース2つに変更
});もあんまり効いてない気がする。
いや、聞いてはいるっぽいんだけど、<br>の出力ができないので
コード記述【本来js側で入れる改行】【スペース】
【beforeで入れた改行】コード記述
になってるので、意味なくなってる。
てがろぐ側では単なるtextに対して何かしらアクションは…。
設定で「投稿内の改行は反映する」としているので、これ以上打つ手がないかも。
いったん終わるか。
コピペ用のjsまでセットできたらたこつぼのほうに投げてもいいかもな。
