Nicely formatted source code

Question

The source code is already formatted using newline characters and whitespace.

Goals:

1. keep source formatting as long as lines fit in the screen horizontally (e.g. pre)
   • show line numbers on the left side aligned with the lines (e.g. a table with line numbers in a separate column)
   • break lines into multiple lines when they do not fit in the screen (e.g. doable with white-space: pre-wrap)
   • never merge whitespace or newline characters (e.g. pre does that)
   • for lines that break either show the line number multiple times or just once at the top (e.g. align the line numbers top)
   • for lines that break show a small marker image at the end and/or at the beginning (e.g. use background image per line, but for that I need to make the pre elements separate)
   • allow selecting and copy/pasting a couple of lines with the mouse without including the line numbers (e.g. a single pre gives this, but otherwise this seems to be impossible)
   • outputting HTML and CSS from the server-side, but preferrably without JavaScript

I can't make it supporting all the above points, seems like it's impossible. I tried using div, table, pre in various combinations, with white-space: pre-wrap and so on, but had no luck having all the options.

What's a simple solution?

Answer 1

An ordered list does a decent job. Opera doesn't copy the line numbers with it, but I think other browsers might do.

Answer 2

Here are my trials, but none of this does what I want:

<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. 

Installing the Server under other Linux distributions may be different and may need more hand tuning th an what is described here. Other operating systems such as Windows, Mac OS X, etc. are not tested and most likely will not work out of the box.

Answer 3

Give this a whirl. Javascript code prettifier I know you mentioned no javascript, but unless you do it server side, I'm not sure how you are going to avoid it. What language are you trying to format?

Answer 4

1. Give style to the code using highlight_string()
2. Explode / break the text by line
3. Add the number of line at the start of each line using <input type="text" value="# of line" disable>

Something like:

$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);