Rouge · 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 IgorPro theme igorpro
theme_dark: based on Monokai theme Sublime 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 2024 Oct

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 module QuickSearch for J1 Template is based on Lunr, a great search engine inspired by Apache Solr, written in Javscript by Oliver Nightingale. The engine is fully integrated with the template and is designed to provide users with a great search experience.

Using the search module QuickSearch for J1 based websites, it is not longer needed to integrate complex external, server-sided search engines like Google or Bing. Visitors are 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 business is guaranteed, but excellent user experience efforts are good reasons your readers will return.

Learn what is searching a J1 based websites all about at Search Engine.