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.

Liquid code

Hello {{ 'now' | date: "%Y %h" }}
{% comment %} if item.quantity is 4... {% endcomment %}
{% for i in (1..item.quantity) %}
  {{ i }}
{% endfor %}

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 a built-in site search. Your visitors type a few words into a search box and get a list of the pages and posts that match. The search runs inside the browser, so you do not need an external search service like Google or Bing.

The search engine is called Lunr. It is small, fast, and written in JavaScript by Oliver Nightingale. J1 builds the search index for your whole website automatically, so search works right from the start.

A good search box makes a website much more pleasant to use: visitors find what they are looking for quickly, and they come back. To see how it works, visit the Search Engine page.