What Syntax Highlighter helps you do
Highlight source code in one of ten supported languages, producing a colored rendering and copyable HTML. It is useful for code samples in documents, slides or a static page. The highlighter is Prism, loaded from a public CDN together with the grammar for the language you pick.
Highlighting runs in your browser. Your code is not sent to Haivix, though the highlighter library is loaded from a public CDN.
How it works
These tools transform text locally: they parse, format, encode or render a string in your browser. Nothing you paste is uploaded to Haivix, but some tools load a library from a public CDN, so the page needs a network connection and your browser makes that request. The transformations operate on syntax, not meaning: a formatter can make invalid code look tidy, an encoder can hide a value without protecting it, and a preview can render markup that was never meant to execute. Outputs are exact strings, which means line endings, byte order marks and character encoding all matter when you paste the result somewhere else.
How to use Syntax Highlighter
- Paste the code and choose its language.
- Generate the highlighted output.
- Check that strings and comments are colored as expected.
- Copy the highlighted HTML for your page.
When to use it
- Prepare a code sample for a document or blog post.
- Make a snippet readable for a review or presentation.
- Produce highlighted markup for a page.
- Check how a language grammar tokenizes a construct.
- Create a screenshot-ready code block.
- Compare tokenization between two languages.
When not to use it
- Do not use it to check whether the code is valid; highlighting is cosmetic.
- Do not rely on auto-detection; there is a fixed language list and you must choose one.
- Do not paste secrets into any page that loads remote scripts without reviewing the request.
Example
A JavaScript function is displayed with keywords, strings and comments in distinct colors. The output code element carries a language-javascript class and the token spans Prism generated. Copying returns the HTML, not the plain text, so paste it into markup rather than into a code editor.
What you can do with Syntax Highlighter
- Highlight JavaScript, TypeScript, Python, CSS, HTML, JSON, Bash, C#, Java and SQL.
- Show keywords, strings and comments in distinct colors.
- Copy the generated HTML markup.
- Render the highlighted output in the page.
- Report a grammar loading error.
- Keep the pasted code in the browser.
Example: test with a real sample before trusting the output
Keep the original text. These tools produce a new value rather than editing in place, so a bad transform is reversible only if you still have the source.
Test with a representative sample, including the awkward case: a quote inside a string, a tag inside an attribute, a newline in the middle of a value.
Check line endings and encoding when moving between Windows, Unix and a browser form. A trailing carriage return can break a signature or a hash.
Treat pasted HTML and Markdown as untrusted. A preview that renders raw markup can execute event handlers even when it looks harmless.
Verify the result with the real parser, compiler or linter before shipping. A browser-side formatter is a convenience, not a substitute for the toolchain.
Prefer exact values over screenshots or copied rendered text. Rendering can normalize quotes, dashes and spaces in ways that break the next tool in the chain.
What to know before you start
- Highlighting is cosmetic and does not check or run the code.
- Language auto-detection can be wrong for short or mixed snippets, so choose the language explicitly.
- Only ten languages are offered, and each grammar is fetched from a CDN.
- The copied value is HTML markup, not re-indented source.
Common mistakes
- Expecting unsupported languages to be highlighted correctly.
- Pasting plain text from an editor and losing indentation.
- Assuming the copied HTML is safe to inject without review.
- Thinking a successful highlight means the code compiles.
Troubleshooting
If highlighting does nothing, the grammar request to the CDN may have failed.
If the colors are wrong, the selected language does not match the code.
If the copy button seems to do nothing, check the clipboard permission.
If the output is plain, the code may not contain recognized tokens.
Related standards and documentation
- ECMA-404 defines JSON, and RFC 8259 defines its media type.
- XML 1.0 is a W3C Recommendation; schemas are defined separately by XSD.
- ECMA-262 defines JavaScript, including its regular expression syntax.
- RFC 3986 defines URI syntax and percent-encoding.
- CommonMark specifies Markdown, though many renderers extend it.
- The HTML Living Standard defines character references and parsing rules.
- Unicode defines the character encodings behind text and entity handling.
- Keep the source.
- Test the awkward case.
- Check encoding and newlines.
- Verify with the real tool.