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
Syntax
Except from preformatted that is based on indentation, they all follows the below syntax:
<component language [file-path] line-numbers="true" prompt="$">
.... 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
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>
Prompt
HTML code in a code component with the following syntax,
<code bash prompt="#">
ls -a
</code>
You will get this output:
ls -a
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
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
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:
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
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]+)?.*$