Paste a snippet, pick the language, and copy HTML where every keyword, string and comment carries its color as an inline style attribute. The block looks the same in a Gmail draft, a WordPress post, a Confluence page or a plain .html file, because nothing in the output points at a CSS file you would have to ship alongside.
Nothing highlighted yet. Paste code on the left or load the sample.
Most online highlighters hand you a <pre> full of class="token keyword" spans and leave you to hunt down the matching Prism or highlight.js stylesheet. Without the stylesheet, the block renders as plain black text. In inline mode this page resolves every class to its computed color first, then writes the result on the span itself. A three line input comes back roughly like this:
<pre style="background:#2d2d2d;color:#cccccc;font-family:Consolas,Menlo,monospace;font-size:14px;line-height:1.5;padding:16px;border-radius:8px;overflow:auto;white-space:pre"><code><span style="color:#cc99cd">const</span> url <span style="color:#67cdcc">=</span> <span style="color:#7ec699">'https://api.toolexe.com/v1/tools'</span>;
<span style="color:#999999">// fetched once per page load</span>
<span style="color:#cc99cd">const</span> res <span style="color:#67cdcc">=</span> <span style="color:#cc99cd">await</span> <span style="color:#f08d49">fetch</span>(url);</code></pre>Only properties the theme sets on a token get written. A span whose color matches its parent gets no color at all, and plain punctuation stays outside any span. The Tomorrow Night sample above weighs about 580 bytes for three lines of 107 characters. Expect roughly 4 to 6 times the size of the raw source for typical code, which is fine for a blog post and a bad idea for a 2,000 line dump. Switch to Prism classes for anything long, then load one 2 KB theme file once.
<style> blocks and ignore linked CSS. Inline attributes survive. The Copy rich text button puts a formatted clipboard entry in place, so a paste into a Gmail compose window keeps the colors without you touching HTML.style="color:#cc99cd" on every keyword, and you keep the option to swap themes later by changing one link.prefers-color-scheme media query in your theme CSS.Language detection on short snippets guesses wrong often enough to be worse than a dropdown. Twenty lines of PHP inside an HTML template score as HTML, a SQL query wrapped in a Python string scores as Python, and a JSON object is valid JavaScript, so a detector cannot tell them apart and picks whichever grammar loaded first. A wrong grammar does not error out. The block still highlights, with the wrong tokens colored, which is harder to spot than no color at all. Pick the language yourself. Two cases deserve care:
<?php ... ?> blocks and the surrounding tags both highlight. Choose PHP for a full template file, not HTML.| Theme | Background | Base text | Fits |
|---|---|---|---|
| Light (Prism default) | #f5f2f0 | #000 | Print, PDF export, white page backgrounds. Comments sit at #708090, which passes contrast checks on the warm grey. |
| Tomorrow Night | #2d2d2d | #ccc | Blog posts on dark or light pages. The most neutral dark option. Strings are green, keywords purple. |
| Okaidia | #272822 | #f8f8f2 | Monokai lookalike. Highest saturation of the five. Works in slides, tires the eyes in long docs. |
| Twilight | #141414 | #fff | Near-black. Good on OLED and in email clients with a dark compose surface. Weakest contrast on operators. |
| Solarized Light | #fdf6e3 | #657b83 | Cream background for long tutorials. Base text is deliberately low contrast, so avoid this one for accessibility-audited pages. |
Every theme also changes the editor on the left, so what you see while typing matches the copied result. The theme file loads from cdnjs on first selection and is cached after, so the first switch to a new theme takes a moment on a slow connection.
Prism's own line number plugin draws numbers with CSS counter-increment rules, which do not survive a paste into email or a rich text editor. The line numbers here are real characters, each in a grey span with user-select:none so a reader selecting the code does not drag the numbers along. Two side effects follow. The numbers become part of the copied HTML, adding around 90 bytes per line, and a screen reader will announce them unless the reader honors the aria-hidden attribute on each gutter span. Leave line numbers off for snippets under ten lines. They earn their place once you reference "line 14" in the prose around the block.
<pre> uses white-space:pre and overflow:auto, so long lines scroll sideways. Change it to pre-wrap in the HTML tab if you want wrapping, and expect indentation to look odd on wrapped lines.style attributes converted to JSX objects, so use a fenced code block there instead.Yes, in inline mode. Every color, font weight and italic the theme applies is written as a style attribute on the span, and the outer pre carries its own background, padding and font stack. Prism classes mode is the opposite: the spans carry class names only and need a Prism theme stylesheet on the destination page.
Because the theme gives them the same color as the surrounding text. Writing color:#ccc on a span inside a block already colored #ccc adds bytes and changes nothing, so the tool skips it. Punctuation in most themes falls into this group.
Open the HTML tab and edit the style attribute on the opening pre tag. Font size, line height, padding, border radius and background all live there in one place. Token spans only carry color and weight, so a change on the pre cascades to the whole block.
Copy HTML puts the markup on the clipboard as plain text, for pasting into a code or HTML field. Copy rich text writes both a text/html and a text/plain entry, so a paste into Gmail, Google Docs, Outlook or Word arrives already formatted. Firefox versions before 127 fall back to the plain HTML copy.
No. Highlighting runs entirely in the browser with Prism. Nothing is posted to toolexe.com or any third party, which also means there is no history and no share link. Refreshing the page clears the editor.
Prism tokenizes with regular expressions, not a real parser. Nested generics, template literals containing backticks, and JSX spread props are the usual trouble spots. The output is still valid HTML, only the color assignment on those few tokens is off. Adjust the span color by hand in the HTML tab if the snippet is short.
