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.
Codeprism supports two syntax:
Table 1 and Table 2 list the attributes supported by the above syntax.
<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 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 is used. You can also use host to re-specify a new host name.) | host=Debian |
<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 |
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 | 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. |
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;
...
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;
...
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;
...
Source
<fileprism src=:tools:dokuwiki:codeprism:media:codeprism.txt range=4,20 hl=16/>
Render
Source
<fileprism src=:tools:dokuwiki:codeprism:media:codeprism.txt range=20, el=true/>
Render
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.
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;
}
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;
}
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
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