Exploring Jekyll Liquid Tag plugins feature to create a fancy code block while still using Jekyll’s highlight tag.

Below is a ruby code block.

Ruby code block window

require 'digest'

module Jekyll
  class Gravatar < Liquid::Tag

    def initialize(tag_name, content, tokens)
      super
      @content = content
    end

    def render(context)
      md5digest = Digest::MD5.hexdigest @content.downcase
      %Q{<img src="https://www.gravatar.com/avatar/#{ md5digest }" title="Gravatar" />}
    end
  end
end

Liquid::Template.register_tag('gravatar', Jekyll::Gravatar)

HTML code block with line numbers

<div class="container text-center">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

Fancy window with a picture