Syntax Highlighting

Onze supports syntax highlighting out of the box using Prism.js. Just specify the language after the opening triple backticks.

JavaScript

function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

const result = fibonacci(10);
console.log(`Fibonacci(10) = ${result}`);

HTML

<nav class="sidebar-nav">
  <a class="sidebar-nav-item active" href="/">Home</a>
  <a class="sidebar-nav-item" href="/about/">About</a>
</nav>

CSS

.post-title {
  margin-bottom: 0.25rem;
  font-size: 2rem;
  color: #313131;
}

@media (prefers-color-scheme: dark) {
  .post-title {
    color: #e6edf3;
  }
}

Bash

git clone https://github.com/maicoqb/eleventy-template-onze.git my-blog
cd my-blog
npm install
npm run dev

JSON

{
  "title": "Onze",
  "tagline": "A minimal Eleventy blog template",
  "darkMode": true,
  "theme": ""
}