Add caption to Liquid highlight tags

_plugins/highlight-capion-options.rb

@@ -0,0 +1,31 @@
+# Extend Jekyll 'highlight' tag to allow captions.
+# You can use following options:
+# 1. {% highlight <lang> [linenos] [caption] %}
+# 2. {% highlight <lang> [linenos] [caption=some-text_without.duble/quotes] %}
+
+module JekyllTagsExtensions
+  module HighlightCaption
+    def self.prepended(mod)
+      syntax = mod.send(:remove_const, :SYNTAX).source.gsub('\\w', '[^[:^graph:]"]')
+      mod.const_set(:SYNTAX, Regexp.new(syntax))
+      options = mod.send(:remove_const, :OPTIONS_REGEX).source.gsub('\\w', '[^[:^graph:]"]')
+      mod.const_set(:OPTIONS_REGEX, Regexp.new(options))
+    end
+
+    def render(*args)
+      caption = "<figcaption>"
+      caption << "<span class=\"lang\">#{@lang.upcase}#{@highlight_options[:caption] ? ":" : ""}</span>"
+      if @highlight_options[:caption].is_a? String
+        caption << "<em>#{@highlight_options[:caption]}</em>" 
+      end
+      caption << "</figcaption>"
+
+      match = super.match('<figure[^>]*>')
+      match.pre_match + match.to_s + caption + match.post_match
+    end
+  end
+end
+
+Jekyll::Hooks.register :site, :pre_render do |site|
+  Jekyll::Tags::HighlightBlock.prepend JekyllTagsExtensions::HighlightCaption
+end

assets/css/styles.css

@@ -30,16 +30,31 @@ h3 {
 }
 
 figure {
-  background-color: black;
-  border: 1px solid lightgray;
   border-radius: 0.2rem;
   margin: 0;
 }
+figcaption {
+  background-color: #f0f0f0;
+  border: 1px solid lightgray;
+  border-bottom: none;
+  border-top-left-radius: 0.2rem;
+  border-top-right-radius: 0.2rem;
+}
+figcaption .lang {
+  color: #606060;
+  font-weight: bold;
+  font-size: 0.8rem;
+  line-height: 1.4rem;
+  padding: 0 0.4rem;
+}
 pre {
+  background-color: black;
+  border-bottom-left-radius: 0.2rem;
+  border-bottom-right-radius: 0.2rem;
   font-size: 0.85rem;
   line-height: 1.3rem;
   margin: 0;
-  padding: 0.5rem;
+  padding: 0.25rem;
 }
 pre > code {
   background-color: black;
@@ -50,6 +65,7 @@ pre > code.language-bash {
   background-color: black;
   color: #00d700;
 }
+
 code {
   background-color: #9f54aa;
   border-radius: 0.2rem;