ruby - 为具有嵌套标签的自定义标签编写 jekyll 插件

Question

我正在尝试编写一个 jekyll 插件来添加一些标签来处理一些选项卡式 block ，因为我的网站将有很多具有这种 block 的页面。我想在 markdown 中轻松编辑它。

我正在尝试使用这个流畅的代码:

{% tabs %}
  {% tab tab-1 %}
    Content of tab #1
  {% endtab %}

  {% tab tab-2 %}
    Content of tab #2
  {% endtab %}

  {% tab tab-3 %}
    Content of tab #3
  {% endtab %}
{% endtabs %}

提供此 HTML 代码:

<div class="tab-content">
  <div class="tab-pane" id="tab-1">
    Content of tab #1
  </div>
  <div class="tab-pane" id="tab-2">
    Content of tab #2
  </div>
  <div class="tab-pane" id="tab-3">
    Content of tab #3
  </div>
</div>

这是我的插件:

module Tags
    class TabsBlock < Liquid::Block
        def render(context)
            '<div class="tab-content">' + super + "</div>"
        end
    end

    class TabBlock < Liquid::Block
        def initialize(tag_name, tab, tokens)
            super
            @tab = tab.strip
        end

        def render(context)
            return "" if @tab.empty?

            site      = context.registers[:site]
            converter = site.getConverterImpl(Jekyll::Converters::Markdown)

            content = super.strip
            content = converter.convert(content)

            '<div id="' + @tab + '" class="tab-pane">' + content + "</div>"
        end
    end
end

Liquid::Template.register_tag("tabs", Tags::TabsBlock)
Liquid::Template.register_tag("tab",  Tags::TabBlock)

当我尝试时，标记不正确。只有第一个选项卡的标记是我所期望的，其他选项卡通过代码突出显示传递，我得到:

<div class="highlight">
  <pre><code class="text language-text" data-lang="text">&lt;div id=&quot;tab-1&quot; class=&quot;tab-pane&quot;&gt;&lt;p&gt;Content of tab #1&lt;/p&gt;</code></pre>
</div>

我不知道为什么，而且我对 Ruby/Liquid 了解不多，无法自己处理 :)。有什么想法吗？

谢谢!

Answer 1

我不知道为什么，但 Jekyll 或 Liquid 认为，考虑到缩进，这是一些需要突出显示的代码。

我通过再次剥离 Markdown 转换代码以删除换行符并删除一些缩进来解决此问题:

class TabBlock < Liquid::Block
    def initialize(tag_name, tab, tokens)
        super
        @tab = tab.strip
    end

    def render(context)
        return "" if @tab.empty?

        site      = context.registers[:site]
        converter = site.getConverterImpl(Jekyll::Converters::Markdown)

        lines = super.rstrip.split(/\r\n|\r|\n/).select { |line| line.size > 0 }
        indentation = lines.map do |line|
            match = line.match(/^(\s+)[^\s]+/)
        match ? match[1].size : 0
        end
        indentation = indentation.min

        content = indentation ? super.gsub(/^#{' |\t' * indentation}/, '') : super
        content = converter.convert(content)
        content = content.strip # Strip again to avoid "\n"

        '<div id="' + @tab + '" class="tab-pane">' + content + "</div>"
    end
end