Displaying an EBNF grammar using HTML and CSS
<p>What would be a good way to display an EBNF (or EBNF-like) grammar using HTML and CSS? I do not want to use the code tag. I want be able to display stuff aligned (viz. definition symbols ‘<code>=</code>’ with alternation symbols ‘<code>|</code>’, but also remarks).</p>

<p>Here’s an example of a grammar I want to display, only as a simple plain text:</p>

<pre><code>&lt;expression&gt; = &lt;integral&gt;        
             | &lt;variable&gt;     (only variables of type Integer are allowed)
  &lt;integral&gt; = &lt;digit&gt;+
  &lt;variable&gt; = x | y | …      (any lower case latin letter)
…
</code></pre>

<p>The spacing within definitions like <code>&lt;integral&gt; = &lt;digit&gt;+</code>’ should be “as usual”, i.e. not compromised by some way of aligning the definition symbols (as would be the case when using tabulars for example).</p>