ComboStrap UI - Code

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>

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

Powered by ComboStrap