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);
 }

 

  • またまたこのサイトのSSL証明書が期限切れになった。 Kusanagi の自動更新ができていない。 それで手動であれこれしてみても、こんなエラーが出る。# kusanagi update cert C ...
  • Google の Indexing API を使うと、新しい投稿記事を瞬時にGoogleの検索エンジンに登録できる。 WordPress のプラグインとしてインデックスAPIが利用できる。使い方は英語 ...
  • Yoast SEO を停止して、Rank Math SEO プラグインを使ってみたらGoogle の検索結果に表示される記事抜粋スニペットの文字数が短過ぎに見えてびっくりした。#1 Yoast Alt ...
  • WP_CRON を停止して、Linux の crontab に移行する設定をこれまでに何度も試みたがうまくいかなかった。 毎日バックアップされるはずの、UpdraftPlus プラグインのクロンが動い ...
  • Kusanagi WordPress プラットフォームでは Fcache とBcache がある。 Fcache とはNginx ヱブサーバーのキャッシュ機能であり、Kusanagi の独自機能ではな ...
  • 目次 1 HTTPD アクセスログの日本語化 2 Logwatch も日本語化 HTTPD アクセスログの日本語化 Nginx,  Apache ヱブサーバーのアクセスログを見ると、日本語URLはエン ...
  • ヱブサイトの再構築中には、スタイルシート、style.css を頻繁に調整更新する。 CSSを追加、編集する度に再読み込みを繰り返して、変更の反映を確認していた。 これで編集者は反映を確認できるのだが ...
  • WordPressで使える頁カウンターをいくつか同時に使ってカウントの仕方の違いを比べてみた。WP-PostViews    長期常用中 Post Views Counter  新規インストール Go ...

タグクラウド

WordPress カテゴリ人気記事 Views most

WordPress カテゴリ人気記事 月間

20171222

タグ関連記事

閲覧履歴

    //cookieが無い場合の処理
2019
GA-views: 3
20171222