# Code

A pure HTML and vanilla JS implementation of PrismJS

Prism is a lightweight, extensible syntax highlighter

# Anatomy

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

The code block must wrapped in a pre tag

<button class="button">Text</button>

            <button class="button">Text</button>

<code data-lang="html" class="code-js"
              >&lt;button class=&quot;button&quot;&gt;Text&lt;&#47;button&gt;
            </code>
            <pre>
            <code  data-lang="html" class="code-js">&lt;button class=&quot;button&quot;&gt;Text&lt;&#47;button&gt;
            </code>
            </pre>

# Data attributes

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

            npm install @corex-ui/static

            import "@corex-ui/static";

            import "@corex-ui/static";

            @import "@corex-ui/static-css";

            <button class="button">Text</button>

<pre>
            <code data-lang="bash" class="code-js">npm install @corex-ui/static</code>
            </pre>
            <pre>
            <code data-lang="js" class="code-js">import "@corex-ui/static";</code>
            </pre>
            <pre>
            <code data-lang="ts" class="code-js">import "@corex-ui/static";</code>
            </pre>
            <pre>
            <code data-lang="css" class="code-js">@import "@corex-ui/static-css";</code>
            </pre>
            <pre>
            <code data-lang="html" class="code-js">&lt;button class="button"&gt;Text&lt;/button&gt;</code>
            </pre>

data-lang
Type: string
Description: 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

pnpm install prismjs @types/prismjs

import "prismjs/components/prism-go";
            import "prismjs/components/prism-halm";

# Modifiers

Code block support modifier classes that control their appearance.
You can combine multiple modifiers on the same code block.

The default modifier is applied automatically, so you don’t need to include it explicitly.

Modifier	Description
Size	Adjusts the overall size of the code block.

You may have noticed the double dash before the modifier name — this follows the BEM (Block Element Modifier) naming convention

# Size

Use class="code--{size}" to set the size of a code.

Available options:
sm, inherit(default), md, lg, xl

@import "@corex-ui/static-css";

            @import "@corex-ui/static-css";
                @import "@tailwindcss";

            @import "@corex-ui/static-css";
                @import "@tailwindcss";

            @import "@corex-ui/static-css";
                @import "@tailwindcss";

            @import "@corex-ui/static-css";
                @import "@tailwindcss";

            @import "@corex-ui/static-css";
                @import "@tailwindcss";

<div>
              <code data-lang="css" class="code-js code--sm"
                >@import "@corex-ui/static-css";</code
              >
            </div>
            <div>
              <code data-lang="css" class="code-js">@import "@corex-ui/static-css";</code>
            </div>
            <div>
              <code data-lang="css" class="code-js code--md"
                >@import "@corex-ui/static-css";</code
              >
            </div>
            <div>
              <code data-lang="css" class="code-js code--lg"
                >@import "@corex-ui/static-css";</code
              >
            </div>
            <div>
              <code data-lang="css" class="code-js code--xl"
                >@import "@corex-ui/static-css";</code
              >
            </div>
            <div>
              <pre class="code--sm">
            <code data-lang="css" class="code-js">@import "@corex-ui/static-css";
                @import "@tailwindcss";
            </code>
            </pre>
            </div>
            <div>
              <pre>
            <code data-lang="css" class="code-js">@import "@corex-ui/static-css";
                @import "@tailwindcss";
            </code>
            </pre>
            </div>
            <div>
              <pre>
            <code data-lang="css" class="code-js code--md">@import "@corex-ui/static-css";
                @import "@tailwindcss";
            </code>
            </pre>
            </div>
            <div>
              <pre class="code--lg">
            <code data-lang="css" class="code-js">@import "@corex-ui/static-css";
                @import "@tailwindcss";
            </code>
            </pre>
            </div>
            <div>
              <pre class="code--xl">
            <code data-lang="css" class="code-js">@import "@corex-ui/static-css";
                @import "@tailwindcss";
            </code>
            </pre>
            </div>

# Installation

First, complete the Corex UI initial installation guide for your platform, bundler, or framework.

Import the component

import "@corex-ui/static/components/code";

This will automatically initialize all elements with class="code-js" and add the necessary interaction behavior.

Add styling

The component is unstyled by default for maximum customization flexibility.

To apply the default Corex UI design system styles, import the stylesheet:

@import "@corex-ui/design/components/code.css";

These styles will be applied to all pre and code tags.

Documentation navigation