Showing Code Changes with Diff2Html

The code_diff: true flag loads Diff2Html, which renders unified diff text as coloured, syntax-highlighted side-by-side or line-by-line comparison blocks.

Inline Diff — Refactoring a Physics Simulation

Before and after refactoring a Euler integration step into a proper RK4 solver:

Side-by-Side Diff — TypeScript Refactor

Migrating from callback-based to async/await in a data fetcher:

Multi-File Diff — A Small Pull Request

Three files changed in one diff block:

Usage

---
title: My Post
code_diff: true
---

Create a container <div id="myDiff"> and use the self-polling pattern:

(function poll() {
  if (typeof Diff2HtmlUI === 'undefined') { setTimeout(poll, 50); return; }
  const ui = new Diff2HtmlUI(document.getElementById('myDiff'), unifiedDiffString, {
    outputFormat: 'side-by-side',   // or 'line-by-line'
    drawFileList: true,
    matching: 'lines',
    highlight: true,
  });
  ui.draw();
})();

The unifiedDiffString is standard diff -u / git diff output. Generate it with git diff HEAD~1 -- path/to/file and paste it directly into your post.