phoenix-powerインデントの再形成が悪影響を及ぼすようです。

はじめに

jekyll-toc-generatorで目次を作成する方法を紹介しました。

しかし、いくつかの問題がありますので、それを説明します。

問題点

現在確認している問題点

  • 個別ページで表示する場合に、Codeblockの表示が一部おかしくなります。

  • 上記問題は、インデントが形成されてしまうことによる問題です。

  • インデントの形成は、どうやらfigcaption(タイトル)を付けていない場合に発生するようです。

個別ページへの目次の表示

私の場合は、以下のファイルを編集することで、個別ページに目次を表示することができます。

{{ content | toc_generate }}
~/octopress/source/_includes/article.html
1
2
3
<div class="entry-content clearfix">
    {{ content | toc_generate }}
</div>

インデントの形成

しかし、これでプレビューすると、コード部分が以下の様なソースに変化してしまします。これにより表示崩れが起こります。

プラグイン導入前

1
2
3
<div class='bogus-wrapper'><notextile><figure class="code"><div class="highlight"><table><tbody><tr><td class="gutter"><pre class="line-numbers"><span class="line-number">1</span>
</pre></td><td class="code"><pre><code class="bash"><span class="line"><span class="nv">$ </span>osascript -e <span class="s1">'tell application "iTerm" to activate'</span>
</span></code></pre></td></tr></tbody></table></div></figure></notextile></div>

プラグイン導入後

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class='bogus-wrapper'><notextile><figure class="code">
   <div class="highlight">
      <table>
         <tbody><tr>
            <td class="gutter">
               <pre class="line-numbers"><span class="line-number">1</span>
</pre>
            </td>
            <td class="code">
               <pre>                  <code class="bash">
                     <span class="line"><span class="nv">$ </span>osascript -e <span class="s1">'tell application "iTerm" to activate'</span>
</span>
                  </code>
               </pre>
            </td>
         </tr>
      </tbody></table>
   </div>
</figure></notextile></div>

コードの内容は同じなのですが、インデントが形成されることによって、表示が崩れてしまいます。

問題の原因と解決法

  • 問題の原因は、プラグイン本体の以下のコード辺りにあります。

https://github.com/dafi/jekyll-toc-generator/blob/master/_plugins/tocGenerator.rb#L95

  • この問題の解決法は、Markdownが変換されるタイミングを調整するか、本体のコードを書き換えることが考えられます。
tocGenerator.rbLINK
1
2
3
- doc.css('body').children.to_xhtml(indent:3, indent_text:" ")

+ doc.css('body').children.to_html