WebCola

Highlight.js uses heuristics to detect languages, which can be inaccurate for short snippets. To ensure correct highlighting, specify the language using a class on the <code> or <pre> element.

Recommended HTML5 class names: language-html, language-php, etc.

To prevent a block from being highlighted, use the no-highlight class.

Highlight.js uses heuristics to detect languages, which can fail on short code fragments. You can improve accuracy by explicitly setting the language using a class on the <code> or <pre> element.

• To specify a language: Use classes like language-html or language-php (HTML5 recommended names).
• To disable highlighting: Use the no-highlight class.

To use Highlight.js automatically on a web page, link a stylesheet and the highlight.pack.js library, then call hljs.initHighlightingOnLoad() during the page load event. This will automatically find and highlight all code blocks marked up as <pre><code ...> .. </code></pre>.

<link rel="stylesheet" href="styles/default.css">
<script src="highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

To build, minify, and test WebCola from the source directory on Linux, Mac, or Windows, follow these steps:

1. Install node.js.
2. Run npm install to install dependencies.
3. Run npm run build to create cola.js and cola.min.js in the dist directory.
4. Run npm run test to execute tests.

For Visual Studio users, open webcola.sln after installing the TypeScript plugin.

You can use Highlight.js in a Node.js environment by installing the package via NPM. You can either highlight code when the language is known using hljs.highlight() or use automatic language detection with hljs.highlightAuto().

npm install highlight.js

var hljs = require('highlight.js');

// If you know the language
hljs.highlight(lang, code).value;

// Automatic language detection
hljs.highlightAuto(code).value;

To serve the example content included in the WebCola directory, use the http-server Node.js module:

1. Install http-server globally:

npm install -g http-server

2. Prepare the website directory:

npm run website

3. Start the server:

http-server website

By default, the examples will be available at http://localhost:8080.

Install the full library via NPM:

npm install highlight.js

Or build it from source to include only specific languages:

python3 tools/build.py -tnode lang1 lang2 ..

In your JavaScript code, you can use hljs.highlight(lang, code).value if the language is known, or hljs.highlightAuto(code).value for automatic language detection.

var hljs = require('highlight.js');

// If you know the language
hljs.highlight(lang, code).value;

// Automatic language detection
hljs.highlightAuto(code).value;

WebCola can be installed via several methods depending on your environment:

Browser

Include the script tag in your HTML. You can use the minified version for production:

<script src="https://ialab.it.monash.edu/webcola/cola.min.js"></script>

Npm

Install the package directly:

npm install webcola --save

Alternatively, add it to your package.json dependencies:

"dependencies": {
  "webcola": "latest"
}

and run npm install.

Bower

bower install webcola --save

TypeScript Support

To get complete TypeScript definitions, install tsd 0.6 and run tsd link.

To use Highlight.js automatically on a webpage, include the library and a style sheet, then call hljs.initHighlightingOnLoad(). It will automatically find and highlight any code wrapped in <pre><code ...> .. </code></pre> tags.

<link rel="stylesheet" href="styles/default.css">
<script src="highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

To use Highlight.js with an AMD module loader, build it from source using the -tamd flag:

$ python3 tools/build.py -tamd lang1 lang2 ..

This generates build/highlight.pack.js. You can then require it as follows:

require(["highlight.js/build/highlight.pack"], function(hljs){

  // If you know the language
  hljs.highlight(lang, code).value;

  // Automatic language detection
  hljs.highlightAuto(code).value;
});

To use Highlight.js with an AMD loader, you must build it from the source to generate a compatible module. Use the python3 tools/build.py script with the -tamd flag and specify the languages you need.

$ python3 tools/build.py -tamd lang1 lang2 ..

require(["highlight.js/build/highlight.pack"], function(hljs){

  // If you know the language
  hljs.highlight(lang, code).value;

  // Automatic language detection
  hljs.highlightAuto(code).value;
});

You can customize how TAB ('\x09') characters are handled in code blocks by setting the hljs.tabReplace property. You can replace them with a fixed number of spaces or a HTML <span> for custom styling.

<script type="text/javascript">
  hljs.tabReplace = '    '; // 4 spaces
  // ... or
  hljs.tabReplace = '<span class="indent">\t</span>';

  hljs.initHighlightingOnLoad();
</script>