In the world of tech blogging, static site generators like Jekyll reign supreme—until they don't. For one developer, the constant battles with outdated Ruby environments and bloated dependencies for a simple templating task became unbearable. As detailed in their personal blog, the solution wasn't another npm package or a shiny new framework. Instead, it was a dive into the raw, unglamorous world of the C preprocessor (cpp), turning a tool designed for compiling code into an engine for generating HTML. This journey, equal parts ingenious and absurd, highlights a broader truth: sometimes, the best tech solutions come from repurposing the familiar in unexpected ways.

The Macro Madness: Trading Ruby for cpp

The author's initial setup with Jekyll felt like overkill—using a "whole language runtime and packaging system" just to wrap posts in header and footer HTML. Fed up with installation woes, they pivoted to GNU cpp (/usr/bin/cpp), leveraging their daily C++ expertise. But the C preprocessor isn't meant for HTML. Key challenges included suppressing predefined macros that could corrupt text (e.g., linux expanding to 1), addressed with flags like -undef and -dM to undefine pesky identifiers. A simple #include "header.html" became the foundation, allowing basic templating without external dependencies. As the blog wryly notes, "It's a mess and I love it"—celebrating the joy of a "homebrew system hacked together out of wildly inappropriate tools."

# Example of the preprocessing command used
cpp -undef -P -I. input.md > output.html

"An entire ecosystem of code to paste three strings together. I just needed a simple macro language, and as luck would have it, I already knew one."

SVG to the Rescue: Fixing Mobile Code Disasters

But the innovation didn’t stop there. The author confronted another ubiquitous web dev headache: code snippets that render poorly on mobile. Traditional <pre> tags often force horizontal scrolling or shrink text into illegibility. Their stopgap—screenshots of IDE code—solved scaling but sacrificed accessibility, copyability, and SEO. Inspired by a Lobste.rs discussion, they adopted SVG with embedded text. Using highlight.js for syntax highlighting, they transformed HTML spans into SVG <tspan> elements, dynamically adjusting font size via CSS to fit the viewport width. This preserved readability without compromising text selection (mostly—line breaks required workarounds like dy attributes and a custom copy button).

<!-- Simplified SVG snippet approach -->
<svg viewBox="0 0 800 200" preserveAspectRatio="xMinYMin meet">
  <text>
    <tspan x="0" dy="1.2em">#include "header.html"</tspan>
  </text>
</svg>

Why This Matters: A Lesson in Developer Pragmatism

Beyond the technical novelty, this approach underscores a critical ethos in modern development: questioning bloat and embracing simplicity. In an era of ever-expanding toolchains, the author’s macro hack and SVG tweak demonstrate how underused native tools can outshine complex frameworks for specific tasks. For developers, it’s a reminder that innovation often lies in reimagining the old—whether avoiding dependency quagmires or enhancing UX with web standards. As lightweight, accessible solutions gain urgency amid rising web complexity, this blog’s evolution from Jekyll frustration to cpp-SVG synergy offers a refreshing blueprint for reclaiming control, one preprocessor directive at a time.