Code

A structured code container with an optional header bar showing filename, language badge, and copy button. Syntax tokens are defined as custom properties so any highlighter can use them.

Default

<div class="ln-code">
  <div class="ln-code__header">
    <span class="ln-code__filename">index.js</span>
    <span class="ln-code__lang">JS</span>
  </div>
  <pre class="ln-code__body"><code>function greet(name) {
  return `Hello, ${name}!`;
}

export default greet;</code></pre>
</div>

function greet(name) {
  return `Hello, ${name}!`;
}

export default greet;

Flush variant

The --flush modifier removes border-radius and bottom margin for embedding inside other containers.

<div class="ln-code ln-code--flush">
  <pre class="ln-code__body"><code>npm install ln</code></pre>
</div>

npm install ln

Reference

Class	Description	Responsive
`.ln-code`	Code block container with syntax highlighting	No
`.ln-code__header`	File name and language label bar	No
`.ln-code__lang`	Language label in the header	No
`.ln-code__body`	Scrollable code area (`<pre>`)	No
`.ln-code__line`	Individual line with line number	No
`.ln-code__line--highlight`	Highlighted line with accent border	No
`.ln-code--wrap`	Enable word wrapping	No
`.ln-code--flush`	Remove border-radius and bottom margin	No