---json
{
    "page_id": "m5qw7qkf01up32r0t2j39"
}
---

====== 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:
<file html>
<code html line-numbers="true">
    <p class="hey">Lorem ipsum</p>
</code>
</file>

<note tip>
If you want to shows the output of web language such as HTML, Css or Javascript, you can also use the [[docs:utility:webcode|webcode]] component.
</note>
===== Syntax =====

==== HTML Super Set ====

A ''code block'' can be expressed as a [[docs:marki|HTML super set component]]

Example:
<file html>
<code language line-numbers="true">
 ... Your language ...
</code>
</file>


It follows the full [[docs:utility:prism#syntax|syntax of the prism component]] where the tag name should be ''code''







==== Markdown ====

We support also the [[https://github.github.com/gfm/#fenced-code-blocks|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.
<webcode name="Default" frameborder="0">
<code dw>
```html
<p>Example</p>
```
</code>
  * Output:
</webcode>


<note>
  * This component does not support all [[docs:utility:prism|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: [[docs:block:preformatted]]
</note>

===== Configuration =====


==== Enable / Disable HTML Super syntax ====
The ''code_enable'' [[docs:app:configuration|configuration]] permits to enable / disable the [[#HTML super set|HTML super set syntax]]
and goes back to the default [[doku>wiki:syntax#code_blocks|dokuwiki code block]] output.


==== Theme ====
To set the theme, see [[docs:utility:prism]]