11ty/eleventy-plugin-syntaxhighlight

Diff Highlights

peterjcaulfield opened this issue · 1 comments

The eleventy docs site for this plugin includes the following css snippets:

.highlight-line-add {
  background-color: #45844b;
}
.highlight-line-remove {
  background-color: #902f2f;
}

Is diff highlighting supported? If so, what is the syntax? I tried:

```language-diff-typescript
- const foo = 'test';
+ const bar = 'test';
```

and the highlight classes are not applied 🤔

Nevermind I figured this out by reading the source. I had expected the syntax to match the browser based approach but the approach in this plugin is much more elegant!

You can just do:

```typescript/1/0
const foo = 'test';
const bar = 'test';
```

This will produce a diff showing the first line deleted and the second line added whilst maintaining syntax highlighting of the language in addition to applying the remove/add highlight classes.