使用HTML和CSS显示EBNF语法

使用HTML和CSS显示EBNF（或类似EBNF）语法的好方法是什么？我不想使用代码标签。我希望能够显示对齐的内容（即定义符号“

=

”和替换符号“

|

”，以及备注）

下面是一个语法示例，我只想显示为简单的纯文本：

<expression> = <integral>        
             | <variable>     (only variables of type Integer are allowed)
  <integral> = <digit>+
  <variable> = x | y | …      (any lower case latin letter)
…

=
|（仅允许整数类型的变量）
= +
=x | y |……（任何小写拉丁字母）
…

---

像

=+

'这样的定义中的间距应该是“像往常一样”，也就是说，不会因为对齐定义符号的某种方式而受到影响（例如，使用表格时就会出现这种情况）。

我所看到的每一个EBNF语法实例都是使用固定宽度字体，主要使用一个元素排版的。我没有看到它有任何其他的设置方式。@谢谢，你手头有一个例子吗？通常html标记是用（大于）和（小于）符号写在html文档中的。我认为其他EBNF符号是标准支持的，因此您无需告诉浏览器如何读取它们。您也可以在Nodepad++中使用EBNF语法高亮显示查看我在github上的研究：并下载此高亮显示：