如何在HTML中的代码列表中对齐代码？

发布于 2025-01-21 04:45:27 字数 3113 浏览 2 评论 0原文

我想在HTML中使用一个带有对齐方式的代码列表。这是应该看起来的一个示例：

，“方法”和“参数”是对齐的，并且以结肠开头的符号列是对齐的。从“ url”到“：读取器”等的距离应该是一个文本空间。第二行开头的两个括号之间的距离应该为零，但是一个文本空间是可以接受的。

我如何在HTML中拥有它？这是我的想法：

表似乎很明显，但是如果使用它们会嵌套和内联，则很难阅读HTML代码。
自定义的塔巴斯托普可以解决它，但我不知道HTML会有这样的东西。 HTML是否具有自定义的TABSTOP，我可以在文本中标记一个位置，并且与之关联的所有选项卡将水平扩展到该标记？它就像Word或类似的文本处理器中的TabStops一样，但是根据文本计算的TabStop位置，而不是手动放置。可以以某种方式将其入侵，例如将一个虚拟元素放置在对齐点上，并且对齐方式将使用带有某些JavaScript计算的宽度的元素作为该元素的坐标x和虚拟元素的差异来完成。。
代码为比例字体，因此与空格的对齐不可行。

我试图用桌子做。以下片段是我能做的最好的。该代码很丑陋，第二行上括号的垂直对准也关闭了。

body {
  font-family: sans-serif;
}
pre {
  font-family: sans-serif;
  display: inline;
}
table {
  display: inline-table;
}
td {
  vertical-align: top;
}
.indent {
  width: 1.5em; display: inline-block;
}

<!doctype html><html>
<body>
  (defclass request ()<br>
    <span class="indent"></span><table><tr><td>(</td><td><table><tr><td>(url</td><td>:reader request-url</td></tr>
          <tr><td></td><td>:initarg :url</td></tr>
          <tr><td></td><td>:type string</td></tr>
          <tr><td></td><td>:documentation "<pre>Request URL.</pre>")</td></tr></table></td>
        <tr><td></td><td><table><tr><td>(method</td><td>:reader request-method</td></tr>
          <tr><td></td><td>:initarg :method</td></tr>
          <tr><td></td><td>:initform :get</td></tr>
          <tr><td></td><td>:type keyword</td></tr>
          <tr><td></td><td>:documentation "<pre>Request method, e.g :get, :post.</pre>")</td></tr></table></td></tr>
        <tr><td></td><td><table><tr><td>(parameters</td><td>:reader request-parameters</td></tr>
          <tr><td></td><td>:initarg :parameters</td></tr>
          <tr><td></td><td>:initform nil</td></tr>
          <tr><td></td><td>:type association-list</td></tr>
          <tr><td></td><td>:documentation "<pre>The request parameters, as an association list.</pre>"))</td></tr></table></td></tr>
    </table><br>
    <span class="indent"></span>(:documentation "<pre>A general HTTP request.</pre>"))
</body>
</html>

哪种解决方案最可行？我错过了一个更清洁的解决方案吗？

原文

I would like to have a code listing with alignment in HTML. This is an example of how it is supposed to look:

In this example, the beginning of the second line is aligned with the beginning of the last line, the parentheses before “url”, “method” and “parameters” are aligned, and the columns of symbols starting with colons are aligned. The distance from “url” to “:reader” and the like is supposed to be one text space. The distance between the two parentheses at the beginning of the second line is supposed to be zero, but one text space is acceptable.

How can I have that in HTML? Here are my ideas:

Tables seem obvious here, but the HTML code would be hard to read if they were used because they would be nested and inline.
Custom tabstops would solve it, but I don't know that HTML would have such thing. Does HTML have custom tabstops, that I can mark a position in the text, and all tabs associated with it would horizontally extend to that mark? It would be like tabstops in Word or a similar text processor, but with the tabstop positions calculated based on the text, not manually placed. This could be hacked somehow, like that a dummy element would be placed at the point of alignment, and the alignment would be done with an element with the width calculated by some Javascript as the difference in the coordinates X of that element and the dummy element.
The code is in a proportional typeface, so alignment with spaces isn't viable.

I tried to do it with tables. The following snippet is the best that I could do. The code is ugly and the vertical alignment of the parenthesis on the second line is off.

body {
  font-family: sans-serif;
}
pre {
  font-family: sans-serif;
  display: inline;
}
table {
  display: inline-table;
}
td {
  vertical-align: top;
}
.indent {
  width: 1.5em; display: inline-block;
}

<!doctype html><html>
<body>
  (defclass request ()<br>
    <span class="indent"></span><table><tr><td>(</td><td><table><tr><td>(url</td><td>:reader request-url</td></tr>
          <tr><td></td><td>:initarg :url</td></tr>
          <tr><td></td><td>:type string</td></tr>
          <tr><td></td><td>:documentation "<pre>Request URL.</pre>")</td></tr></table></td>
        <tr><td></td><td><table><tr><td>(method</td><td>:reader request-method</td></tr>
          <tr><td></td><td>:initarg :method</td></tr>
          <tr><td></td><td>:initform :get</td></tr>
          <tr><td></td><td>:type keyword</td></tr>
          <tr><td></td><td>:documentation "<pre>Request method, e.g :get, :post.</pre>")</td></tr></table></td></tr>
        <tr><td></td><td><table><tr><td>(parameters</td><td>:reader request-parameters</td></tr>
          <tr><td></td><td>:initarg :parameters</td></tr>
          <tr><td></td><td>:initform nil</td></tr>
          <tr><td></td><td>:type association-list</td></tr>
          <tr><td></td><td>:documentation "<pre>The request parameters, as an association list.</pre>"))</td></tr></table></td></tr>
    </table><br>
    <span class="indent"></span>(:documentation "<pre>A general HTTP request.</pre>"))
