Demo: arrows across elements, pointing into code

1 Nov 2022

Christian Tietze asks about drawing arrows^[1] and I thought I should try implementing that diagram here.

<button type="button">
  Save
</button>

<iframe>
  title="YouTube: Crab rave"
  src="...">
</iframe>

Save

Youtube: Crab rave:

Choose lines to point to:

<p>
  <svg data-line="2" data-side="left" />Save
</p>

<p>
  Youtube: Crab rave:<svg data-line="6" data-side="right"/>
</p>

Idea: surround each line with a <span>, then have an arrow point to the left or right side of the span. The code is unfortunately not general, but it does draw the arrows programmatically. Tricky: syntax highlighting turns the text into html, with spans etc. I’m modifying that html to add more spans. Todo: the layout for the right arrow needs be improved for short lines.

See source (quick & dirty prototype code).

Endnotes