Cool Syntax Highlighter and Color Coder

Last updated on
Speech Recognition Anywhere
  • Type emails with your voice
  • Write documents with your voice
  • Control the Inernet with your voice
  • Chrome Extension
Reconocimiento de voz en cualquier lugar
  • Escribe correos electrónicos con tu voz
  • Escribe documentos con tu voz
  • Controla la Inernet con tu voz
  • Extensión de Chrome
Spracherkennung Allerorts
  • Geben Sie E-Mails mit Ihrer Stimme ein
  • Schreiben Sie Dokumente mit Ihrer Stimme
  • Steuern Sie das Internet mit Ihrer Stimme
  • Chrome-Erweiterung
Reconnaissance de la parole
  • Tapez des e-mails avec votre voix
  • Écrivez des documents avec votre voix
  • Contrôlez l'Inernet avec votre voix
  • Extension Chrome
Riconoscimento vocale ovunque
  • Digita e-mail con la tua voce
  • Scrivi documenti con la tua voce
  • Controlla Internet con la tua voce
  • Estensione Chrome
どこでも
音声認識
  • あなたの声で文書を書く
  • あなたの声でメールを入力してください
  • あなたの声でInernetを制御する
  • Chrome拡張機能
语音识别
无处不在
  • 用你的声音写文件
  • 用您的声音输入电子邮件
  • 用你的声音控制互联网
  • Chrome 扩展程序
語音識別
無處不在
  • 用你的聲音寫文件
  • 用您的聲音輸入電子郵件
  • 用你的聲音控制互聯網
  • Chrome 擴展程序
Subscribe to Internet Tips and Tools Feed

This online syntax highlighter takes html, javascript, css styles and PHP source code and color codes it, highlighting the syntax with different colors so that you can paste the code into your html document so that users can easily read the code and copy the code. It also converts HTML tags into HTML entities.

Total: 0        Maximum: 50000
Method:
Reserved :
Comments :
Strings :
Numbers :
Operators :

Preview:

 

You will probably want to put the finished html code from the textarea above on your webpage between <pre> </pre> tags like the ones below because HTML pre tags preserve tabs and new lines:

<pre id="preview" style="max-width: 100%; height: 12em; border: 1px solid black; overflow: scroll; -ms-overflow-x: scroll; overflow-x: scroll; font-family: monospace; tab-size: 3; -moz-tab-size: 3; -o-tab-size: 3; -webkit-tab-size: 3;">
<!-- Your html code goes here -->
</pre>

Here is a "Select All/Copy to Clipboard" button like the one above for your users to easily copy the code:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">

if ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4))
{
	// if Internet Explorer 4 or above	
	document.write('<INPUT TYPE="BUTTON" onClick= "selectElementContents(document.getElementById(\'preview\'));" VALUE="Copy to Clipboard">');
}
else // if netscape or firefox
{
	document.write('<INPUT TYPE="BUTTON" onClick= "selectElementContents(document.getElementById(\'preview\'));" VALUE="Select All"> then type CTRL-C to copy');
}

function selectElementContents(el) 
{
    /* http://stackoverflow.com/questions/8019534/how-can-i-use-javascript-to-select-text-in-a-pre-node-block */
	if (window.getSelection && document.createRange) {
        // IE 9 and non-IE
        var range = document.createRange();
        range.selectNodeContents(el);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (document.body.createTextRange) {
        // IE < 9
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.select();
        textRange.execCommand("Copy");
    }
} // end function selectElementContents(el) 

</SCRIPT>

Here is a javascript function for making line numbers in the pre box for your source code:

function line_numbers(el)
{	
	/* This function creates line numbers on source code in a pre tag
		by using ordered list <ol> tag and <li> for each line of code
		but the old code is layered on top of the ordered list so that
		when you copy and paste the code the tabs are preserved and you 
		don't copy the line numbers. 
		Created by Jeff Baker on April 5, 2013
		http://www.seabreezecomputers.com/syntax/
		
		Call the function like this:
		line_numbers(document.getElementById('line_nums')); 
	*/
	var lines = el.innerHTML.split('\n'); // split contents by newline
	el.style.position = "relative"; // Make the pre tag a relative element
	//el.style.margin = "1em";
	el.style.padding = "0";
	
	// Create another element that has identical style and innerHTML by copying el
	var cloned = el.cloneNode(true);
	cloned.style.position = "absolute"; // Absolute so we can put cloned element on top of old pre
	cloned.style.zIndex = 1; // You may have to increase the zIndex if you are using z-index other places
	cloned.style.top = '0px'; // Position on top of old element
	cloned.style.left = '3em'; // Position a little to the left.
	cloned.style.backgroundColor = "#EEEEEE"; // Add a background color
	cloned.style.height = 'auto';
	cloned.style.width = 'auto';
	cloned.style.overflow = "visible";
	
	el.id = "old_"+el.id; // Change id of pre tag to "old_id"

	// Now add an Ordered List to the contents
	if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) // Chrome cuts off 3 digit line numbers on the left
		var new_contents = "<ol style='margin-left: .5em'>"; // if we don't add a .5em margin
	else
		var new_contents = "<ol>";
	for(var i=0; i<lines.length; i++)
	{
		new_contents += "<li><pre style='display: inline; visibility: hidden;'>"+lines[i]+"</pre></li>";
	}
	new_contents += "</ol>";
	
	el.innerHTML = new_contents; // Put the ordered list into the old element
	el.appendChild(cloned); // Add the new cloned element to the old element

} // end function line_numbers(el)

Also check out:
HTML to BBCODE Converter
HTML Entity to Text Converter
HTML Tag and Attribute Stripper
Sea Breeze Computers Home Page

Copyright © 2013 by Jeff Baker

3/29/2016 - ver. 1.0c - A couple of minor bug fixes for this version:

  1. Some regex statements had double backslashes at the end that the syntax highlighter was turning into comments. Fixed.
  2. The syntax highlighter was stripping out many forward slashes. Fixed on line 18 by removing stripslashes.
  3. Added {} curly brackets to operators syntax

4/05/2013 - ver. 1.0b - line_numbers() function created

3/17/2013 - ver. 1.0 - Syntax highlighter created.

Speech Recognition Anywhere
  • Type emails with your voice
  • Write documents with your voice
  • Control the Inernet with your voice
  • Chrome Extension
Reconocimiento de voz en cualquier lugar
  • Escribe correos electrónicos con tu voz
  • Escribe documentos con tu voz
  • Controla la Inernet con tu voz
  • Extensión de Chrome
Spracherkennung Allerorts
  • Geben Sie E-Mails mit Ihrer Stimme ein
  • Schreiben Sie Dokumente mit Ihrer Stimme
  • Steuern Sie das Internet mit Ihrer Stimme
  • Chrome-Erweiterung
Reconnaissance de la parole
  • Tapez des e-mails avec votre voix
  • Écrivez des documents avec votre voix
  • Contrôlez l'Inernet avec votre voix
  • Extension Chrome
Riconoscimento vocale ovunque
  • Digita e-mail con la tua voce
  • Scrivi documenti con la tua voce
  • Controlla Internet con la tua voce
  • Estensione Chrome
どこでも
音声認識
  • あなたの声で文書を書く
  • あなたの声でメールを入力してください
  • あなたの声でInernetを制御する
  • Chrome拡張機能
语音识别
无处不在
  • 用你的声音写文件
  • 用您的声音输入电子邮件
  • 用你的声音控制互联网
  • Chrome 扩展程序
語音識別
無處不在
  • 用你的聲音寫文件
  • 用您的聲音輸入電子郵件
  • 用你的聲音控制互聯網
  • Chrome 擴展程序
Back to www.seabreezecomputers.com
Subscribe to Internet Tips and Tools Feed        

User Comments

There are 0 comments.

Displaying first 50 comments.