Demo: arrows across elements, pointing into code

 from Red Blob Games
1 Nov 2022

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

<button type="button">

  title="YouTube: Crab rave"


Youtube: Crab rave:

Choose lines to point to:

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

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

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).

Email me , or tweet @redblobgames, or comment: