Enlighterで横スクロールを可能にする設定

コードのハイライトをEnlighterプラグイン(Enlighter – Customizable Syntax Highlighter)で行っているのですが、コマンド等の出力結果が長い場合、デフォルトの設定のだと複数行表示となってしまい見づらいため、横にスクロールするように設定しました。

変更点

変更前

 

 

 

変更後

docker search httpd
NAME                                    DESCRIPTION                                     STARS               OFFICIAL            AUTOMATED
httpd                                   The Apache HTTP Server Project                  2159                [OK]
hypriot/rpi-busybox-httpd               Raspberry Pi compatible Docker Image with a …   44
centos/httpd                                                                            21                                      [OK]
centos/httpd-24-centos7                 Platform for running Apache httpd 2.4 or bui…   19

変更前は出力結果の長いコマンドは複数行に渡って表示され、見づらい状態でしたが、cssを当てることで、ターミナルと同等の表示が可能になりました。表示が隠れてしまっている部分は横スクロールで確認可能です。

設定方法

下記のcssを使用しているテーマのcssファイル(styles.css) に追加すればOKです。

.EnlighterJS {
         width: auto !important;
         overflow-x: auto !important;
         word-wrap: normal !important;
}

ol.EnlighterJS,
ul.EnlighterJS{
     display: block !important;
}

.EnlighterJS li{
   white-space: pre !important;
    display: table-caption;
}

ol.mochaEnlighterJS, 
ul.mochaEnlighterJS {
    background-color: #2D2522 !important; 
}
最後のol.mochaEnlighterJS, ul.mochaEnlighterJSのbackground-colorはそれぞれのテーマの背景色に合わせて修正する必要があります。

参考

Horizontal scroll on small screen

コメント