はてなブログでコードの右上に言語名を表示する

• 割と力技
• テーマによっては上手く表示されないかもしれない。
  • このテーマでしか試していない。

やり方

設定 ⇒ デザイン ⇒ [スパナのアイコン] ⇒ フッタ
に以下を貼り付ける。

<script>

function PutLangLabels() {
	var pres = document.getElementsByTagName("pre");

	for(var i = 0; i < pres.length; i++) {
		var pre = pres[i];
		var preClassNames = pre.className.split(' ');

		if(preClassNames.indexOf("code") == -1) {
			continue;
		}

		var lang = pre.className;

		/*
			lang-xxx ===> 言語名
		*/
		var langTable = [
			[ "lang-cs", "C#" ],
			[ "lang-c",  "C"  ],

			// ここへ追加...
		];

		for(var c = 0; c < langTable.length; c++) {
			if(preClassNames.indexOf(langTable[c][0]) != -1) {
				lang = langTable[c][1];
			}
		}

		var langLabel = document.createElement("div");

		langLabel.style.position = "absolute";
		langLabel.style.top = "0px";
		langLabel.style.right = "0px";
		langLabel.style.margin = "3px";
		langLabel.style.padding = "3px 7px";
		langLabel.style.color = "#003";           // 言語名の色
		langLabel.style.backgroundColor = "#fff"; // 言語名の背景色
		langLabel.innerText = lang;

		pre.style.position = "relative"; // 親を relative にしないと、子の absolute が効かない。

		pre.appendChild(langLabel);
	}
}

PutLangLabels();

</script>