Custom Liquid tag block to render a figure with optional caption

figure.html

<!-- Arguments without quotes -->
<!-- ISSUE: Only content between first two quotes rendered -->
<figure class="figure class1"><div class="figure__main">
<p><img src="/assets/images/2008/12/chicago.jpg" alt="" /></p>
</div><figcaption class="figure__caption"><p>Cloud&nbsp;Gate</p>
</figcaption></figure>

<!-- Arguments with single quotes, regardless of content -->
<!-- ISSUE: Nothing generated if argument contains quotes -->
<figure class="figure class1 class2"><div class="figure__main">
<p><img src="/assets/images/2008/12/chicago.jpg" alt="" /></p>
</div><figcaption class="figure__caption">
</figcaption></figure>

<!-- Arguments with double quotes if content containts single quotes -->
<!-- ISSUE: Content stripped of single quotes -->
<figure class="figure class1 class2"><div class="figure__main">
<p><img src="/assets/images/2008/12/chicago.jpg" alt="" /></p>
</div><figcaption class="figure__caption"><p>Cloud Gate by Anish&nbsp;Kapoor</p>
</figcaption></figure>

<!-- Escape single quotes within argument -->
<!-- ISSUE: Escape sequences are ignored -->
<figure class="figure class1 class2"><div class="figure__main">
<p><img src="/assets/images/2008/12/chicago.jpg" alt="" /></p>
</div><figcaption class="figure__caption"><p>\</p>
</figcaption></figure>

figure.liquid

<!-- Arguments without quotes -->
{% figure class:class1 class2, caption:'Cloud Gate' by Anish Kapoor %}
![](/assets/images/2008/12/chicago.jpg)
{% endfigure %}

<!-- Arguments with single quotes, regardless of content -->
{% figure class:'class1 class2', caption:''Cloud Gate' by Anish Kapoor' %}
![](/assets/images/2008/12/chicago.jpg)
{% endfigure %}

<!-- Arguments with double quotes if content containts single quotes -->
{% figure class:'class1 class2', caption:"'Cloud Gate' by Anish Kapoor" %}
![](/assets/images/2008/12/chicago.jpg)
{% endfigure %}

<!-- Escape single quotes within argument -->
{% figure class:'class1 class2', caption:'\'Cloud Gate\' by Anish Kapoor' %}
![](/assets/images/2008/12/chicago.jpg)
{% endfigure %}

figure.rb

module Jekyll
  class FigureTag < Liquid::Block
    def initialize(tag_name, markup, tokens)
      super
      @attributes = {}

      markup.scan(Liquid::TagAttributes) do |key, value|
        @attributes[key] = value.gsub(/^'|"/, '').gsub(/'|"$/, '')
      end
    end

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

      figure_classes = @attributes['class'].to_s
      figure_main = converter.convert(super(context))
      figure_caption = converter.convert(@attributes['caption'].to_s)

      # Render <figure>
      if @attributes['class']
        source = "<figure class=\"figure #{figure_classes}\">"
      else
        source = "<figure class=\"figure\">"
      end
  
      source += "<div class=\"figure__main\">#{figure_main}</div>"

      if @attributes['caption']
        source += "<figcaption class=\"figure__caption\">#{figure_caption}</figcaption>"
        source += "</figure>"
      else
        source += "</figure>"
      end
    end
  end
end

Liquid::Template.register_tag('figure', Jekyll::FigureTag)