CSS/preとcodeでマークアップされたソースコードの1行目を無視する

CSS/preとcodeでマークアップされたソースコードの1行目を無視する

HTML でプログラムソースコードをマークアップする場合よく、このように pre と code のタグを組み合わせて表現される

 <pre>
 <code>
 function(){
     alert("hoge");
 }
 </code>
 </pre>

しかし、このようにソースの見やすさ重視で記述した場合、<code> 直後の改行がそのまま反映されてしまい、ブロック上部に妙な空間ができてしまうのである。 確かに改行を取って、このように記述すればいいのだが

 <pre>
 <code>function(){
     alert("hoge");
 }
 </code>
 </pre>

ソースの可読性は落ちるし、システム的にできなくなっているモノもあるだろう。

このような場合 CSS

code::first-line{
    line-height: 0;
}

と記述することで1行目の改行を無視してブロック上部の空間を詰めることができる。

当然だがこれは全部の code ブロックの1行目が改行しか無い前提である。

Tags

css/howto/pre_code_ignore_first_line.txt · 最終更新: 2019-12-03 10:48 by ore