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:
-
light: `igorpro`
-
dark: `monokai.sublime`
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[]