前回の記事『ソースコードを表示させたい。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">
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>basic template</title>
</head>
<body>
...contents...
</body>
</html></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 を追加します。
<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">
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>basic template</title>
</head>
<body>
...contents...
</body>
</html></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;』も追加してみます。
<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">
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>basic template</title>
</head>
<body>
...contents...
</body>
</html></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!!
- GitHub - googlearchive/code-prettify
- Blogger で google code prettify を使うときに、コードが折り返されてしまう
- white-space - MDN Web Docs
- overflow-x - MDN Web Docs
- overflow-y - MDN Web Docs
[今読んでる本↓] ※アフィリエイト広告です。
 | すぐそこにあるサイバーセキュリティーの罠 [ 勝村 幸博 ] 価格:1980円 |
0 件のコメント:
コメントを投稿