ComboStrap - Prism

About

Prism components permits to add raw external content in the web page with extra's such as

line number, copy to clipboard
and eventually code highlighting

The following component are prism component:

code - to highlight code
file - to shows the content of a file,
console - to show the output of a command at the terminal
preformatted - to quote and show unformatted text based on simple text indentation

Example

Line numbers

HTML code in a code component with the following syntax,

<code html line-numbers="true">
    <p class="hey">Type some code here</p>
</code>

You will get this output:

    <p class="hey">Type some code here</p>

Line Highlight

This example shows an HTML code in a code component where the lines:

1 to 3
and 5

are highlighted

Example:

<code html line-numbers="true" line-highlight="1-3, 5">
    <p>Line 1</p>
    <p>Line 2</p>
    <p>Line 3</p>
    <p>Line 4</p>
    <p>Line 5</p>
</code>

With this markup, you will get this output:

    <p>Line 1</p>
    <p>Line 2</p>
    <p>Line 3</p>
    <p>Line 4</p>
    <p>Line 5</p>

Prompt

This example shows a bash prompt.

Example with HTML code in a code component:

<code bash prompt="#">
ls -a
</code>

With this markup, you will get this output:

ls -a

File Name

This example shows you how to defined a file name.

Example: A file block with the file name loremipsum.txt

<file txt loremipsum.txt>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</file>

With the above markup, you will get this output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Constrained by height

prism component may contain a big content that is not completely relevant for the reading of article. In this case, you can constrained it in height

<file txt loremipsum.txt height="150px" scroll="toggle">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
Ut enim ad minim veniam, quis nostrud exercitation ullamco
Duis aute irure dolor in reprehenderit in voluptate velit esse
Excepteur sint occaecat cupidatat non proident, sunt in culp

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
Ut enim ad minim veniam, quis nostrud exercitation ullamco
Duis aute irure dolor in reprehenderit in voluptate velit esse
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</file>

Result:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
Ut enim ad minim veniam, quis nostrud exercitation ullamco
Duis aute irure dolor in reprehenderit in voluptate velit esse
Excepteur sint occaecat cupidatat non proident, sunt in culp

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
Ut enim ad minim veniam, quis nostrud exercitation ullamco
Duis aute irure dolor in reprehenderit in voluptate velit esse
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Syntax

Except from preformatted that is based on indentation, they all follows the below syntax:

<component language [file-path] line-numbers="true" prompt="$" line-highlight="x-y, z">
    .... your code
</component>

where:

language is the language of the code (html, xml, …). Find all supported languages in the Prism website
file-path is an optional argument that gives the name of the file that will show up in the download button when hovering over the component.
line-numbers will show line numbers if present
prompt will add a command line prompt
your code is a placeholder for your code
line-higlight defines the lines to highlight. It accepts:
- A single number refering to the line
- A range of lines (two numbers separated with a hyphen)
- A serie of line numbers or ranges separated by commas.

Configuration

Theme

The code_theme configuration permits to choose the prism theme.

The following themes are available:

prism - the default prism theme
coy
dark
funky
okaidia
solarizedlight
tomorrow
twilight

You can check them on the Prism website by clicking on the theme name in the right toolbar.

Prompt

You can define default prompt for the languages:

bash
batch (dos)
powershell

Windows Prompt: The prism component will add automatically a > at the end of the windows shell prompt (batch and powershell) if not present. This is not possible to pass the character > via the syntax argument because the dokuwiki parser is based on regular expression.

Note

The prism components are based on the Prism library

Supported Plugin

This component integrates the following Prism plugin:

If you want more plugin, just ask

Code Annotation

Prism does not support out of the box code annotation such as the Asciidoctor callout.

The possibilities are:

Just add a comment. Example:

myCode # (3)

or use the following prism plugin that permits code annotation but are not yet implemented
- The Keep Markup (ie keep HTML). With the keep markup, you can add HTML markup such as mark to highlight your code. It does not work yet because Dokuwiki escapes the whole block of code. Another component should be created for this purpose.
- line_highlight permits to highlight a line number.

Support

Regex language

Dokuwiki set a group class to apply a clearfix in its all.css file. This name pollute the css global scope and competes with the output of the regex prism language that set it on the regexp group. The result is that there is a new line on all ( and ) characters.

As you can see below, this is no more the case.

^(\\w+\\s+\\d+\\s+\\d+:\\d+:\\d+)\\s+
([^@]+?)@(\\s+)\\s+(\\S+):\\s+(\\S+)\\s+(\\S+)
\\s+((?:\\S+?,\\s+)*(?:\\S+?))\\s+(\\S+)\\s+(\\S+)
\\s+\\[([^\\]]+)\\]\\s+\"(\\w+)\\s+([^\"\\\\]*
(?:\\\\.[^\"\\\\]*)*)\\s+(\\S+)\"\\s+(\\S+)\\s+
(\\S+)\\s+\"([^\"\\\\]*(?:\\\\.[^\"\\\\]*)*)
\"\\s+\"([^\"\\\\]*(?:\\\\.[^\"\\\\]*)*)\"\\s*
(\\d*-[\\d-]*)?\\s*(\\d+)?\\s*(\\d*\\.[\\d\\.]*)?
(\\s+[-\\w]+)?.*$