DokuWiki Plugin Self-Develop

Table of Contents

CodePrism

Introduce Dokuwiki plugin Codeprism.

This plugin is designed to get great syntax highlighting by using Prism. You can watch the Demo first to check if it meets your needs. Codeprism has been posted to the Dokuwiki community at https://www.dokuwiki.org/plugin:codeprism.

timeline title History of Codeprism Jul 12, 2023 : Start developing beta version Jul 14, 2023 : Start using beta in self-hosted site Dec 3, 2023 : Release Ver 1.0 and manual

Syntax

Codeprism supports two syntax:

  • <codeprism attributes>Your code…</codeprism>
  • <fileprism attributes />

Table 1 and Table 2 list the attributes supported by the above syntax.

Table 1. Attributes supported by <codeprism>

Key Description Value Example
title Specify code title A string without spaces. title=codeprism.css
el Enable line numbers true, false. el=true
sl Start line number One number. sl=10
hl Highlight line numbers One number or multiple numbers with , or - (- indicates range). hl=1,3,4-9
lang Language See this page. lang=php
cmd Command line style true. (If cmdout is set, cmd is set to true by default.) cmd=true
cmdout Command output line numbers One number or multiple numbers with , or - (- indicates range). cmdout=2,4,6-9
css Assign a custom CSS to the code block Default is dft. You can create a CSS named pre.dokuwiki-plugin-codeprism-custom (1) in conf/userstyle.cssand use it by css=custom. css=custom
user Specify the user name at the command shell prompt A string without spaces. (If the user is not specified, the default user name configured in the Configuration Settings is used. You can also use user to re-specify a new user name.) user=Source
host Specify the host name at the command shell prompt A string without spaces. (If the host is not specified, the default host name configured in the Configuration Settings is used. You can also use host to re-specify a new host name.) host=Debian

Table 2. Attributes supported by <fileprism>

Key Description Value Example
src Specifies file path File path. src=:media:code:test.py
range Specifies the lines to be displayed in the file n for display line n.
n, for display all lines start at n.
m,n for display line m to line n. 		range=4
range=4,
range=4,20
hl See hl in codeprism
el See el in codeprism
css See css in codeprism
title See title in codeprism

Configuration and Settings

Table 3. Configuration and Settings

Setting Description
theme Specify Codeprism theme.
cdn Specify a CDN which provide PrismJS.
custom-cdn Specify the CDN yourself if the CDNs listed in the cdn does not meet your needs.
override-code True to override code syntax.
show-invis True to show hidden characters such as tabs and line breaks.
hl-brace True to highlight brace pairs when the cursor hovers over one of the braces.
previewer True to enable preview angle, color, gradient, easing, and time.
user Specify the default user name at the command shell prompt when using command line style.
host Specify the default host name at the command shell prompt when using command line style.

Demo

Highlight

Demo 1

Source 

