Obsidian Diff Block

Renders unified diffs in reading view. Write two versions of text separated by --- and get red/green highlighting, like GitHub.

Usage

```diff-block
The cat sat on the mat
This is the old version
Unchanged line
---
The cat sits on the mat
This is the new version
Unchanged line
```

Reading view output:

- The cat sat on the mat
+ The cat sits on the mat
- This is the old version
+ This is the new version
  Unchanged line

Removed lines are red, added lines are green, unchanged lines are neutral.

Syntax highlighting

Put a language name on the first line:

```diff-block
javascript
function greet(name) {
  return "Hello " + name;
}
---
function greet(name) {
  return `Hello ${name}!`;
}
```

Supported languages: javascript, typescript, python, css, html, json, bash, sql, rust, java, cpp, go.

Install

1. Build (see below) or download a release
2. Copy main.js, manifest.json, styles.css to <vault>/.obsidian/plugins/obsidian-diff-block/
3. Obsidian: Settings > Community plugins > enable Diff Block

Right-click in the editor and select Insert diff block to insert a template at the cursor.

Development

npm install
npm run dev      # watch mode
npm run build    # production build

Requires Node.js 16+.