~~PAGEIMAGE:{{:tools:dokuwiki:codeprism:media:20231026-160617.png}}~~
====== CodePrism ======
{{template>meta:template:pageinfo#tpl
|desc=Introduce Dokuwiki plugin Codeprism.}}
This plugin is designed to get great syntax highlighting by using
[[https://prismjs.com/index.html|Prism]]. You can watch the [[#demo|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%% />%%
[[#tab-1|Table 1]] and [[#tab-2|Table 2]] list the attributes supported by the above syntax.
Table 1. Attributes supported by ''%%%%''
^ 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 [[https://prismjs.com/index.html#supported-languages|this page]]. | ''lang=php'' |
| ''cmd'' | Command line style | ''true''. (If ''[[#cmdout|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**'' ((note:>''custom'' is any word you like to use)) in [[https://www.dokuwiki.org/devel:css#user_styles|conf/userstyle.css]]and 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 ''%%%%''
^ 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|hl]]'' in ''codeprism'' | | |
| ''el'' | See ''[[#el|el]]'' in ''codeprism'' | | |
| ''css'' | See ''[[#css|css]]'' in ''codeprism'' | | |
| ''title'' | See ''[[#title|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|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 [[#cmd|command line style]]. |
| host | Specify the default host name at the command shell prompt when using [[#cmd|command line style]]. |
===== Demo =====
==== Highlight ====
=== Demo 1 ===
{{template>meta:template:codedemo#tpl|code=
switch ($state) {
case DOKU_LEXER_ENTER:
list(, $opt_arr) = $data;
...
foreach($opt_arr as $key => $val) {
$renderer->doc .= ' ' . $key . '="' . $val . '"';
}
$renderer->doc .='>';
$renderer->doc .='';
break;
...
}}
=== Demo 2 ===
{{template>meta:template:codedemo#tpl|code=
switch ($state) {
case DOKU_LEXER_ENTER:
list(, $opt_arr) = $data;
...
foreach($opt_arr as $key => $val) {
$renderer->doc .= ' ' . $key . '="' . $val . '"';
}
$renderer->doc .='>';
$renderer->doc .='';
break;
...
}}
=== Demo 3 ===
{{template>meta:template:codedemo#tpl|code=
switch ($state) {
case DOKU_LEXER_ENTER:
list(, $opt_arr) = $data;
...
foreach($opt_arr as $key => $val) {
$renderer->doc .= ' ' . $key . '="' . $val . '"';
}
$renderer->doc .='>';
$renderer->doc .='';
break;
...
}}
==== File ====
=== Demo 1 ===
{{template>meta:template:codedemo#tpl|code=
}}
=== Demo 2 ===
{{template>meta:template:codedemo#tpl|code=
}}
==== Command Line ====
{{template>meta:template:codedemo#tpl|code=
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 ====
{{template>meta:template:codedemo#tpl|code=
.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.
{{template>meta:template:codedemo#tpl|code=
}}
=== Full Code Block ===
The height of the code block is __no longer limited__ after ''full'' CSS is applied.
{{template>meta:template:codedemo#tpl|code=
}}
{{template>meta:template:refnote#note}}
===== Further Reading =====
* [[https://prismjs.com/index.html]]