Hide

YetaWF Documentation

Display
Print

YetaWF.SyntaxHighlighter Package

Overview

This package implements syntax highlighting in modules.

Formats <pre> .. </pre> sections automatically using either highlight.js or Alex Gorbatchev's Syntax Highlighter.

Using Syntax Highlighter Highlight.js (Skin) Module

This module can be referenced by sites, pages or modules, in which case <pre> .. </pre> sections are formatted using highlight.js.

The appearance of the <pre> .. </pre> sections using syntax highlighting can be defined using Syntax Highlighter Settings accessible using Admin > Settings > Syntax Highlighter Settings (standard YetaWF site), Highlight.js tab.

Syntax highlighting can be configured on each <pre> or <code> Html tag. Additional information about configuring syntax highlighting can found at https://highlightjs.org/.

The following languages are currently available (language names are available at http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html#language-names-and-aliases):

LanguageLanguage Names (Css Class)
Apacheapache, apacheconf
Bashbash, sh, zsh
C#cs, csharp
C++cpp, c, cc, h, c++, h++, hpp
CSScss
CoffeeScriptcoffeescript, coffee, cson, iced
Diffdiff, patch
HTML, XMLxml, html, xhtml, rss, atom, xjb, xsd, xsl, plist
HTTPhttp, https
Iniini
JSONjson
Javajava, jsp
JavaScriptjavascript, js, jsx
Makefilemakefile, mk, mak
Markdownmarkdown, md, mkdown, mkd
Nginxnginx, nginxconf
Objective-Cobjectivec, mm, objc, obj-c
PHPphp, php3, php4, php5, php6
Perlperl, pl, pm
Pythonpython, py, gyp
Rubyruby, rb, gemspec, podspec, thor, irb
SQLsql
Shell Sessionshell, console

Highlight.js uses the defined Css class to determine the language (using one of the language names, optionally prefixed by language- or lang-). The language name can be omitted, in which case highlight.js will detect the language automatically. The Css class "lang-nohighlight" can be used to turn off highlighting so highlight.js doesn't automatically determine the language.

Example

<pre class="language-js">
function somejavascript() {
    var x = 20;
    x += 10;
    return x;
}
</pre>
function somejavascript() {
    var x = 20;
    x += 10;
    return x;
}

Adding/Removing Languages

It is possible to add and remove languages by downloading a custom version of highlight.js at https://highlightjs.org/download/. Select/deselect all desired languages and download. Extract highlight.pack.js from the downloaded Zip file and place it into the folder shown below (which may need to be created).

Replace domain.com with the name of the domain. Each site within one YetaWF instance can have its own set of languages and is not shared.

./Website/wwwroot/AddonsCustom/domain.com/YetaWF/SyntaxHighlighter/_Addons/SkinHighlightJS

Using Syntax Highlighter Alex Gorbatchev (Skin) Module

This module can be referenced by sites, pages or modules, in which case <pre> .. </pre> sections are formatted using Alex Gorbatchev's Syntax Highlighter.

The appearance of the <pre> .. </pre> sections using syntax highlighting can be defined using Syntax Highlighter Settings accessible using Admin > Configuration >Syntax Highlighter Settings (standard YetaWF site), Alex Gorbatchev tab.

Syntax highlighting can be configured on each <pre> Html tag. Additional information about configuring syntax highlighting can found at http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/).

The following brushes are currently available:

LanguageBrush (Css Class)
C++cpp
C#csharp
Csscss
Javascriptjscript, js
Sqlsql
Visual Basicvb
Xmlxml

Example

<pre class="brush:js">
function somejavascript() {
    var x = 20;
    x += 10;
    return x;
}
</pre>
function somejavascript() {
    var x = 20;
    x += 10;
    return x;
}

Modules

Alex Gorbatchev

Module NameDescription
Syntax Highlighter Alex Gorbatchev (Skin) ModuleSkin module supporting syntax highlighting in modules, by Alex Gorbatchev, referenced by sites, pages or modules, in which case <pre> .. </pre> sections are rendered using syntax highlighting.

Configuration

Module NameDescription
Syntax Highlighter Settings ModuleConfiguration module for syntax highlighting. Define the appearance of sections using syntax highlighting. It is accessible using Admin > Settings > Syntax Highlighter Settings (standard YetaWF site).

Highlight.js

Module NameDescription
Syntax Highlighter Highlight.js (Skin) ModuleSkin module supporting syntax highlighting in modules using Highlight.js, referenced by sites, pages or modules, in which case <pre> .. </pre> sections are rendered using syntax highlighting.

License

The YetaWF.SyntaxHighlighter package is part of YetaWF, an open source product licensed under the GNU General Public License, version 3 (GPL-3.0) - Copyright - Softel vdm, Inc.