なんちゃって、IT生活。: ソースコードを表示させたい。Google Code-Prettify を使う方法。その2。

前回の記事『ソースコードを表示させたい。Google Code-Prettify を使う方法。その1。』の続きです。Google Code-Prettify を使うときの、縦または横のスクロールバー表示についてです。

シンタックスハイライトで表示したいソースコード部分のボリュームが大きくなって、pre タグで囲まれるブロックに入りきらない場合、縦方向や横方向にスクロールバーが表示されるとうれしい場合があります。スクロールバーを表示させるためには、pre タグに style 属性に、white-space や overflow-x, overflow-y などのキーワードの値を適切に定義してやることで可能になるようです。

前回の記事の最後のソースコード表示で試してみます。

<head>
    ...
    <style type="text/css"> 
        /* Google-code-prettifyの行番号を1行ずつ表示する */ 
        pre.prettyprint.linenums li{ list-style-type: decimal; } 
    </style>
    ...
</head>
<body>
    ...
<pre class="prettyprint lang-html linenums">
&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
    &lt;head&gt
        &lt;meta charset="UTF-8"&gt;
        &lt;title&gt;basic template&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        ...contents...
    &lt;/body&gt;
&lt;/html&gt;</pre>
    ...
    <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?lang=css&skin=doxy"></script>
</body>

採用する skin の種類によって、改行の折り返し等が異なってくるのですが、ここで使っている『Doxy』skin ですと、pre タグに style 属性を設定していないときには、上記 23 行目のように、長い行は改行されるようになっています。横方向のスクロールバーを表示させるためには、『white-space: pre; overflow-x: auto;』という style を追加します。

<pre class="prettyprint lang-html lang-css linenums" style="white-space: pre; overflow-x: auto;">

↑↓こんな感じに横方向のスクロールバーが表示できます。

<head>
    ...
    <style type="text/css"> 
        /* Google-code-prettifyの行番号を1行ずつ表示する */ 
        pre.prettyprint.linenums li{ list-style-type: decimal; } 
    </style>
    ...
</head>
<body>
    ...
<pre class="prettyprint lang-html linenums">
&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
    &lt;head&gt
        &lt;meta charset="UTF-8"&gt;
        &lt;title&gt;basic template&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        ...contents...
    &lt;/body&gt;
&lt;/html&gt;</pre>
    ...
    <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?lang=css&skin=doxy"></script>
</body>

『Doxy』skin 以外のもので、もともと『white-space: pre;』と style 設定されている skin ならば、再度ここで設定してやる必要はないかもしれません。

また、すべての Code-Prettify 部分に横スクロールバーをつけたい場合には、head タグ内で設定してやるのもいいかもしれませんね。

<head>
    ...
    <style type="text/css"> 
        /* Google-code-prettifyの行番号を1行ずつ表示する */ 
        pre.prettyprint.linenums li{ list-style-type: decimal; }
        /* Google-code-prettifyで改行せずに横スクロールバーを表示 */ 
        pre.prettyprint { white-space: pre; overflow-x: auto; }
    </style>
    ...
</head>

pre タグのブロックの行数を制限させて、縦方向にスクロールバーを表示させてみます。pre タグの style 属性に『height: 6em; overflow-y: auto;』も追加してみます。

<pre class="prettyprint lang-html lang-css linenums" style="height: 6em; overflow-y: auto; white-space: pre; overflow-x: auto;">

↓こんな感じに両方向のスクロールバーが出てきました。

<head>
    ...
    <style type="text/css"> 
        /* Google-code-prettifyの行番号を1行ずつ表示する */ 
        pre.prettyprint.linenums li{ list-style-type: decimal; } 
    </style>
    ...
</head>
<body>
    ...
<pre class="prettyprint lang-html linenums">
&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
    &lt;head&gt
        &lt;meta charset="UTF-8"&gt;
        &lt;title&gt;basic template&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        ...contents...
    &lt;/body&gt;
&lt;/html&gt;</pre>
    ...
    <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?lang=css&skin=doxy"></script>
</body>

なんとかスクロールバーが表示されました。…が、pre タグブロックの四隅が丸くカーブしていて可愛らしいのに、スクロールバーのところは角ばってしまって、ちょっと残念な感じもします…。

[参考サイト] special thanks!!

[今読んでる本↓] ※アフィリエイト広告です。

すぐそこにあるサイバーセキュリティーの罠 [ 勝村幸博 ]

価格:1980円
(2024/5/1 02:21時点)

なんちゃって、IT生活。

2025/01/29

ソースコードを表示させたい。Google Code-Prettify を使う方法。その2。

0 件のコメント:

コメントを投稿