Code Block

The Code Block component provides a lightweight and semantic way to display formatted code using native HTML pre and code elements.

Ignix Lite code blocks support multiple languages and horizontal scrolling for long code snippets.

---

Languages

JavaScript

function greet() {
console.log("Hello world")
}

Python

def greet():
print("Hello")

Bash

npm install @mindfiredigital/ignix-lite

Code

<pre>
  <code data-lang="js">
    function greet() {
      console.log("Hello world")
    }
  </code>
</pre>

<pre>
    <code data-lang="python">
    def greet():
        print("Hello")
    </code>
</pre>

<pre>
    <code data-lang="bash">
        npm install @mindfiredigital/ignix-lite
    </code>
</pre>

Usage

Preview

pnpm add @mindfiredigital/ignix-lite

Code

<pre>
  <code data-lang="bash">
    pnpm add @mindfiredigital/ignix-lite
  </code>
</pre>

---

Attributes

Attribute	Type	Description
data-lang	string	Indicates the programming language
pre	element	Wrapper for formatted code
code	element	Displays inline or block code