QiitaのMarkdownに注釈（脚注）を追加するBookmarklet

Qiitaの記事のMarkdownで注釈を使う - Qiitaが最近やたらストックされるので作ってみました。¹

作ったもの

javascript:!function(){var n=jQuery("#draft_item_raw_body"),e=n.val(),r=/<sup><a\ href="#(\w+)" name="\1\-ret">\d+<\/a><\/sup>|\[\^(\w+)\](?:\:?(.+))?\n|- \d+(?:, \d+)*\. (.+)<a href="#(\w+)-ret" name="\5">\u21a9<\/a>\n/g,a=1,u=[],t={};e=e.replace(r,function(n,e,r,f,d,i){var p=e||r||i;return f||d?-1!==u.indexOf(p)?(t[p]=f||d,""):n:(u.push(p),'<sup><a href="#'+p+'" name="'+p+'-ret">'+a++ +"</a></sup>")}),e=e.replace(/\n---------\n#####注釈\n\n/g,""),u.length&&(e+="\n",e+="---------\n",e+="#####注釈\n",e+="\n",e+=u.reduce(function(n,e,r){var a=[r+1],f=t[e];if(!f)return n;for(t[e]="";-1!==(r=u.indexOf(e,r+1));)a.push(r+1);return n+"- "+a.join(", ")+". "+f+'<a href="#'+e+'-ret" name="'+e+'">↩</a>\n'},"")),e+=Object.keys(t).reduce(function(n,e){return t[e]?n+"[^"+e+"]: "+t[e]+"\n":n},""),n.val(e)}();

圧縮したのに全然短くないです。
bookmarkletになっているのでブックマークして使ってください。

使い方

注釈を作るためには、次のようなMarkdownを書きます。

注釈です[^1]

[^1]: 注釈の内容です

で、Qiitaの編集ページで上のbookmarkletを利用すると、

変換後

注釈です<sup><a href="#1" name="#1-ret">1</a></sup>

---------
##### 注釈

- 1. 注釈の内容です<a href="#1-ret" name="1">↩</a>

に変換されて、下のように表示されます。

注釈です¹

---

#####注釈

• 1. 注釈の内容です↩

QiitaのMarkdownにHTMLが埋め込めるのを悪用しているだけなのですが、それっぽくなったと思います。
また、最初に挙げた記事では忘れていた、注釈から元の部分へ戻るリンクも作成しています。

記事を書き終わったあとにブックマークレットを実行して変換するだけでなく、書いて→変換して→書いて‥‥、というのにも対応しています。

圧縮する前のコード

上のブックマークレットだけ貼られても改造できなくて楽しくないので、圧縮する前のコードを載せておきます。

// QiitaのMarkdownにPHP Markdown Extraの注釈（脚注）を追加
javascript:
!function () {
  var
  textarea = jQuery('#draft_item_raw_body'),
  text = textarea.val();

  var
  i,
  annoAnchor = /<sup><a\ href="#(\w+)" name="\1\-ret">\d+<\/a><\/sup>|\[\^(\w+)\](?:\:?(.+))?\n|- \d+(?:, \d+)*\. (.+)<a href="#(\w+)-ret" name="\5">\u21a9<\/a>\n/g,
  count = 1, names = [], annos = {};

  text = text.replace(annoAnchor, function (m, anchor1, anno, content1, content2, anchor2) {
    var
    name = anchor1 || anno || anchor2;

    if (content1 || content2) {
      if (names.indexOf(name) !== -1) {
        annos[name] = content1 || content2;
        return '';
      } else {
        return m;
      }
    } else {
      names.push(name);
      return '<sup><a href="#' + name + '" name="' + name + '-ret">' +
        count++ +
      '</a></sup>';
    }
  });
  text = text.replace(/\n---------\n#####注釈\n\n/g, '');

  if (names.length) {
    text += '\n'
    text += '---------\n';
    text += '#####注釈\n';
    text += '\n';

    text += names.reduce(function (text, name, index) {
      var
      indexs = [index + 1], anno = annos[name];

      if (!anno) return text;
      annos[name] = '';

      while ((index = names.indexOf(name, index + 1)) !== -1) {
        indexs.push(index + 1);
      }

      return text +
        '- ' + indexs.join(', ') + '. ' + anno +
        '<a href="#' + name + '-ret" name="' + name + '">\u21a9</a>\n';
    }, '');
  }

  text += Object.keys(annos).reduce(function (text, name) {
    if (!annos[name]) return text;

    return text +
      '[^' + name + ']: ' + annos[name] + '\n';
  }, '');

  textarea.val(text);
}();

無駄に長いコードと残念な正規表現には目を瞑ってください。

あとがき

色々とQiitaの実装に依存しているので、Qiitaのページの構造が変わったら動かなくなる可能性が高いです。それとコードの中とか色々と考慮していないので、ほとんどの場合問題ないと思いますが時々大変なことになるかもしれません。
あと、毎回変換するの面倒な気がします。プレビューと投稿のときだけtextareaの内容を差し変えるようなものにすればよかったんですけど、これ以上bookmarkletが仰々しくなるのもどうかと思ったので作りませんでした。嘘です、面倒だっただけです。どなたか作ってください。

また、この記事の最初の方でさりげなくこの注釈を使ってみています。よかったら確認してみてください。

こんな需要の分からない記事を開いて、しかも最後まで読んでくださったみなさまに最大の感謝を。
ありがとうございましたっ！

---

注釈

• 1. ちなみに昔の記事でははてな記法の注釈実装してくれ、と言っていますが、今回実装したのはPHP Markdown Extraの注釈だったりします。実装上の都合です。↩