EN

Code Component

A specialized component for displaying syntax-highlighted code blocks with a language label, optional filename, and copy-to-clipboard. Code is highlighted at build time by Shiki inside themdToHTMLmarkdown filter, which inlines token colors so no theme stylesheet is needed.

example.js
javascript
/**
 * Example JavaScript function with JSDoc comments
 * @param {string} name - The name to greet
 * @returns {string} Greeting message
 */
function greet(name) {
  return `Hello, ${name}!`;
}

// Usage example
const message = greet('World');
console.log(message); // Output: Hello, World!

// ES6 arrow function version
const greetArrow = (name) => `Hello, ${name}!`;
styles.css
css
/* Modern CSS Grid Layout */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  padding: 2rem;
}

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  transition: transform 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
  .card {
    background: #1a1a1a;
    color: white;
  }
}
example.md
yaml
---
layout: pages/sections-with-sidebar.njk
title: 'My Page Title'
sections:
  - sectionType: hero
    text:
      title: 'Welcome'
      prose: 'This is a hero section'
  - sectionType: code
    code:
      filename: 'main.js'
      content: |
        ```js
        console.log('Hello from Metalsmith!');
        ```
---

Configuration

yaml
- sectionType: code
  containerTag: section
  containerFields:
    inContainer: true
    isAnimated: true
  code:
    filename: "app.js"   # Optional filename shown in the header
    showCopy: true       # Show the copy button (default: true)
    content: |           # A fenced markdown code block
      ```js
      function example() {
        console.log('Hello, World!');
      }
      ```

Configuration Options

Code Properties

PropertyTypeRequiredDescription
contentstringYesA fenced markdown code block; the fence info string sets the language (e.g. js, css, yaml)
filenamestringNoOptional filename shown in the header
showCopybooleanNoShow/hide the copy button (default: true)

Notes

Highlighting is done at build time by Shiki inside themdToHTMLfilter. Shiki inlines every token color as a style attribute, so no theme stylesheet is loaded and there is no per-section theme — the theme is configured once in the markdown filter.

Supported Languages

The bundled Shiki grammars include JavaScript, TypeScript, CSS, HTML, Bash, JSON, YAML and Markdown. For Nunjucks templates usenjkornunjucksas the fence language — it is aliased to thejinja-htmlgrammar.