ソースコード表示時にタイトルを付ける

WordPressでソースコード表示したいときに、preタグで書いているのですが、他のブログであるようにタイトルを付けたいなと思ってやってみました。
こちらのサイトの設定を参考にしました。

ただ、こちらははてなブログ用の用のようで、そのまま表示するとタイトル部分がかぶってしまうので少し改造しています。

/* ソースコードタイトル */
.entry-content pre {
  position: relative;
  padding-top:1.1em;
}

.entry-content pre::before{
    content: attr(data-title);
    padding: 0 1em;
    background: #666;
    color: #fff8e1;
    font-size: 0.8em;
    border-radius: 3px 0 0 0;
    position: absolute;
    top: 0;
    left: 0;
}

このCSSを投稿記事で出力されるように設定して
preタグに data-title=”タイトル” という感じでの属性を付けてタイトルを設定します。

ただ、htmlでの記述がめんどくさくなってきたので、そろそろMarkdown記法でに移行したいなぁ…。