Use the <ins> and <del> elements in Codeblocks

[ryceg]

Link to the Page

https://skeleton.brainandbonesllc.com/guides/tailwind

Describe the Issue

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins is a native html element that provides more semantic information.

This would involve a little bit of preprocessing before highlight.js takes over.

Are you able to create a Pull Request with the fix?

Yes

[endigo9740]

@ryceg this is a neat idea, but not something I think may be possible when Highlight.js is enabled. Take a look at the markup for a code block processed by Highlight:

The del and ins tags are no longer whole tags. They're split up into spans and smaller chunks so CSS styles can be applied selectively. I'm not aware of any syntax highlighter where you could make exceptions for certain tags either.

However, I do see the value of these tags. Perhaps examples can be setup outside of code blocks, since nothing on MDN seems to indicate these must strictly be used within pre or code elements. I've gone ahead and pushed a small update to the dev branch including the following addition to the typography.css stylesheet and docs:

If you think this will suffice then feel free to close out the ticket please!

[ryceg]

Yeah, I'm a little surprised that highlight js doesn't have some form of support for this sort of use pattern. Short of passing in each insert and delete individually, I think that it's likely too much work to figure out a cleaner way of getting it to work.

Adding some styling for those that want to use the element is a decent fix.