| Copybara | 854996b | 2021-09-07 19:36:02 +0000 | [diff] [blame] | 1 | [# Safely display user-content text, such a program source code, with |
| 2 | line numbers. |
| 3 | |
| 4 | Other EZT variables used: |
| 5 | file_lines: List of lines in the file, each with a line number and content. |
| 6 | should_prettify: whether the text should be syntax highlighted. |
| 7 | prettify_class: additional CSS class used to tell prettify.js how to |
| 8 | best syntax highlight this source file. |
| 9 | ] |
| 10 | |
| 11 | [# Display the line numbers and source lines in separate columns. |
| 12 | See corresponding comments L1, L2, L3 and S1, S2, S3 below. |
| 13 | This is messy because the pre tags have significant whitespace, so we |
| 14 | break lines inside the tags themslves to make our templates readable.] |
| 15 | <table class="opened"><tr> |
| 16 | <td id="nums"> |
| 17 | [# L1. Start with a nocursor row at the top to space the line numbers down the |
| 18 | same amount as the source code lines w/ their initial cursor_hidden row.] |
| 19 | <pre><table width="100%"><tr class="nocursor"><td></td></tr></table></pre> |
| 20 | |
| 21 | [# L2. Display each line number in a row that we can refer |
| 22 | to by ID, and make each line number a self-link w/ anchor.] |
| 23 | <pre><table width="100%" id="nums_table_0">[for file_lines]<tr id="gr_[file_lines.num]" |
| 24 | ><td id="[file_lines.num]"><a href="#[file_lines.num]">[file_lines.num]</a></td></tr |
| 25 | >[end]</table></pre> |
| 26 | |
| 27 | [# L3. Finish the line numbers column with another nocursor row to match |
| 28 | the spacing of the source code column's final cursor_hidden row.] |
| 29 | <pre><table width="100%"><tr class="nocursor"><td></td></tr></table></pre> |
| 30 | </td> |
| 31 | <td id="lines"> |
| 32 | |
| 33 | [# S1. Start the source code column with a cursor row. ] |
| 34 | <pre><table width="100%"><tr class="cursor_stop cursor_hidden"><td></td></tr></table></pre> |
| 35 | |
| 36 | [# S2. Display each source code line in a table row and cell |
| 37 | that we can identify by id.] |
| 38 | <pre [if-any should_prettify]class="prettyprint [prettify_class]"[end]><table id="src_table_0">[for file_lines]<tr |
| 39 | id=sl_[file_lines.num] |
| 40 | ><td class="source">[file_lines.line]<br></td></tr |
| 41 | >[end]</table></pre> |
| 42 | |
| 43 | [# S3. Finish the line numbers column with another cursor stop.] |
| 44 | <pre><table width="100%"><tr class="cursor_stop cursor_hidden"><td></td></tr></table></pre> |
| 45 | </td> |
| 46 | </tr></table> |