【はてなブログ】htmlでプログラミングソースコードを表示する方法。テーマを変えてできなくなった人用

自分用のメモ 

僕の記事で使っているコードの表示の設定。

テーマを変えたことにより出来なくなった人もそうでない人も対応している。

試しにやってみる

    #include<stdio.h>
int main(void){
printf("hello world\n");
return 0;
}

このようになる。下記CSSで自由に色合いなどを変えることができる。

自分のブログはシンプルイズベストを目標にしているが自由にカスタマイズできる

 CSSの欄に貼る。

/*=== pre & code ===*/
.entry-content pre,
.entry-content code {
    font-family: 'Monaco', 'Consolas', 'Courier New', Courier, monospace, sans-serif;
}

.entry-content pre,
.entry-content code {
    position: relative;
    margin: 0;
    padding: 10px;
    padding-left:40px;
    /*↑↑左に枠をつけたので左側に余白を持たせて表示する*/
    white-space: pre-wrap;
    text-overflow: ellipsis;
    line-height: 1.8;
    font-size: 1.1rem;/*コードの中の文字用フォントpx17が1remくらい*/
    background-color: black;/*背景色→黒*/
    color: #dcdcdc;/*文字色*/
}

.entry-content pre.code:before{
   	position: absolute;
    	top: 0;
    	left: 0;
	font-family:"blogicon";/*はてなブログのブログアイコン*/
  	content: "\f038";
   	color: white;/*アイコンの色*/
    	background-color:white;/*左側の枠の色*/
   	padding-top:5px;/*高さの設定・自由にかえてOK */
	font-size: 30px;
	font-weight: bold;
	text-align:center;
	height:100%;
	width:35px;
}

 途切れてしまう。折返しができない。そんな場合はこちらのコードをCSSに書き込めば大丈夫である。

pre, code {
    max-height    : 500px;
    overflow      : scroll;
    white-space   : pre !important;
    text-overflow : clip !important;
}

 参考までに。

自分の使用しているテーマ

シンプルなデザインで感謝している

blog.hatena.ne.jp