title: Accessible HTML structure for syntax highlighter
body: <p>I'm fixing an old WordPress syntax highlighter plugin (the plugin owner abandoned it), and while fixing the PHP errors was easy, while I'm fixing it, I might as well improve accessibility as well.</p>
  <p>My question is regarding the HTML structure for the code. I want to show the number on one side and the code next to it:</p>
  <p><a href="https://i.stack.imgur.com/C214X.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C214X.png" alt="enter image description here" /></a></p>
  <p>I figured the HTML would be something like this:</p>
  <pre><code>&lt;section&gt; &lt;!-- Maybe article? --&gt;
      &lt;header&gt;
          &lt;h1&gt;Sample HTML&lt;/h1&gt; &lt;!-- Maybe &lt;h3&gt; would fit my blog posts best --&gt;
          &lt;div role=&quot;toolbar&quot;&gt;toolabar buttons here&lt;/div&gt;
      &lt;/header&gt;
      &lt;ol&gt;
          &lt;li&gt;&lt;span class=&quot;sh-r &quot;&gt;&amp;lt;div &lt;/span&gt;&lt;span class=&quot;sh-e &quot;&gt;class&lt;/span&gt;=&lt;span class=&quot;sh-s &quot;&gt;&quot;grid&quot;&lt;/span&gt;&lt;span class=&quot;sh-r &quot;&gt;&amp;gt;&lt;/span&gt;
          ...
      &lt;/ol&gt;
  &lt;/section&gt;
  </code></pre>
  <p>But I'm not sure. Should the code be in an <code>&lt;ol&gt;</code> or a <code>&lt;table&gt;</code>? Are the spans for changing the color ok? Is the toolbar role appropriate? Am I missing something? If anyone has an example of an accessible code highlighter, I'd love to see it.</p>
  <p>The way it is right now, it's a table with all numbers in one <code>&lt;td&gt;</code> and all the code in another!</p>