ターミナル風のpreタグ

preタグ内をターミナル風に表示したかったのでCSSを作った。

Bloggerの場合は「テーマ」→「HTMLで編集」してHEADタグ内に追加すればOK。

 

    <style type='text/css'>
      pre.bash {
        background-color: black;
        color: green;
        font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
        display: inline-block;
        line-height: 1.5em;
        overflow: auto;
        white-space: pre-wrap ;
        width: 100%;
        padding: 0.5em !important;
	  }
    </style>      

こんな感じで表示される。

root@edo ~ Sun 02 Aug 2020 02:35:02 PM JST JST(+0900)
# cat /proc/mdstat
Personalities : [raid6] [raid5] [raid4] [raid0] [raid1] [raid10] [linear] [multipath]
md3 : active raid1 sda3[2] sdb3[3]
      62913536 blocks super 1.2 [2/2] [UU]
        resync=DELAYED

md4 : active raid1 sda4[2] sdb4[3]
      125829120 blocks super 1.2 [2/1] [_U]
      [=============>.......]  recovery = 66.3% (83518016/125829120) finish=17.8min speed=39458K/sec
      bitmap: 0/1 pages [0KB], 65536KB chunk

md1 : active raid1 sda1[0] sdb1[1]
      524224 blocks [2/2] [UU]

unused devices: <none>