はじめに
Qiitaだとコードブロック上部にファイル名を表示することが出来るが、Qrunchでは出来ない。
なので、カスタムCSSを使用してファイル名を表示出来るようにしてみた。
mdをいじる
ファイル名を表示するため```の後ろに言語名を、コードブロックの1行目にファイル名を追加する。
```php
test.php
public function home($request) {
$i =0;
return "<div class='aaa'>" . $i . "</div>";
}
```
下のようなHTMLに変換される。
- "code"要素:```の後ろに言語名を指定すると”language-言語名”クラスが追加される。何も指定していない場合はクラス属性は定義されない。
- "L0"クラス:コードブロックの1行目に対応する。以降"L1"が2行目、"L3"が3行目に対応。11行目は再度"L0"、12行目は"L1"クラスが付与される。
<pre class="prettyprint linenums prettyprinted" style="">
<ol class="linenums">
<li class="L0">
<code class="language-php">~省略~</code>
</li>
<li class="L1">
<code class="language-php">~省略~</code>
</li>
<li class="L2">
<code class="language-php">~省略~</code>
</li>
<li class="L3">
<code class="language-php">~省略~</code>
</li>
<li class="L4">
<code class="language-php">~省略~</code>
</li>
</ol>
</pre>
ちなみにQrunchでは言語を指定しなくてもいい感じにハイライトされるが、指定するとその言語に合わせたハイライトになるようだ。
↓言語名にphpを指定したコードブロック
public function home($request) {
$i =0;
return "<div class='aaa'>" . $i . "</div>";
}
↓言語名にhtmlを指定したコードブロック
public function home($request) {
$i =0;
return "<div class='aaa'>" . $i . "</div>";
}
CSSをいじる1(コードブロックの1行目のマーカーを取り除く)
コードブロックの1行目のマーカーを取り除くために下のCSSをカスタムCSSに追加する。
.markdown-body li.L0 {
display: inline-block;
}
これだと1行目、11行目…の全ての"L0"に適用されてしまうので"first-child"疑似クラスを追加する。
.markdown-body li.L0:first-child {
display: inline-block;
}
これで最初の"L0"にのみ適用される。
だが、例えばコードブロックにコマンドを表示する場合のように1行目からコードを表示したいこともあるだろう。
その場合に対応するために"language-(言語名)"クラスを持たない"code"要素に下のCSSを追加する。
.markdown-body li.L0:first-child {
display: inline-block;
}
.markdown-body li.L0:first-child code:not([class^=language-]) {
display: list-item;
position: relative;
left: -10px;
padding-left: 10px;
}
これで言語名の有無でファイル名とコードを表示出来るようになった。
CSSをいじる2(ファイル名の見た目を整える)
次にファイル名の見た目を整えるために下のCSSを追加する。
.markdown-body li.L0:first-child {
display: inline-block;
}
.markdown-body li.L0:first-child code:not([class^=language-]) {
display: list-item;
position: relative;
left: -10px;
padding-left: 10px;
}
.markdown-body li.L0:first-child code[class^=language-] {
background-color: #777;
border-radius: 0px;
position: relative;
top: -12px;
}
これで見た目が変わったはず。
CSSをいじる3(ファイル名の文字色を変更する)
ファイル名の書き方によってはハイライトされることもあるので下のCSSを追加する。
.markdown-body li.L0:first-child {
display: inline-block;
}
.markdown-body li.L0:first-child code:not([class^=language-]) {
display: list-item;
position: relative;
left: -10px;
padding-left: 10px;
}
.markdown-body li.L0:first-child code[class^=language-] {
color: #eee;
background-color: #777;
border-radius: 0px;
position: relative;
top: -12px;
}
.markdown-body li.L0:first-child code[class^=language-] span.str,
.markdown-body li.L0:first-child code[class^=language-] span.lit,
.markdown-body li.L0:first-child code[class^=language-] span.typ,
.markdown-body li.L0:first-child code[class^=language-] span.kwd,
.markdown-body li.L0:first-child code[class^=language-] span.tag,
.markdown-body li.L0:first-child code[class^=language-] span.atn {
color: #eee;
}
/app/test.php
public function home($request) {
$i =0;
return "<div class='aaa'>" . $i . "</div>";
}
所感
CSSだけで子要素に応じて親要素の見た目をいじるのが思ったより面倒だった。
JavaScriptだったら簡単なのになぁ。
技術ブログをはじめよう
Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
.qrunch.io
メールアドレスで登録する
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく
0件のコメント