About
The code component permits to format block of code and add features such as:
- syntax highlighting
- clipboard copy
- line numbering
Example
You can create block of code like this one:
<code html line-numbers="true">
<p class="hey">Lorem ipsum</p>
</code>
If you want to shows the output of web language such as HTML, Css or Javascript, you can also use the webcode component.
Syntax
HTML Super Set
A code block can be expressed as a HTML super set component
Example:
<code language line-numbers="true">
... Your language ...
</code>
It follows the full syntax of the prism component where the tag name should be code
Markdown
We support also the Github fenced code block where the code block:
- is wrapped by 3 backticks ` or tilde ~
- and the language may be specified
Example of an HTML code block.
```html
<p>Example</p>
```
- Output:
<p>Example</p>
- This component does not support all prism functionality such as line numbering, file naming, …
- We support also the original markdown syntax. The indented code block syntax can be found on this page: Preformatted (indented code block) - ComboStrap
Configuration
Enable / Disable HTML Super syntax
The code_enable configuration permits to enable / disable the HTML super set syntax and goes back to the default dokuwiki code block output.
Theme
To set the theme, see ComboStrap - Prism