ComboStrap UI - Code

Undraw My Documents

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




Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.




Related HowTo's
Undraw Animating
How to add HTML , Css, and Javascript directly to the content of your pages?

This article shows you how you can add HTML, CSS, or Javascript to the content of your markup page.


Recommended Pages
Undraw My Documents
ComboStrap - Prism

Prism components permits to add raw external content in the web page with extra's such as line number, copy to clipboard and eventually code highlighting The following component are prism component:...
Undraw My Documents
ComboStrap UI - Block

A block component is a component that wraps/encapsulate: content such as text, image,... other block component If the component should start at a new line or expand on multiple line and you can...
Undraw My Documents
ComboStrap UI - Unit Testing

unit is just a semantic component to indicate a unit of sequence of code block. It doesn't render and is used to create unit:testunit tests in documentation that are later used by an external test engine....
Undraw My Documents
Create diagram with mermaid

This component will render mermaid diagram
Undraw My Documents
Markdown syntax supported in ComboStrap

This page lists all markdown syntax supported in ComboStrap
Page Explorer List Name To Ui Region
Page-explorer: adding page navigation easily to your website

With the page-explorer component, you can add an explorer like panel that will list your pages in a list or collapsible tree fashion
Undraw My Documents
Preformatted (indented code block) - ComboStrap

How to create a code block with indentation
Render a railroad diagram from a BNF grammar

This component helps you render a railroad / syntax diagram from a BNG grammar
Undraw My Documents
Render web code in a your page (javascript, html, ...)

With the `web code` component, you can embedded snippet of Javascript, Html and Css script and render their output.



Task Runner