Code Highlighting Demo

This blog post demonstrates code syntax highlighting using Shiki. Markdown in structured content sections is converted to HTML by themdToHTMLfilter, which runs Shiki as it renders each fenced code block, so the highlighting is baked into the HTML at build time with no client-side work.

JavaScript Example

Here's a simple function that checks if a number is prime:

javascript

function isPrime(n) {
  if (n <= 1) return false;
  if (n <= 3) return true;

  if (n % 2 === 0 || n % 3 === 0) return false;

  for (let i = 5; i * i <= n; i += 6) {
    if (n % i === 0 || n % (i + 2) === 0) {
      return false;
    }
  }
  return true;
}

// Test the function
console.log(isPrime(17)); // true
console.log(isPrime(24)); // false

CSS Example

Here's some CSS using modern features like custom properties and nesting:

css

.card {
  --card-padding: 1.5rem;

  padding: var(--card-padding);
  border-radius: 0.5rem;
  background: var(--color-surface);

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .card-title {
    font-size: var(--font-h3);
    margin-bottom: var(--space-s);
  }
}

YAML Example

And here's some YAML configuration, like what you'd find in Metalsmith frontmatter:

yaml

sections:
  - sectionType: hero
    containerTag: section
    containerFields:
      inContainer: false
      isAnimated: true
      background:
        isDark: true
        image: '/assets/images/hero.jpg'
    text:
      title: Welcome
      titleTag: h1

The syntax highlighting is powered by Shiki at build time. Shiki inlines every token color as a style attribute, so there is no theme stylesheet to load and no highlighting work in the browser.

Metalsmith 2025 Structured Content Starter

JavaScript Example

CSS Example

YAML Example

Marie Curie