Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including asciidoctor-prism-extension with all npm packages installed. Try it out:

require("@asciidoctor/core/package.json"); // @asciidoctor/core is a peer dependency. var asciidoctorPrismExtension = require("asciidoctor-prism-extension")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

asciidoctor-prism-extension v2.0.6

Highlight Asciidoc code listings with Prism.js, server side, with no front-end dependencies.

asciidoctor-prism-extension Build Status

Highlight Asciidoc code listings with Prism.js, server side, with no front-end dependencies.

This module is intended to be used with Asciidoctor.js, and Node.js (v10+). It adds a new syntax highlighter, to be used when converting Asciidoc to HTML5 documents. The syntax highlighting happens during the document conversion.

Example of rendered code listing

Install

$ npm install @asciidoctor/core asciidoctor-prism-extension

Configure

Register the extension

const asciidoctor = require('@asciidoctor/core')();
const prismExtension = require('asciidoctor-prism-extension');

asciidoctor.SyntaxHighlighter.register('prism', prismExtension);

Change the rendering

This extension relies on Asciidoc attributes to affect the theme and the highlighted syntaxes.

= Document
:source-highlighter: prism
:prism-languages: bash,docker,jsx

...
AttributeDefaultPossible values
prism-themeprism.cssAny filename in this list.
prism-languagesasciidoc,bash,json,markdown,typescript,yamlAny supported language.

Theme can be disabled with the negated attribute (! character):

= Document
:source-highlighter: prism
:prism-theme!:
:prism-languages: bash,docker,jsx

...

Render document

Then you convert as usual:

asciidoctor.convertFile('document.adoc', {
  to_file: 'document.html',
  backend: 'html5'
});

Note: attributes can be specified at this stage too. Have a look at Asciidoctor.js API to learn more about it.

Use

Author your documents as you would regularly do. The second argument of a code listing hints the language to the syntax highlighter.

In the following example, yaml is going to be used to colour the output:

[source,yaml]
.example.yml
----
language: node_js
node_js: node

script: npm test
----

About

Prism

Prism is a highly configurable syntax highlighter.

License

MIT.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free