Yellow Rabbit

Frozen

Here is an active version

Add Microdata to Rouge

14 Aug 2017 • 2 min. read • Comments •

Microdata for Blocks with Syntax Highlighting in Jekyll

To indicate what kind of code I place on the page I hastily sketched a plugin for Jekyll. It adds micro-markup to the code block.

Plugin

Instead of ``` lang use the construction of {% mds lang %}. For example:

{% mds ruby %}

module Jekyll …

{% endmds %}

To the fragment of the code will be added microdata markup:


<div itemscope="" itemtype="http://schema.org/SoftwareSourceCode">
<meta itemprop="codeSampleType" content="code snippet" />
<meta itemprop="programmingLanguage" content="ruby" />

Full Plugin Text

Just put the file in the _plugins directory


module Jekyll
  class MicrodataHighlightBlock < Liquid::Block
    def initialize(tag_name, params, tokens)
	    @lang = params.strip
      super
    end

    def render(context)
      contents = "\n``` " + @lang + "\n" + super + "\n```\n"

      site      = context.registers[:site]
      # pipe param through liquid to make additional replacements possible
      content = Liquid::Template.parse(contents).render context

      converter = site.find_converter_instance(Jekyll::Converters::Markdown)
      content = converter.convert(content)

      output = '<div itemscope itemscope itemtype="http://schema.org/SoftwareSourceCode"><meta itemprop="codeSampleType" content="code snippet" /><meta itemprop="programmingLanguage" content="' + @lang + '" />'
      output += content
      output += '</div>'
      output
    end
  end
end

Liquid::Template.register_tag("mds", Jekyll::MicrodataHighlightBlock)