anki icon indicating copy to clipboard operation
anki copied to clipboard

Mark highlighted code?

Open badlydrawnrob opened this issue 1 year ago • 2 comments

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!

Screenshot 2024-01-29 at 21 26 16

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.

Screenshot 2024-01-29 at 21 23 13

badlydrawnrob avatar Jan 29 '24 21:01 badlydrawnrob

viewSizeChooser

Screenshot 2024-01-31 at 22 20 02

badlydrawnrob avatar Jan 31 '24 22:01 badlydrawnrob

Screenshot 2024-02-01 at 18 50 32

badlydrawnrob avatar Feb 01 '24 18:02 badlydrawnrob