Prism

1 - About

Prism is a linter that permits to:

  • highlights code
  • and add extra features such as line number, copy to clipboard

since 1.11

2 - Syntax


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

where:

  • component is file, code or console
  • 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

3 - Example

3.1 - 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>

3.2 - Prompt

HTML code in a code component with the following syntax,


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

You will get this output:


ls -a

3.3 - File Name


<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>

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

4 - Configuration

4.1 - 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.

4.2 - 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.

5 - Note

5.1 - Supported Plugin

This component integrates the following Prism plugin:

5.2 - 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.

See also this prism faq entry

6 - Support

6.1 - 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 prims 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 not 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]+)?.*$

Powered by ComboStrap