CodesBeautify

HTML Code Tag Generator

Wrap a snippet in code and pre tags with every angle bracket already escaped.

HTMLblock code
<pre><code class="language-javascript">const total = items.reduce((sum, item) =&gt; sum + item.price, 0);</code></pre>
Runs locally in your browser

About the HTML Code Tag Generator

Showing code on a web page fails in one predictable way: the browser reads the snippet as markup. A line containing <div> disappears and becomes an empty element, and an unbalanced bracket can swallow the rest of the paragraph. The fix is to convert the three dangerous characters into entities before the snippet reaches the page, and this generator does that by default so you can paste raw code in and get safe markup out.

The two elements do different jobs. <code> marks a run of text as computer code and switches it to a monospace font, but it does not preserve whitespace, so a multi line snippet collapses onto one line. <pre> preserves line breaks and runs of spaces. That is why the standard pattern for a block is <pre><code>, with no space or newline between the two opening tags, because anything there shows up as a blank first line in the output.

The language class follows the convention that Prism, highlight.js and most other highlighters expect: language-javascript, language-css and so on. Adding it now means highlighting works later without touching the markup again. Turn escaping off only if your snippet is already escaped, otherwise you get double encoded entities on screen. For escaping a whole document rather than one snippet, use HTML Escape.

How to use

  1. Paste the snippet you want to display.
  2. Set the language class for your highlighter.
  3. Keep Wrap in pre on for a block, off for inline code.
  4. Copy the escaped markup.

Common questions

Why does my snippet vanish on the page?
The browser parsed it as markup. Angle brackets and ampersands must be entities, which this generator writes for you.
Do I need both pre and code?
For a multi line block, yes. code alone gives a monospace font but collapses your line breaks and indentation.
Why is there a blank first line in my code block?
A newline between the pre and code opening tags is preserved and rendered. Keep them adjacent, as the output here does.
Which language class should I use?
Whatever your highlighter expects, usually language- followed by the name, such as language-python or language-sql.