Pre に行番号を付ける方法

 

Pre タグにCSSで行番号を付けるには次のようにする。

スクロールバーもついでに装飾。

Javascriptを使うまでもない。

 

 pre {
 background-color: #002000;
 color: #E2E2E2;
 font-family: Consolas, Monaco, 'Andale Mono', monospace;
 direction: ltr;
 text-align: left;
 white-space: pre;
 word-spacing: normal;
 -moz-tab-size: 4;
 -o-tab-size: 4;
 tab-size: 4;
 -webkit-hyphens: none;
 -moz-hyphens: none;
 -ms-hyphens: none;
 hyphens: none;
 padding: 15px;
 display: block;
 font-size: 15px;
 border-radius: 22px;
 overflow: auto;
 position: relative;
 padding: 1em 1em 1em 3em;
 }

pre:before {
 content: "01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 7576 77 78 79 80";
 height: 96%;
 width: 2em;
 position: absolute;
 left: 5px;
 word-wrap: break-word;
 overflow: hidden;
 color: green;
 white-space: pre-line;
 }

pre::-webkit-scrollbar{
 height: 10px;
 width:10px;
 }
 pre::-webkit-scrollbar-track{
 background: transparent;
 border:none;
 }
 pre::-webkit-scrollbar-thumb{
 background: transparent;
 border-radius: 10px;
 box-shadow: inset 0 0 8px rgba(255,255,255,0.8);
 }

 

  • 7 views
    Pjax で非同期画面遷移するWordpress テーマ Pjax Blog に変えてみた。 Pjax Blog テーマでは、Barba.js が使用されている。 Pjax Blog | Uniqu ...
  • 17 views
    WordPressの投稿記事は、誤字脱字を少し修正しただけでも更新日時が変更されてしまう。 誤字の訂正だけで3年前の記事の更新日が更新されてしまうのはおかしい。 目次 1 編集画面に更新日時の変更オプ ...
  • 82 views
    これまで remodal.js を使ってハンバーガーメニューのモーダルメニューウィンドウが開いていたのを、CSSだけで動くようにした。 header.php 内の3本線のハンバーガーメニューを表 ...
  • 73 views
    CSSを遅延読み込みするためには、preload を使えばよいのだが、Firefox 、IEブラウザーでは動作しない。 それで、loadCSS   cssrelpreload.js を併用する。 ...
  • 76 views
    Jpeg 画像をWebp形式に変換するとサイズが30%も減少するなどと説明されていることがよくある。 Webp 変換後のサイズの方が大きくなったというのは見つからなかった。 そこで、Webpに変換して ...
  • 63 views
    画像のサムネイルを再作成する時には、Regenerate Thumbnails 等のプラグインを使用しがちであるが、サーバーにSSHでログインできるならば、コマンドラインで同じことができる。 その方が ...
  • 70 views
    画像をWordpressにアップロードした時に、予め登録しておいた画像のタグ、キーワードが表示されるようにしたい。 Lightroom で画像を整理する時に、キーワードを登録すると、Windows の ...
  • 63 views
    サイトの頁ソースを見ると、日本語を含むURLリンクが全てエンコードされていて読めない状態なのが気になった。 これはWordpressの仕様で、日本語で出力しようとしても、最後にはエンコードされて出力 ...

タグクラウド

WordPress カテゴリ人気記事

タグ関連記事