Code Component

A specialized component for displaying syntax-highlighted code blocks with enhanced features. Extends the existing Prism.js implementation used in text-only sections with additional functionality.

example.js Theme: prism
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 Theme: tomorrow
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 Theme: coy
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:
      language: 'javascript'
      theme: 'tomorrow'
      filename: 'main.js'
      content: |
        console.log('Hello from Metalsmith!');
---

Configuration

- sectionType: code
  containerTag: section
  containerFields:
    inContainer: true
    isAnimated: true
  code:
    language: "javascript"      # Programming language for highlighting
    theme: "default"           # Prism theme (default, tomorrow, okaidia, etc.)
    filename: "app.js"         # Optional filename display
    showCopy: true             # Enable/disable copy button
    content: |                 # The code content
      function example() {
        console.log('Hello, World!');
      }

Configuration Options

Code Properties

Property	Type	Required	Description
`language`	string	Yes	Programming language for syntax highlighting (javascript, css, html, python, etc.)
`content`	string	Yes	The actual code content using YAML literal block syntax
`theme`	string	No	Prism theme to load dynamically from CDN (default: 'default')
`filename`	string	No	Optional filename to display in the header
`showCopy`	boolean	No	Show/hide the copy button (default: true)

Notes

Supported Languages

The component supports all languages available inPrism.jsincluding:

JavaScript, TypeScript, JSX
HTML, CSS, SCSS, Less
Python, PHP, Ruby, Java
Go, Rust, C++, C#
YAML, JSON, Markdown
Bash, PowerShell, SQL
And many more...

Available Themes

The component supports multiple Prism themes that are loaded dynamically:

default - Uses the existing theme from text-only component
tomorrow - GitHub-style dark theme
okaidia - Monokai-inspired theme
twilight - TextMate twilight theme
prism - Clean light theme
dark - High contrast dark theme
solarizedlight - Solarized light theme
coy - Minimal light theme