Mark highlighted code?

[badlydrawnrob]

Work in progress

A demo here
Some filters only seem to work on images:
i.e: filter: grayscale(20%)

• Optionally add class to blur everything but the Keypoint note on Simple reverse card
• Optionally highlight a line (or lines) of code
• Optionally blur out everything but the answer line

Current problems

• A particular line of code that's the answer isn't immediately obvious
  • Blur out every <span> except the one we want made obvious?

An example to work towards?

An example like this one would be a great candidate
It's not immediately clear which line I'm talking about.
(a) .numberLines (b) highlight line

This guy has done some fancy stuff with highlighting lines of code that might be useful someday in the future. If anyone wants to try stuff like this out (with css, not javascript), feel free to have a go!

Adding <mark> to highlight a line (or many lines)

Adding a <mark> tag is pretty easy.
Making sure it's edge-to-edge of the code block isn't.

[badlydrawnrob]

viewSizeChooser

[badlydrawnrob]