<codeprism lang=php title=codeprism.php>
        switch ($state) {
        case DOKU_LEXER_ENTER:
            list(, $opt_arr) = $data;

            ...
            foreach($opt_arr as $key => $val) {
                $renderer->doc .= ' ' . $key . '="' . $val . '"';
            }

            $renderer->doc .='>';
            $renderer->doc .='<code class="language-'. $opt_arr['data-language']  .'">';
            break;
            ...
</codeprism>

Render 

switch ($state) {
        case DOKU_LEXER_ENTER:
            list(, $opt_arr) = $data;

            ...
            foreach($opt_arr as $key => $val) {
                $renderer->doc .= ' ' . $key . '="' . $val . '"';
            }

            $renderer->doc .='>';
            $renderer->doc .='<code class="language-'. $opt_arr['data-language']  .'">';
            break;
            ...

Demo 2

Source 

<codeprism lang=php hl=3,6-8>
        switch ($state) {
        case DOKU_LEXER_ENTER:
            list(, $opt_arr) = $data;

            ...
            foreach($opt_arr as $key => $val) {
                $renderer->doc .= ' ' . $key . '="' . $val . '"';
            }

            $renderer->doc .='>';
            $renderer->doc .='<code class="language-'. $opt_arr['data-language']  .'">';
            break;
            ...
</codeprism>

Render 

switch ($state) {
        case DOKU_LEXER_ENTER:
            list(, $opt_arr) = $data;

            ...
            foreach($opt_arr as $key => $val) {
                $renderer->doc .= ' ' . $key . '="' . $val . '"';
            }

            $renderer->doc .='>';
            $renderer->doc .='<code class="language-'. $opt_arr['data-language']  .'">';
            break;
            ...

Demo 3

Source 

<codeprism lang=php sl=21 hl=23,26-28 el=true>
        switch ($state) {
        case DOKU_LEXER_ENTER:
            list(, $opt_arr) = $data;

            ...
            foreach($opt_arr as $key => $val) {
                $renderer->doc .= ' ' . $key . '="' . $val . '"';
            }

            $renderer->doc .='>';
            $renderer->doc .='<code class="language-'. $opt_arr['data-language']  .'">';
            break;
            ...
</codeprism>

Render 

switch ($state) {
        case DOKU_LEXER_ENTER:
            list(, $opt_arr) = $data;

            ...
            foreach($opt_arr as $key => $val) {
                $renderer->doc .= ' ' . $key . '="' . $val . '"';
            }

            $renderer->doc .='>';
            $renderer->doc .='<code class="language-'. $opt_arr['data-language']  .'">';
            break;
            ...

File

Demo 1

Source 

<fileprism src=:tools:dokuwiki:codeprism:media:codeprism.txt range=4,20 hl=16/>

Render

Demo 2

Source 

<fileprism src=:tools:dokuwiki:codeprism:media:codeprism.txt range=20, el=true/>

Render

Command Line

Source 

<codeprism lang=bash cmd=true cmdout=2-15 user=source host=debian>
tree 
.
├── action.php
├── codeprism.css
├── conf
│   ├── default.php
│   └── metadata.php
├── lang
│   └── en
│       └── settings.php
├── plugin.info.txt
├── README.md
└── syntax.php

3 directories, 8 files.
</codeprism>

Render 

tree 
.
├── action.php
├── codeprism.css
├── conf
│   ├── default.php
│   └── metadata.php
├── lang
│   └── en
│       └── settings.php
├── plugin.info.txt
├── README.md
└── syntax.php

3 directories, 8 files.

CSS Preview

Source 

<codeprism lang=css>
.example-gradient {
	background: -webkit-linear-gradient(left,     #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* Chrome10+, Safari5.1+ */
	background:    -moz-linear-gradient(left,     #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* FF3.6+ */
	background:     -ms-linear-gradient(left,     #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* IE10+ */
	background:      -o-linear-gradient(left,     #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* Opera 11.10+ */
	background:         linear-gradient(to right, #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* W3C */
}
.example-angle {
	transform: rotate(10deg);
}
.example-color {
	color: rgba(255, 0, 0, 0.2);
	background: purple;
	border: 1px solid hsl(100, 70%, 40%);
}
.example-easing {
	transition-timing-function: linear;
}
.example-time {
	transition-duration: 3s;
}
</codeprism>

Render 

.example-gradient {
	background: -webkit-linear-gradient(left,     #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* Chrome10+, Safari5.1+ */
	background:    -moz-linear-gradient(left,     #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* FF3.6+ */
	background:     -ms-linear-gradient(left,     #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* IE10+ */
	background:      -o-linear-gradient(left,     #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* Opera 11.10+ */
	background:         linear-gradient(to right, #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* W3C */
}
.example-angle {
	transform: rotate(10deg);
}
.example-color {
	color: rgba(255, 0, 0, 0.2);
	background: purple;
	border: 1px solid hsl(100, 70%, 40%);
}
.example-easing {
	transition-timing-function: linear;
}
.example-time {
	transition-duration: 3s;
}

Custom Code Block

I've created two CSS in codeprism.css of the codeprism plugin, so let's see how the css attribute works. 

pre.dokuwiki-plugin-codeprism-dft {
	max-height: 30rem;
	overflow: auto;
}

pre.dokuwiki-plugin-codeprism-full {
	overflow: auto;
}

Default Code Block

By default, code block is limited to 30rem in height. Therefore, when there are too many lines of code, vertical scrollbar appears.

Source 

<fileprism src=:tools:dokuwiki:codeprism:media:codeprism.txt el=true/>

Render

Full Code Block

The height of the code block is no longer limited after full CSS is applied.

Source 

<fileprism src=:tools:dokuwiki:codeprism:media:codeprism.txt el=true css=full/>

Render

Notes

(1) custom is any word you like to use

Further Reading

Creation Date: 2023/07/14, Last modified: 2023/12/03, Author: Siyuan Liu

Comments

H F Q T X