ComboStrap - Prism

Undraw My Documents

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




Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.




Recommended Pages
Undraw My Documents
ComboStrap UI - Code

The code component permits to format block of code and add features such as: syntax highlighting clipboard copy line numbering You can create block of code like this one: HTMLwebcode HTML...
Undraw My Documents
ComboStrap UI - Console

The console component is just a semantic layer above the prism component. It's to indicate that this is the output of a command line (and not a file). You can create block like this one: This is...
Undraw My Documents
ComboStrap UI - File

The file component is a component that represents the content of a file. It's a prism component that add: syntax highlighting and clipboard copy You can create block of code like this one: ...
Page Explorer List Name To Ui Region
Page-explorer: adding page navigation easily to your website

With the page-explorer component, you can add an explorer like panel that will list your pages in a list or collapsible tree fashion



Task Runner