Question

源代码已使用换行符和空格格式化。

目标：

保持源格式，只要水平线适合屏幕（例如pre）
- 显示左侧与行对齐的行号（例如，在单独的列中包含行号的表）
- 当它们不适合屏幕时将线条分成多行（例如，可以使用白色空间：预包装）
- 从不合并空格或换行符（例如pre pre that）
- 对于中断的行显示多次行号或仅在顶部显示一次（例如，将行号对齐到顶部）
- 对于中断的行在结尾和/或开头显示小标记图像（例如，每行使用背景图像，但为此我需要将前元素分开）
- 允许用鼠标选择和复制/粘贴几行而不包括行号（例如，单个pre给出了这个，但是否则这似乎是不可能的）
- 从服务器端输出HTML和CSS，但最好不使用JavaScript

我无法支持上述所有观点，似乎不可能。我尝试使用div，table，pre以各种组合，使用white-space: pre-wrap等等，但没有运气拥有所有选项。

什么是简单的解决方案？

Answer 1

有序列表做得不错。 Opera不会用它复制行号，但我认为其他浏览器可能会这样做。

Answer 2

以下是我的试验，但这些都不符合我的要求：

<table>
  <tr>
    <td style="vertical-align: top;">
      <pre style="margin: 0px; -moz-user-select: none;"><img src="eol.png"/></pre>
    </td>
    <td style="background-image: url('eol.png'); background-position: right top; background-repeat: repeat-y;">
      <pre style="white-space: pre-wrap; margin: 0px;">This is a        long text         having weird whitespace content that has to be word wrapped even though</pre>
    </td>
  </tr>
  <tr>
    <td style="vertical-align: top;">
      <pre style="margin: 0px; -moz-user-select: none;"><img src="eol.png"/></pre>
    </td>
    <td>
      <pre style="white-space: pre-wrap; margin: 0px;">it is preformatted.</pre>
    </td>
  </tr>
</table>

<div>
  <div>
    <div>
      <pre style="float: left; margin: 0px;">1 </pre>
      <pre style="white-space: pre-wrap; margin: 0px;">This is a        long text         having weird whitespace content that has to be word wrapped even though</pre>
    </div>
    <div>
      <pre style="float: left; margin: 0px;">2 </pre>
      <pre style="white-space: pre-wrap; margin: 0px;">it is preformatted.</pre>
    </div>
  </div>
</div>

<pre style="white-space: pre-wrap">The Server runs under the Ubuntu Linux Server Edition (x86-64) operating system. Installing the Server under other versions of Ubuntu Linux (such as th     e Desktop Edition) should not be a problem.

在其他Linux发行版下安装服务器可能会有所不同，可能需要更多的手动调整，如此处所述。其他操作系统（如Windows，Mac OS X等）未经过测试，很可能无法开箱即用。

Answer 3

给它一个旋转。 Javascript code prettifier我知道你提到没有javascript，但除非你在服务器端做，否则我不确定你将如何避免它。你想用什么语言格式化？

Answer 4

使用highlight_string（）
按行分类/分解文本
使用<input type="text" value="# of line" disable>

类似的东西：

$file = highlight_string(file_get_contents("some_code.php"),true);
$file = explode("<br />",$file);

foreach ($file as $n=>&$line)
    $line = "<input type='text' disabled='disabled' value='$n' />".$line;

echo join("<br />",$file);

格式很好的源代码

4 个答案: