はてなブログMarkdownユーザーがソースコードにタイトルを付ける方法

コードのシンタックスハイライトできることは皆さん知っているようですが、markdown形式でタイトルを付けている人の記事が見つけられなかったので、紹介したいと思います。

ポイント

markdown形式でブログを書いている
markdownを特定の書式で書くことで、タイトルを付ける
スマホ版はProユーザーじゃないと対応できない。（Proじゃないとスマホのデザインにスクリプトを仕込ない。）

現状私は、無料ユーザーなので、スマホ版ではタイトルがうまく表示できていないはずです。また、スマホ版の検証はできてないですが、ソースを見る限りできそうです。

今回利用する方法は、特定の書式の文字をmarkdownに入れ、markdownによって生成したタイトルのDom要素をスクリプトでいじっていい感じのタイトルにするという方法です。

以下のように書くと

title:main.dart
(バッククォート３つ)dart
import 'package:flutter/material.dart';

void main() {
  runApp(
      Text(
        "Hello World",
        textDirection: TextDirection.ltr)
  );
}
(バッククォート３つ)

（(バッククォート３つ)が情弱感凄まじいですが、外側を４つにして内側を３つにするって書き方が通用しないので、仕方ないと思ってます。）このようなタイトル表示になるようにします。

title:main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(
      Text(
        "Hello World",
        textDirection: TextDirection.ltr)
  );
}

早速設定していきます。

ブログ管理画面->デザイン->カスタマイズ（タブ）->ヘッダ->タイトル下

に次のスクリプトを追加してください。

title:script

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  // add title
  $(document).ready(function(){
    var elms = document.getElementsByClassName('code');
    for(var i = 0, elmNum = elms.length; i < elmNum; i++) {
      if ('P' == elms[i].previousSibling.previousSibling.tagName) {
        var target = elms[i].previousSibling.previousSibling
        var text = ''
        target.childNodes.forEach(targetChild => {
          if ('A' == targetChild.tagName) {
            text += targetChild.text
          } else {
            text += targetChild.textContent
          }
        });
        var title_index = text.indexOf('title:', 0);
        if (title_index == 0) {
          var title = text.substring(6)
          const createElem = document.createElement('div');
          createElem.appendChild(document.createTextNode(title));
          createElem.classList.add('code-title')
          elms[i].parentNode.insertBefore(createElem, elms[i])
          elms[i].parentNode.removeChild(target);
        } 
      }
    }
  });
</script>

スマホに対応したいProユーザーは

ブログ管理画面->デザイン->スマートフォン（タブ）->ヘッダ->タイトル下

にも追加してください。

コードの説明を簡単にしておくと

codeクラスを持つ要素を全て取得する
codeクラスの上にあるタイトルが書かれているp要素を自分で作成したdiv要素と入れ替える。
このとき、p要素の中に、はてなのキーワードリンクの設定により、リンク要素が入っていれば、文字に変換する

みたいなことをしています。

また、

ブログ管理画面->デザイン->カスタマイズ（タブ）->デザインCSS

に以下のコードを追加してください。（Proユーザースマホも同様）

title:css

.code-title{
  background: #666;
  padding-left: 15px;
  color: #ccc;
}

いろんな条件で動かしていないし、markdownをhtmlにどんな仕様で変換しているのかも知らないし、その仕様も変更される可能性があるため、不具合があるかもしれませんが、フロントエンドは専門外ですのでご容赦ください。

また、これは私が知りたいことのなのですが、Android Studioのコンソール出力のシンタックスハイライトをするためのキーワードとかってあるんですかね。知っている人がいれば教えてほしいです。

お粗末な記事ですが、読んでいただいてありがとうございます。