redcarpetとかnanocでヘッダが日本語でもアンカーが効くようにするには

目的

nanocなどで利用されているmarkdownの変換ツールredcarpetで

## 手順

などのように書いたヘッダに対して 以下のようなアンカーリンクを

[手順](#手順)
[手順](#%E6%89%8B%E9%A0%86)

書いたとしても、redcarpetはヘッダーのアンカーを作る際に非ASCII文字は取り除いてしまうのでうまく行かない。 というか、勝手なアンカーを作るので厄介である。 これをなんとかしたい。

方法

マルチバイト文字やHTMLタグはアンカーから削除され、ASCIIテキストのみが残るので、 アンカーに使いたいASCII文字列をHTMLタグで囲んで挿入すれば良い。 その文字列は、CSSやJSで表示表は消しておく。

サンプルコード

ヘッダの記述

## <span class="anchor-text-supplement">procedure</span>手順

リンク側の記述

[手順](#procedure)

CSS

.anchor-text-supplement {
  display: none;
}

参考リンク