About

Displaying code inside an HTML document without a syntax highlighting library requires manual table construction. Each line maps to a table row. Each row contains a line-number cell and a code cell. Getting this wrong means broken rendering: unescaped < characters destroy your DOM, tab indentation collapses into single spaces, and blank lines lose vertical rhythm. This tool escapes all HTML entities, converts every group of 4 consecutive spaces into a single tab-width indent, and assigns sequential numbers only to non-blank lines. The generated HTML includes a small toggle button so readers of your page can show or hide line numbers before copying your code.

The output is a single line of HTML. Paste it into any <div> or <section> element. No external CSS or JS dependencies are required - the table carries inline structure and the toggle script is self-contained. Note: this tool does not perform syntax highlighting. It handles structural formatting only. For documents with more than a few thousand lines, browser paste buffers may truncate the copied string.

Formulas

The conversion applies a deterministic pipeline to each line L_i of the input string:

L_i → normalize(\r\n → \n) → escapeHTML(&, <, >, ", ') → convertTabs(4 spaces → \t) → wrapRow(num, code)

Line numbering follows a conditional rule:

{

n = n + 1 if trim(L_i) ≠ ""n = "" if trim(L_i) = ""

Where n is the running counter of non-blank lines, escapeHTML replaces the 5 critical characters with their entity equivalents, and convertTabs uses the regex pattern /( {4})/g to replace each group of 4 spaces with a literal tab character \t. The final output table uses white-space: pre on code cells to preserve all whitespace faithfully.

Reference Data

Character	HTML Entity	Why It Must Be Escaped
&	&	Starts all HTML entities; unescaped ampersands cause parsing errors
<	<	Opens HTML tags; unescaped angle brackets create phantom elements
>	>	Closes HTML tags; mismatched brackets break document structure
"	"	Terminates attribute values prematurely inside quoted attributes
'	'	Terminates single-quoted attribute values in older parsers
Tab (\t)	N/A (preserved)	Rendered as single space by default; use CSS tab-size or white-space: pre
4 Spaces	Converted to tab	Consecutive spaces collapse in normal HTML flow without pre formatting
Leading whitespace	or pre	Normal flow ignores leading spaces; white-space: pre preserves them
Newline (\n)	<tr> boundary	Each newline becomes a new table row to maintain line structure
Empty line	Row with	Empty <td> elements collapse; non-breaking space preserves height
Carriage return (\r)	Stripped	Windows line endings (\r\n) produce double breaks if not normalized
/	Not escaped	Safe in HTML content; only dangerous inside <script> closing tags
` (backtick)	Not escaped	Safe in HTML; only meaningful in JS template literals
{ / }	Not escaped	Safe in HTML; only parsed by templating engines like Mustache or Angular

Frequently Asked Questions

Blank lines carry no executable or meaningful code content. Numbering them inflates the count and makes it harder for readers to reference specific lines in discussion. The convention follows most IDE gutters: only lines with content receive a number. The blank row is still rendered to preserve vertical spacing.

Existing tab characters are preserved as-is. The conversion only targets sequences of exactly 4 consecutive spaces at any position within a line. If your code uses 2-space indentation, those spaces remain unchanged. The regex /( {4})/g matches globally, so a line indented with 8 spaces becomes 2 tab characters.

The generated HTML includes a small inline <script> block immediately after the table. This script attaches a click handler to the toggle button that adds or removes a CSS class on the table element, which controls the visibility of the line-number column via display: none. It is self-contained and requires no external dependencies.

Most CMS editors in HTML/Text mode will accept the output directly. However, some visual editors (TinyMCE, Gutenberg) strip inline scripts or reformat table HTML. In those cases, use a Custom HTML block or a raw HTML widget. If the CMS strips the <script> tag, the table still renders correctly but the toggle button will not function.

The conversion runs synchronously in the browser. For inputs exceeding roughly 10,000 lines, you may observe a brief UI freeze during processing. The Clipboard API also has practical limits depending on the browser. Chrome handles up to several megabytes reliably. For very large files, consider splitting the code into logical sections.

Yes. The generated table uses a class js-code-table that you can target with your own CSS. The line-number cells use class ln and code cells use class cd. Override colors, font sizes, or padding by writing rules against these classes in your stylesheet.