Qiitaレイアウトみたいなcodeブロックの先頭に名前を表示するやつをbloggerでもやりたい

参考にしつつやってみました。

実践してみる

追記自体はスクリプトとスタイルを追加しただけなので、特に問題なく完了しました。

結果

こちらの記事で実施してみました。

before

enter image description here

after

enter image description here

追加された部分を無駄に選択してしまいました。
パッと見は1行目に2行表示されているような状態になっています。

比較

問題点は3つ。

  1. タイトルが本文と区別されずに行数カウントの対象になっている。
  2. タイトルの後に余計なクラス（hljs python）がついている。
  3. タイトルが強調されてない。

ちなみに弊サンドバッグでは、コードブロックの装飾にprettifyを利用してます。
導入した際の記録はこちら。

これで気持ち程度にコードの色分けと、行数の表示をしています。

修正

ちょっと問題が入り組んでるように見えて触りたくない気持ちが強いんですが、そうも言ってられないので実験的に修正していきます。

タイトルが1行目と判定される

なんとなく、行数追加の処理と今回の処理の順序の問題のような気がするので試しに入れ替えます。

enter image description here



問題が全行に拡大されました。
いとワロス

とりあえずタイトルだけを表示する

心が折れたので、簡単そうなところをどうにかして成功体験を詰む積むことにします。

まあ、.split(":")[1]していたのを.split(":")[1].split(" ")[0]に変えるだけなんですけども。
頭の悪い決め打ちです。

            var codeName = $(this).attr("class") ? $(this).attr("class").split(":")[1].split(" ")[0] : null;

できたのがこちら。






enter image description here

よし（よくない）

あらためて順番なんとかする

さて、じゃあ気が乗りませんがどうにかしましょう。

今回の処理を読んでみたところ、<code>タグを探して、その直上にコード名を表示するためのdiv要素を追加してるんですよね。

で、prettifyはもともとの<code>を行ごとに別々の<code>にしているので、コード名を追加する対象が全部の行になってしまうというコンボが発生してるわけですね。

prettifyの処理を変更するのはいろいろとノーセンキューなので、今回のコードをprettifyに対応させるのが良さそうです。

やりたいことは

2つ。

  • 各行じゃなくて、先頭行のcodeだけを対象にする。
  • コード名のdiv要素をもう少し上（DOM的に）に追加する。

こんな感じにしてみました。

    function afterPP() {
        $("pre > ol > li:first-child > code").each(function () {
            var obj = $(this).attr("class");
            if (obj.indexOf(':') != -1) {
                var codeName = obj ? obj.split(":")[1].split(" ")[0] : null;
                if (codeName) {
                    $("<div class='code-name'>" + codeName + "</div>").insertBefore($(this).parent().parent());
                }
            }
        });
    }

もともとpre > codeだったものは、prettifyによってpre > ol > li > codeに生まれ変わっています。
なので、リストに対してフィルタ:first-childをかけて、各ブロックの先頭行だけを対象にします。
:firstにすると全体の最初だけしか取得できないので要注意。

あとは、codeじゃなくてolの前にコード名を差し込みたいので、2回.Parent()しました。

実行結果はこんな感じ。

enter image description here

位置はいい感じですね。

参考資料

スタイル調整

もういいんじゃないかな……という気分にはなるものの。
スタイルをもうちょっと頑張りたいのは事実。

というわけでもにょもにょします。

どうやらcode-nameを対象にしたスタイルは、前述の資料の中にもちゃんと記載されているんですが……なんか反映されません。

別にこんな変なクラス名かぶることもなかろうということで直打ちします。

ついでに下のolのpaddingがでかすぎたため、コード名の直下に限りpaddingを削るようにしました。

最終的に追加したスタイルがこちら。

        .code-name {
            position: relative;
            display: inline-block;
            background-color: gold;
            font-size: 13px;
            font-weight: 400;
            top: -8px;
            left: -8px;
            padding: 8px;
        }
        .code-name + ol {
            padding-top: 0px;
        }

実行してみます。

enter image description here

もう……ゴールしてもいいよね……？

参考資料

というわけで

また一歩Qiitaに近づきました（極度の疲労による混乱）

prettifyを採用しているbloggerで、コードの先頭に（あれば）コード名を追加する処理を積んでみました。

それにしてもWP、もはやブログの種類を指定するまでもなくWPの情報がわんさか出てくるの強すぎますね。
これが収穫逓増ってやつか……。

とはいえ適当に弄っただけで想定通りに設定できてよかったです。

いいかげん処理をガン積みしすぎて重くなっているんじゃないかというのが少し気になってますが。

 B! LINE