</body>
</html>

Which solution is the most viable? is there a cleaner solution that I missed?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

辞别 2025-01-28 04:45:27

我在问题中实现了自定义Tabstops（第二个想法）。

HTML代码具有标记对齐锚的标签（＆lt; Align-ander＆gt;）。然后，它具有具有ID作为属性adnakor（＆lt; align-＆gt;）的元素标签。它们应该用给定的ID扩展到元素的左边界。 ID可以是任何元素，但是我仅使用＆lt; align-ander＆gt;才能清楚。还有＆lt; indent-＆gt;;他们应该从线条开头缩进文本，并且具有固定的宽度。

有关如何使其更好的问题：

如何获得自定义自定义的HTML标签？上一段中描述的所有标签都是空的，因此它们不需要关闭标签，并且没有将其更干净。

怎么能这样做以使代码首先对齐然后显示？如果我加载页面，则代码不会在短时间内对齐，然后对齐。我希望一旦显示代码就可以对齐。

代码

function main() {
  let tabs = document.getElementsByTagName("align-");
  for (let tab of tabs) {
    let x = tab.offsetLeft;
    let tabstop = document.getElementById(tab.getAttribute("anchor"));
    let tabstopX = tabstop.offsetLeft;
    let width = tabstopX - x;
    tab.style.width = `${width}px`;
  }
}

window.onload = main

code-block {
  white-space: pre-line;
  font-family: sans-serif;
}
pre {
  font-family: sans-serif;
}
code-block pre {
  display: inline;
}
indent- {
  display: inline-block;
  width: 1.5em;
}
align- {
  display: inline-block;
}

<!doctype html>
<html>
<body>
  <code-block>
    (defclass request ()
      <indent-></indent->(<align-anchor id=1></align-anchor>(url <align-anchor id=2></align-anchor>:reader request-url
          <align- anchor=2></align->:initarg :url
          <align- anchor=2></align->:type string
          <align- anchor=2></align->:documentation "<pre>Request URL.</pre>")
        <align- anchor=1></align->(method <align-anchor id=3></align-anchor>:reader request-method
          <align- anchor=3></align->:initarg :method
          <align- anchor=3></align->:initform :get
          <align- anchor=3></align->:type keyword
          <align- anchor=3></align->:documentation "<pre>Request method, e.g :get, :post.</pre>")
        <align- anchor=1></align->(parameters <align-anchor id=4></align-anchor>:reader request-parameters
          <align- anchor=4></align->:initarg :parameters
          <align- anchor=4></align->:initform nil
          <align- anchor=4></align->:type association-list
          <align- anchor=4></align->:documentation "<pre>The request parameters, as an association list.</pre>"))
      <indent-></indent->(:documentation "<pre>A general HTTP request.</pre>"))
  </code-block>
</body>
</html>

I implemented custom tabstops (the second idea) how I described it in the question.

The HTML code has tags marking alignment anchors (<align-anchor>). Then, it has tags for elements having an id as the attribute anchor (<align->); they are supposed to extend to the left border of the element with the given id. The id could be of any element, but I use only <align-anchor> for clarity. There are also <indent->; they are supposed to indent text from the beginning of the line, and they have a fixed width.

Questions about how to make this better:

How can I have custom self-closing HTML tags? all tags described in the previous paragraph are empty, so they don't need a closing tag, and not having it would make it much cleaner.

How can it be done so that the code is aligned first and then displayed? If I load the page, the code is not aligned for a short time, and then gets aligned. I'd like the code to be aligned as soon as it's displayed.

The code

function main() {
  let tabs = document.getElementsByTagName("align-");
  for (let tab of tabs) {
    let x = tab.offsetLeft;
    let tabstop = document.getElementById(tab.getAttribute("anchor"));
    let tabstopX = tabstop.offsetLeft;
    let width = tabstopX - x;
    tab.style.width = `${width}px`;
  }
}

window.onload = main

code-block {
  white-space: pre-line;
  font-family: sans-serif;
}
pre {
  font-family: sans-serif;
}
code-block pre {
  display: inline;
}
indent- {
  display: inline-block;
  width: 1.5em;
}
align- {
  display: inline-block;
}

<!doctype html>
<html>
<body>
  <code-block>
    (defclass request ()
      <indent-></indent->(<align-anchor id=1></align-anchor>(url <align-anchor id=2></align-anchor>:reader request-url
          <align- anchor=2></align->:initarg :url
          <align- anchor=2></align->:type string
          <align- anchor=2></align->:documentation "<pre>Request URL.</pre>")
        <align- anchor=1></align->(method <align-anchor id=3></align-anchor>:reader request-method
          <align- anchor=3></align->:initarg :method
          <align- anchor=3></align->:initform :get
          <align- anchor=3></align->:type keyword
          <align- anchor=3></align->:documentation "<pre>Request method, e.g :get, :post.</pre>")
        <align- anchor=1></align->(parameters <align-anchor id=4></align-anchor>:reader request-parameters
          <align- anchor=4></align->:initarg :parameters
          <align- anchor=4></align->:initform nil
          <align- anchor=4></align->:type association-list
          <align- anchor=4></align->:documentation "<pre>The request parameters, as an association list.</pre>"))
      <indent-></indent->(:documentation "<pre>A general HTTP request.</pre>"))
  </code-block>
</body>
</html>

回复收藏 0 原文

~没有更多了~