はじめに
AtomいいよAtom。エディタです。設定方法を以前書きました。
toc(table of contents)、つまり目次を見出しから自動生成してくれるプラグイン。 haroopadだと[TOC]と書くだけで生成してくれてナイスなんですが、まぁatomでも同様なことが実現できます。
こういうやつですね。
ただ、なぜか生成されたhtmlファイル、リンクしてくれません。それが一番欲しいのに!
markdown-tocの設定
何はともあれ公式ドキュメントを見ましょう。(最近こういう癖ついてきてうれしい)
Features Auto linking via anchor tags, e.g. # A 1 → #a-1 Depth control [1-6] with depthFrom:1 and depthTo:6 Enable or disable links with withLinks:1 Refresh list on save with updateOnSave:1 Use ordered list (1. ..., 2. ...) with orderedList:0
このパラメータ変えれば設定できそうなんだけどどこなの?設定ファイルとか作るの?ググっても見つからず。。。
よくよくファイルを自動生成されたmarkdown-tocの部分を見ますと
<!-- TOC depthFrom:1 depthTo:6 withLinks:1 updateOnSave:1 orderedList:0 -->
ここに今の設定が出てるのか〜と思って試しに変えてみたら反映された(笑)そこかよ!
depthToで何階層まで出すかを設定できます。にしてもwithLinksはenableになってるからリンクされないのはおかしい。
なぜlinkしないのか
実際に生成されたhtmlファイルのソースを見てみる。
</style> </head> <body class='markdown-preview'><!-- TOC depthFrom:1 depthTo:6 withLinks:1 updateOnSave:1 orderedList:0 --> <ul> <li><a href="#">はてな</a><ul> <li><a href="#">はてなブログ</a><ul> <li><a href="#">いいとこ</a></li> <li><a href="#">わるいとこ</a></li> </ul> </li> <li><a href="#">はてなブックマーク</a></li> </ul> </li> <li><a href="#hatena">hatena</a><ul> <li><a href="#hatena-blog">hatena blog</a></li> </ul> </li> </ul> <!-- /TOC --> <h1 id="-">はてな</h1> <h2 id="-">はてなブログ</h2> <h3 id="-">いいとこ</h3> <h3 id="-">わるいとこ</h3> <h2 id="-">はてなブックマーク</h2> <h1 id="hatena">hatena</h1> <h2 id="hatena-blog">hatena blog</h2></body> </html>
そりゃリンクされんわ。英数字のところは正しくidが入ってるのでリンクは動きます。日本語のid生成がうまくいっていないようです。
markdown-tocのソースコードを見てみる
実際に変換処理を見ていきましょう。
lib/toc.coffee
# create hash and surround link withit ___createLink: (name) -> hash = new String name hash = hash.toLowerCase().replace /\s/g, "-" hash = hash.replace /[^a-z0-9\u4e00-\u9fa5äüö\-]/g, "" if hash.indexOf("--") > -1 hash = hash.replace /(-)+/g, "-" if name.indexOf(":-") > -1 hash = hash.replace /:-/g, "-" link = [] link.push "[" link.push name link.push "](#" link.push hash link.push ")" return link.join ""
- 大文字を全て小文字に変換(toLowerCase)
- 最初の英数字、中国語、ハイフン以外を空白に変換
u4e00-u9fa5はunicodeかなと。あとについてるäとかはドイツ語?
coffee scriptを動かしてみる
しかし^で最初の文字をマッチさせていくのがイマイチ腑に落ちないので実際に動かしてみる。
インストール
sudo npm install -g coffee-script
一発でした。ご参考。
動作確認
MacBook-Air:coffee_script take$ cat hello.coffee console.log 'Hello Coffee' MacBook-Air:coffee_script take$ coffee hello.coffee Hello Coffee
replaceしてみる
さて実際に書いていきましょう。
MacBook-Air:coffee_script take$ cat toc.coffee createLink = (name) -> hash = new String name hash = hash.toLowerCase().replace /\s/g, "-" hash = hash.replace /[^a-z0-9\u4e00-\u9fa5äüö\-]/g, "" if hash.indexOf("--") > -1 hash = hash.replace /(-)+/g, "-" if name.indexOf(":-") > -1 hash = hash.replace /:-/g, "-" link = [] link.push "[" link.push name link.push "](#" link.push hash link.push ")" return link.join "" console.log(createLink "hogehoge")
実行結果。
MacBook-Air:coffee_script take$ coffee toc.coffee [hogehoge](#hogehoge)
ちゃんと生成されてますね。
nameが日本語の場合
MacBook-Air:coffee_script take$ coffee toc.coffee [ほげほげ](#)
消えちゃう。
英語と日本語混在
MacBook-Air:coffee_script take$ coffee toc.coffee [hogeほげ](#hoge) MacBook-Air:coffee_script take$ coffee toc.coffee [ほげhoge](#hoge)
前後どちらも日本語が消えてしまいます。
コードを修正してみる
実はnon-english caracter対応対応にプルリクが出ていました。拒否されてるけど。
このコードを真似してみましょう。
2行コメントアウトして、1行追加します。
1 createLink = (name) -> 2 hash = new String name 3 # hash = hash.toLowerCase().replace /\s/g, "-" 4 # hash = hash.replace /[^a-z0-9\u4e00-\u9fa5äüö\-]/g, "" 5 hash = hash.replace /\s/g, "-" #(省略)
¥sは空白文字なので、空白文字をハイフンに置換するものですね。
試してみる
MacBook-Air:coffee_script take$ coffee toc.coffee [hoge](#hoge) MacBook-Air:coffee_script take$ coffee toc.coffee [HoGe](#HoGe) MacBook-Air:coffee_script take$ coffee toc.coffee [ほげ](#ほげ) MacBook-Air:coffee_script take$ coffee toc.coffee [hogeほげ](#hogeほげ)
できてますね。
atomのpackageのコードを変えてみる
インストールされたパッケージは以下の場所にあります。
MacBook-Air:lib take$ pwd /Users/take/.atom/packages/markdown-toc/lib
Toc.cofeeを変更してやる。
動作確認
変わらない。。。(絶望)しかも2回目以降生成されなくなってしまった。
他にも修正しないといけないのか?それともソース変更が適用されてないのか?残念ながらここで諦め。
まとめ
やっぱり小手先だけの修正じゃダメなんですね、原因も分からないし最初のscriptが何やってるかも分かってないし無駄な時間だった。。。日本語リンクできたらすごく素敵なのに、それを実現できない自分の力の無さがつらぽよ。
プルリク送れるようにならないとな。