概要

itouuuuuuuuu.hatenablog.com

こちらの記事を参考に、ブログのコードブロックにタイトルを挿入できるようにしてみました。

/* こんなかんじ */

CSS

僕はタイトルだけを設定したかったので、CSSは下記のような感じ。

/* ソースコードタイトル */
.code-title {
  position: relative;
}
.code-title pre.code {
    padding-top: 2.4em;
}
.code-title::before{
    content: attr(data-title);
    padding: 0 1em;
    background: #47a89c;
    color: #fff;
    font-size: 0.8em;
    border-radius: 3px 0 0 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

タグの挿入はJXAで

毎度<div>って書くのが面倒くさいので、そこはJXAで実装しました。

f:id:uske_S:20200129211025p:plain — Automatorのキャプチャ

function run(input, parameters) {
    var strAry = ['<div class="code-title" data-title="〓〓〓">',
    '```javascript',
    input,
    '```',
    '</div>'
    ];
    return strAry.join("\n");
}