0.0.4

Code

A pure vanilla JS implementation of Prism JS Opens in a new window

Anatomy

The Code component can be configured as a code block or a inline code.

import "@netoum/corex"; 
                      import "@netoum/corex";
npm install @netoum/corex 
                      npm install @netoum/corex
                      
                    
<code data-lang="js" class="code-js">import "@netoum/corex";</code>
            <pre>                <code data-lang="js" class="code-js">import "@netoum/corex";
            </code>
            </pre>
            <code data-lang="bash" class="code-js">npm install @netoum/corex</code>
            <pre>                <code data-lang="bash" class="code-js">npm install @netoum/corex
            </code>
            </pre>

Data attributes

Each code can be set with different settings with the following data-attribute.

npm install @netoum/corex import "@netoum/corex"; import "@netoum/corex"; @import "@netoum/corex-css"; <button class="button">Text</button> 
<code data-lang="bash" class="code-js">npm install @netoum/corex</code>
            <code data-lang="js" class="code-js">import "@netoum/corex";</code>
            <code data-lang="ts" class="code-js">import "@netoum/corex";</code>
            <code data-lang="css" class="code-js">@import "@netoum/corex-css";</code>
            <code data-lang="html" class="code-js">&lt;button class="button"&gt;Text&lt;/button&gt;</code>
Data attribute Type / Options Description
data-lang string The language code used for code highlighting. Default to html

Custom Languages

By default the following languages are available

html js ts css markup bash shell-session

To add more languages you will need to install and import to required languages

npm install prismjs @types/prismjs 
          
            import "prismjs/components/prism-go";
            import "prismjs/components/prism-halm";

Templates

Code components is available in the followng templates

Clipboard Collapsible