はてなブログのコードブロック(pre,code)でファイル名やパスを一緒に表示する

こんにちは。レモンティーです。

今回ははてなブログでのソースコードの表示についてです。

コードを載せるとき、そのファイル名やパスも一緒に表示したいことがありますよね。先日紹介したテーマNavyDarkCodeにこの機能を追加しました。
blog.hatena.ne.jp

使い方は簡単で、>||で始まるコードブロックの直前の行(またはpreタグの直前)に

<div class="pre-filename">hoge</div>

と書くだけです。

実際に使うと以下のような見た目になります。(ファイル名が普通の白いテキストとして表示されている方はCtrl+f5で更新してみてください。)

sample.js

'use strict';
module.exports = (sequelize, DataTypes) => {
  var Task = sequelize.define('Task', {
    title: DataTypes.STRING
  });

  Task.associate = function (models) {
    models.Task.belongsTo(models.User, {
      onDelete: "CASCADE",
      foreignKey: {
        allowNull: false
      }
    });
  };

  return Task;
};

たしかに↓をいちいち入力するのはかなり面倒ですがまあ辞書登録とかスニペットとかでごまかしてください。

<div class="pre-filename"></div>

また、画面の幅に対してファイル名やパスが長い場合は下の例のように見切れますが普通は大丈夫だと思います。

very/long/filepath/example/aaa/bbb/ccc/ddd/eee/fff/ggg/hhh/iii/jjj/kkk/lll/mmm/nnn/ooo/ppp/qqq/rrr/sss/ttt/uuu/vvv/www/xxx/yyy/zzz.html

<a href="example.com">example</a>

ちなみに上の例は見切れていない場合

さっきのパス

very/long/filepath/example/aaa/bbb/ccc/ddd/eee/fff/ggg/hhh/iii/jjj/kkk/lll/mmm/nnn/ooo/ppp/qqq/rrr/sss/ttt/uuu/vvv/www/xxx/yyy/zzz.html

と書かれています。

もし気に入ったらNavyDarkCodeを使ってみてください。


今回はこれでおしまいです。
www.sawalemontea.com