diff --git a/_plugins/highlight-capion-options.rb b/_plugins/highlight-capion-options.rb new file mode 100644 index 0000000..2e38d8d --- /dev/null +++ b/_plugins/highlight-capion-options.rb @@ -0,0 +1,31 @@ +# Extend Jekyll 'highlight' tag to allow captions. +# You can use following options: +# 1. {% highlight [linenos] [caption] %} +# 2. {% highlight [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 = "
" + caption << "#{@lang.upcase}#{@highlight_options[:caption] ? ":" : ""}" + if @highlight_options[:caption].is_a? String + caption << "#{@highlight_options[:caption]}" + end + caption << "
" + + match = super.match(']*>') + 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 diff --git a/assets/css/styles.css b/assets/css/styles.css index e20dd4a..b746328 100644 --- a/assets/css/styles.css +++ b/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;