はてなブログでソースコードをタイトル（言語名）付きで表示

はてなブログのカスタマイズを記事にするときに、HTMLやCSS、JavaScriptのソースコードを<pre>タグで囲んで表示しているのですが、その左上にタイトル（言語名）を表示してわかりやすくしてみました。

HTML編集を選択して、<pre>に続いて「<span class="box-title">タイトル</span>」と入力、必ず改行して、そのあとにソースコードを、最後に</pre>を入力します。

<pre><span class="box-title">タイトル</span> /* 必ず改行する */
    ソースコードを書く
</pre>

左上にタイトルを表示するCSSは次のとおりです。

(デザイン→カスタマイズ→「デザインCSS」にコードを入力)

.entry-content pre {
    position: relative;
}

.box-title {
    position: absolute;
    top: 0;
    left: 0;
    font-family: sans-serif;
    font-size: 13px;
    display: inline-block;
    padding: 2px 5px;
    color: #fff;
    background: #000;
}

左上にタイトルを表示するために、<pre>を相対位置「position:relative」で、タイトルを絶対位置「position:absolute」で表示しています。

JavaScript
<script>
    alert("Hello world!!");
</script>

このカスタマイズは、コードも長くなりそうだし、面倒くさそうだったので、ずっと放置していたのですが、意外と簡単にできました。過去の記事を直すほうが面倒くさかった。