Rouge - Ruby themeable syntax highlighter for J1 Template

Rouge is a native Ruby themeable syntax highlighter fully integrated width J1 Template. The highlighter supports 100+ different languages and generates HTML output using standard ANSI 256-colors displayed by all current browsers.

Find available themes for selected languages to see how highlighting works using Rouge.

3 Minutes to read

Select a Theme

For the default themes Uno of J1 Template, the following Rouge themes are used:

theme_light: based on theme igorpro
theme_dark: based on theme monokai.sublime

The default themes used for the J1 Template can be configured with the global template config file ~/_data/j1_config.yml.

# ------------------------------------------------------------------------------
# HIGHLIGHTERs
#
rouge:
  theme_light:                          uno.light
  theme_dark:                           uno.dark

To preview all themes supported by J1 Template, make your selection from the button AVAILABLE THEMES below.

Liquid code

Hello 2023 Sep

Javascript code

// helper functions
//
function styleSheetLoaded(styleSheet) {
  var sheets     = document.styleSheets,
      stylesheet = sheets[(sheets.length - 1)];
  // find CSS file 'styleSheetName' in document
  for(var i in document.styleSheets) {
    if(sheets[i].href && sheets[i].href.indexOf(styleSheet) > -1) {
      return true;;
    }
  }
}

Ruby code

require 'asciidoctor/extensions' unless RUBY_ENGINE == 'opal'
include Asciidoctor (1)
Asciidoctor::Extensions.register do
  class J1BlockMacro < Extensions::BlockMacroProcessor
    use_dsl
    named :banner
    name_positional_attributes 'role'
    def process parent, target, attrs
      html = %(<div id="#{target}" class="#{attrs['role']}"></div>)
      create_pass_block parent, html, attrs, subs: nil
    end
  end
  block_macro J1BlockMacro
end

1	don’t miss to load the Asciidoctor ruby

What next

The search option for the J1 Template is based on the search engine Lunr and is fully integrated with the template. Lunr is designed to be lightweight yet full-featured to provide users with a great search experience. Using Lunr for a Jekyll website, there is no need to integrate complex external, server-sided search engines like Google or Bing.

Visitors should be able to search your site to find pages and posts they are interested in. Usability is one of the top criteria for all visitors browsing your site. A good user experience and excellent content are key factors for the success of a website. Nothing in this business is guaranteed, but user experience efforts are good reasons your readers will return.

Check what is searching a J1 website all about at Lunr Search.