Qrunchのコードブロックにファイル名を表示する

公開日:2019-07-05
最終更新:2019-07-05

はじめに

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だったら簡単なのになぁ。

記事が少しでもいいなと思ったらクラップを送ってみよう!
2
+1
@hiroitaの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする