Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get Markdown processed content in Jekyll tag plugin

I'm working on a Jekyll tag plugin for my Octopress site to help me make a 'note' element. I just want to be able to highlight a piece of information on my blog as a side note, like this.

enter image description here

The problem is, I can't figure out how to get the contents of this tag to be processed (i.e. Markdown or Textile). The above image is only achieved is I actually make my links with html code. Here is how it ends up turning out when I use markdown in the contents.

enter image description here

In my post, I'm writing the contents of this like so.

{% note %}
This is the third post in my Start to Finish series.  Last time I talked about [Git](/blog/2013/09/25/getting-started-with-git/).
{% endnote %}

Here is my plugin code. It's based off of the image tag code, and there's really not a lot to it.

module Jekyll
  class NoteTag < Liquid::Block
    @title = nil

    def initialize(tag_name, markup, tokens)
      @title = markup
      super
    end

    def render(context)
      output = super(context)
      title = "Note"
      if [email protected]?
        title += ": #{@title}"
      end
      "</section>\n<div class=\"note\"><span class=\"title\">#{title}</span>#{output}</div>\n<section>"
    end
  end
end

Liquid::Template.register_tag('note', Jekyll::NoteTag)

Do you have any idea how I can use a converter on the contents of this tag? I generally use Markdown for my posts, but I'd like to release this plugin for others so I'd like it to be dynamic just like the rest of Jekyll.

like image 900
rharter Avatar asked Oct 03 '13 21:10

rharter


2 Answers

I found this implementation of a 'Markdown block tag' which seems to be a relatively straightforward implementation. Note the use of site.getConverterImpl() in the render method.

I used that example to produce this figure tag (based on prior art to another question I found on SO but can no longer locate)

module Jekyll
  module Tags
    class FigureTag < Liquid::Block

      CaptionUrl = /(\S[\S\s]*)\s+(https?:\/\/\S+)\s+(.+)/i
      Caption = /(\S[\S\s]*)/

      def initialize(tag_name, markup, tokens)
        super
        @caption = nil
        if markup =~ CaptionUrl
          @caption = "\n\t\t<figcaption>#{$1}<a href='#{$2}'>#{$3}</a></figcaption>\n\t"
        elsif markup =~ Caption
          @caption = "\n\t\t<figcaption>#{$1}</figcaption>\n\t"
        end
        @markup = markup
      end

      def render(context)
        site = context.registers[:site]
        converter = site.getConverterImpl(::Jekyll::Converters::Markdown)
        output = converter.convert(super(context))
        "<figure class=\"center\">#{output}#{@caption}</figure>"
      end
    end
  end
end

Liquid::Template.register_tag('fig', Jekyll::Tags::FigureTag)

The above plugin manages to parse markdown within the contents of the block. So given the following block tag usage:

{% fig Test fig %}
This should be parsed as *markdown* [man](http://example.com/).
{% endfig %}

You'll get the following html:

<figure class="center"><p>This should be parsed as <em>markdown</em> <a href="http://example.com/">man</a>.</p>
    <figcaption>Test fig </figcaption>
</figure>

Hope this helps! I spent a couple hours last night and got nowhere, but this morning I found this example and it clicked within 20 minutes.

like image 100
sholsinger Avatar answered Oct 15 '22 21:10

sholsinger


Jekyll 3.x : getConverterImpl is now deprecated

Use find_converter_instance to get the converter :

def render(context)
  text = super
  site = context.registers[:site]
  converter = site.find_converter_instance(::Jekyll::Converters::Markdown)
 _output += "<figcaption>#{converter.convert(_caption)}</figcaption>"
like image 43
DaftWooly Avatar answered Oct 15 '22 22:10

DaftWooly