読者です 読者をやめる 読者になる 読者になる

ツナワタリマイライフ

日常ネタから技術ネタ、音楽ネタまで何でも書きます。

atomのmarkdown-tocの設定変更方法と日本語リンクしない理由をcofeee-scriptで探る

はじめに

AtomいいよAtom。エディタです。設定方法を以前書きました。

take-she12.hatenablog.com

ここで入れてるmarkdown-tocのお話です。

toc(table of contents)、つまり目次を見出しから自動生成してくれるプラグイン。 haroopadだと[TOC]と書くだけで生成してくれてナイスなんですが、まぁatomでも同様なことが実現できます。

こういうやつですね。

f:id:take_she12:20160304124939p:plain

ただ、なぜか生成されたhtmlファイル、リンクしてくれません。それが一番欲しいのに!

markdown-tocの設定

何はともあれ公式ドキュメントを見ましょう。(最近こういう癖ついてきてうれしい)

atom.io

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ソースコードを見てみる

実際に変換処理を見ていきましょう。

github.com

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かなと。あとについてるäとかはドイツ語?

blog.csdn.net

coffee scriptを動かしてみる

しかし^で最初の文字をマッチさせていくのがイマイチ腑に落ちないので実際に動かしてみる。

インストール

sudo npm install -g coffee-script

一発でした。ご参考。

9ensan.com

動作確認

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対応対応にプルリクが出ていました。拒否されてるけど。

github.com

このコードを真似してみましょう。

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は空白文字なので、空白文字をハイフンに置換するものですね。

正規表現リファレンス - CoffeeScript

試してみる

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が何やってるかも分かってないし無駄な時間だった。。。日本語リンクできたらすごく素敵なのに、それを実現できない自分の力の無さがつらぽよ。

プルリク送れるようにならないとな。