search

11ty / eleventy-plugin-syntaxhighlight

A pack of Eleventy plugins for syntax highlighting in Markdown, Liquid, and Nunjucks templates.
https://www.11ty.dev/docs/plugins/syntaxhighlight/
MIT License
129 stars 32 forks source link

Added and removed lines get no special styling #64

Closed siimpragi closed 2 years ago

siimpragi commented 2 years ago

I ran the demo with a fenced code block that had some lines added and removed.

```js/4-5/2-3
let multilineString = `
  this is the first line
  this line is removed
  this line is also removed
  this line is added
  this line is also added
  this is the last line
`;


Those lines didn't seem to differentiate from "normal" lines. Here's a GIF:

![hl-lines](https://user-images.githubusercontent.com/8535926/145495687-6ed7f34a-8b82-441c-b3ea-a72f7dc76376.gif)

The generated markup is fine. It's just that [`test.css` hides the browser's default styles](https://github.com/11ty/eleventy-plugin-syntaxhighlight/blob/d557caf36a608640b5e029dc1feb1d81a27e0b63/demo/test.css#L5) for `<ins>`, and `<del>`.

Could the stylesheet perhaps be changed so that we give appropriate `background-color`-s to `.highlight-line-*` similarly to how [eleventy-base-blog does it](https://github.com/11ty/eleventy-base-blog/blob/963b5d46e6437e829a4f2463cbc32f9f6deb157a/css/index.css#L83-L92)? 

If OK, would you be open to a PR?
zachleat commented 2 years ago

Good idea! (I made these changes to test.css! thank you)