title: Rouge tagline: preview rouge themes date: 2020-11-08 00:00:00 +100 description: >

Previewer page for J1 module Rouge. Rouge is a pure Ruby
syntax highlighter. It can highlight over 100 different
languages fully integrated with J1 Template.

categories: [ Previewer ] tags: [ Highlighter, Rouge ]

scrollbar: false toc: true

permalink: /pages/public/previewer/rouge/ regenerate: true

resources: [ rouge, clipboard ] resource_options:

- toccer:
    collapseDepth:                    4
- attic:
    padding_top:                      400
    padding_bottom:                   50
    opacity:                          0.5
    slides:
      - url:                          /assets/images/modules/attics/jessica-ruscello-1920x1280.jpg
        alt:                          Photo by Jessica Ruscello Unsplash

# caption: # text: Photo by Jessica Ruscello on Unsplash # href: unsplash.com/@jasonrosewell

badge:
  type:                       unsplash
  author:                     Jessica Ruscello
  href:                       https://unsplash.com/@jruscello

// Page Initializer // ============================================================================= // Enable the Liquid Preprocessor :page-liquid:

// Set (local) page attributes here // —————————————————————————– // :page–attr: <attr-value> // :source-highlighter: rouge // dzone.com/articles/awesome-asciidoctor-highlight-lines-in-source-code // :rouge-line-class: line :rouge-line-id: X%i

// Load Liquid procedures // —————————————————————————– {% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}

// Load page attributes // —————————————————————————– {% include {{load_attributes}} scope=“global” %}

// Page content // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

// Include sub-documents // —————————————————————————–

Theme selector

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

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

Make a selection of theme below to preview.

++++ <div class=“btn-group”>

<!-- See: https://stackoverflow.com/questions/47242702/force-bootstrap-dropdown-menu-to-always-display-at-the-bottom-and-allow-it-go-of -->
<!-- NOTE: control the behaviour of popper.js for positioning -->
<!-- NOTE: set attribute data-flip="false" to open the SELECT list at the BOTTOM of the BUTTON -->
<button class="btn btn-primary btn-raised btn-flex btn-lg dropdown-toggle" data-flip="false" type="button" data-toggle="dropdown" data-target="#navbarDropdown" aria-haspopup="true" aria-expanded="false">
Select a theme<span class="caret"></span>
</button>
<ul class="dropdown-menu scrollable-menu" role="menu">
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16</a></li>
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.dark')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.dark</a></li>
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.light')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.light</a></li>
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.monokai')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.monokai</a></li>
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.monokai.dark')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.monokai.dark</a></li>
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.monokai.light')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.monokai.light</a></li>
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.solarized')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.solarized</a></li>
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.solarized.dark')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.solarized.dark</a></li>
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.solarized.light')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.solarized.light</a></li>
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('colorful')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>colorful</a></li>
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('github')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>github</a></li>
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('gruvbox')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>gruvbox</a></li>
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('gruvbox.light')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>gruvbox.light</a></li>
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('igorpro')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>igorpro</a></li>
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('molokai')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>molokai</a></li>
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('monokai')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>monokai</a></li>
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('monokai.sublime')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>monokai.sublime</a></li>
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('pastie')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>pastie</a></li>
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('thankful_eyes')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>thankful_eyes</a></li>
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('tulip')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>tulip</a></li>
</ul>

</div> <div id=“selected” class=“mt-1 mb-3”></div> ++++

Language examples

Find below a selected number languages (code blocks) and their highlightning.

include::{documentdir}/rouge/100_language_examples.asciidoc[]

Rouge attributes

You can further customize the source block output with additional Rouge attributes.

include::{tabledir}/rouge/200_rouge_attributes.asciidoc[]

Supported languages

Here the list of the (current of Feb, 2021) supported languages and lexers (language highlighters).

include::{tabledir}/rouge/300_supported_languages.asciidoc[]