コードのハイライト機能のテスト。
元々コードの行番号がズレる件について書いていましたが、めちゃ間違っていたので修正しました。
2021/01/21 追記
cocoon開発者である わいひらさんに修正して頂きました。感謝です。
私が最初書いていたmarginが原因ではなく、line-heightの扱いが異なっているのが原因であるとのこととで、line-heightを揃えるようにして頂きました。
おかげで高さは揃いました。若干行番号部分とコード本文とで縦位置が異なっていますが、実用上は問題無い範囲でしょう。
2021/02/01 追記
cocoonのバージョンを2.2.6.6に更新して諸々ばっちり揃いました。
cocoon-childで微妙な修正していましたが、不要になりました。
1 : 行番号についてはpreの::beforeで書かれていて、1〜99まで値が改行しながら書かれている。
2 : preのpadding内に書かれるので高さはpreの大きさによる。
3 : preの高さはpreのコンテンツで決まるので結果として必要な行番号が表示されるようになる。
4 :
5 : コード本文はpreのline-heightに!importantが指定されているのでより詳細な指定がなされてもpreの指定が優先される。
6 :
7 :
8 :
9 :
コメント