Jekyll One

Fulltext Search

Rouge is a code highlighter built into the J1 Template. Code highlighting adds colors to source code so it is easier to read. Different parts of the code — such as keywords, text strings, comments, or numbers — get different colors.

Rouge supports more than 100 programming languages and produces colored HTML output that works in every modern browser. You can also choose between many different color themes to match the look of your site. Below you can preview a few sample languages with the default Rouge themes and try out other themes from the menu.

3 Minutes to read.

Select a Theme

The J1 Template uses two default Rouge themes — one for light mode and one for dark mode:

  • Light mode uses the IgorPro theme igorpro.

  • Dark mode uses the Sublime version of Monokai monokai.sublime.

You can change the default Rouge themes in the global template configuration file ~/_data/j1_config.yml:

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

To preview all themes supported by J1 Template, click the button AVAILABLE THEMES below and pick one from the list.

  • base16
  • base16.dark
  • base16.light
  • base16.monokai
  • base16.monokai.dark
  • base16.monokai.light
  • base16.solarized
  • base16.solarized.dark
  • base16.solarized.light
  • colorful
  • github
  • gruvbox
  • gruvbox.light
  • igorpro
  • molokai
  • monokai
  • monokai.sublime
  • pastie
  • thankful_eyes
  • tulip

Liquid code

Hello 2026 May

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 J1 Template also comes with its own site search. Site search lets your visitors find pages and posts on your site by typing words into a search box. The search runs inside the browser — you do not need an external search engine like Google or Bing.

The search engine is called Lunr. It is small, fast, and was written in JavaScript by Oliver Nightingale. The J1 Template builds a search index for your whole site automatically, so search works out of the box.

A good search box is part of a good user experience — it helps your visitors find what they need quickly, which is one of the main reasons they will come back.

To learn more about searching a J1-based website, go to the Search Engine page.