Code Highlighter

Code Input

Programming Language

Highlighting Options

Color Theme

Show Line Numbers

Highlight Specific Lines

Font Size

Word Wrap

Add Copy Button

HTML Output

Live Preview

Preview will appear here...

Code Highlighter

Add professional syntax highlighting to code snippets for HTML display. Perfect for documentation, blogs, and educational content.

Features

Multi-Language Support: Syntax highlighting for 20+ programming languages
Multiple Themes: Choose from popular color themes like GitHub, Monokai, VS Code
Line Numbers: Optional line numbering for better code reference
Line Highlighting: Emphasize specific lines of code
Customizable Styling: Adjust font size, word wrap, and display options
Copy Functionality: Add copy-to-clipboard buttons to code blocks

Supported Languages

JavaScript
TypeScript
HTML
CSS
PHP

Python
Java
C++
C#
SQL

JSON
XML
YAML
Bash
PowerShell

Ruby
Go
Rust
Swift
Kotlin

Available Themes

Default: Clean, minimal highlighting
Dark: Dark background with bright colors
GitHub: GitHub-style syntax highlighting
Monokai: Popular dark theme with vibrant colors

Solarized: Eye-friendly color scheme
VS Code: Visual Studio Code default theme
Atom: Atom editor inspired theme
Sublime: Sublime Text style highlighting

How to Use

Select the programming language from the dropdown
Paste your code in the input area
Choose a color theme and display options
Configure line numbers and highlighting preferences
Click "Generate Highlighted Code" to create HTML
Copy the HTML or preview the result

Discover Toolexe, a comprehensive collection of free web tools designed for both regular users and developers. Everything is quick, free, and available for use, including time calculators, smart unit converters, HTML formatters, and useful JSON tools. No restrictions or signup the tools you require, when you need them.

Tools Categories

`;} $('#html-output').val(html);$('#code-preview').html(html);} function parseLineNumbers(input) {if (!input.trim()) return [];const lines = [];const parts = input.split(',');parts.forEach(part => {part = part.trim();if (part.includes('-')) {const [start, end] = part.split('-').map(n => parseInt(n.trim()));for (let i = start; i <= end; i++) {lines.push(i);}} else {const num = parseInt(part);if (!isNaN(num)) {lines.push(num);}}});return [...new Set(lines)].sort((a, b) => a - b);} function escapeHtml(text) {const div = document.createElement('div');div.textContent = text;return div.innerHTML;} function copyHtmlToClipboard() {const output = $('#html-output').val();if (!output) {alert('No HTML to copy');return;} navigator.clipboard.writeText(output).then(function() {$('#copy-html-btn').text('Copied!').removeClass('btn-success').addClass('btn-success');setTimeout(function() {$('#copy-html-btn').text('Copy HTML').removeClass('btn-success').addClass('btn-success');}, 2000);});} function downloadHtml() {const output = $('#html-output').val();if (!output) {alert('No HTML to download');return;} const blob = new Blob([output], { type: 'text/html' });const url = URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;a.download = 'highlighted-code.html';document.body.appendChild(a);a.click();document.body.removeChild(a);URL.revokeObjectURL(url);} function resetForm() {$('#code-input').val('');$('#html-output').val('');$('#code-preview').html('

Preview will appear here...

');$('#lines-to-highlight').val('');} $('#highlight-btn').click(highlightCode);$('#copy-html-btn').click(copyHtmlToClipboard);$('#download-btn').click(downloadHtml);$('#reset-btn').click(resetForm);$('#highlight-lines').change(function() {if ($(this).is(':checked')) {$('#highlight-lines-input').show();} else {$('#highlight-lines-input').hide();} highlightCode();});let timeout;$('#code-input').on('input', function() {clearTimeout(timeout);timeout = setTimeout(highlightCode, 1000);});$('#language-select, #theme-select, #font-size').change(highlightCode);$('input[type="checkbox"]').change(highlightCode);$('#lines-to-highlight').on('input', function() {clearTimeout(timeout);timeout = setTimeout(highlightCode, 500);});if ($('#code-input').val().trim()) {highlightCode();}});