The <luna-code> component renders syntax-highlighted code blocks with an optional toolbar and line numbers.
Paths
/lunadom/components/code/code.js REQUIRED
HTML Example
<!-- A simple card component -->
<div class="card">
<img src="avatar.png" alt="User avatar" />
<h2 class="card-title">Hello World</h2>
<p class="card-body">This is a card description.</p>
<button onclick="handleClick()">Click me</button>
</div>
JavaScript Example
// Fetch user data and render cards
async function loadUsers(apiUrl) {
/* Make the network request */
const response = await fetch(apiUrl);
const users = await response.json();
// Loop through each user
users.forEach((user) => {
const card = document.createElement('div');
card.className = 'card';
card.innerHTML = `
<h2>${user.name}</h2>
<p>${user.email}</p>
`;
document.body.appendChild(card);
});
}
loadUsers('https://api.example.com/users');
Without Toolbar
<luna-button variant="primary">Click me</luna-button>
<luna-button variant="danger">Delete</luna-button>
Without Line Numbers
const greeting = "Hello World";
console.log(greeting);
Customization
Slots
default - The code to display
Attributes
language - Language for syntax highlighting (html, js, css, etc.)
no-toolbar - Hide the toolbar
no-lines - Hide line numbers
CSS Variables
--luna-code-bg - Code block background color
--luna-code-color - Code block text color
Example Code
<!-- Basic Usage -->
<luna-code language="html">
<div class="example">
<p>Your code here</p>
</div>
</luna-code>
<!-- JavaScript -->
<luna-code language="js">
const hello = "world";
console.log(hello);
</luna-code>
<!-- Without Toolbar -->
<luna-code language="html" no-toolbar>
<button>Click me</button>
</luna-code>
<!-- Without Line Numbers -->
<luna-code language="js" no-lines>
const simple = true;
</luna-code>