Click here to Skip to main content
Click here to Skip to main content
Add your own
alternative version

Multiple Language Syntax Highlighting, Part 1: JScript

, 12 Mar 2003
Makes automaticaly highlighting source code in web page a reality (for C,C++,JScript, VBScript, XML)
highlight-demo.zip
highlight.png
parsecontext.png
pipe.png
schema.png
tn_schema.jpg
highlight.zip
highlight.xsl
highlight.xsx
highlight_src.zip
pipe.png
highlight.xsl
parsecontext.png
tn_schema.jpg
highlight.png
highlight.xsx
schema.png
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
	<HEAD>
		<title>Article Helper 1.1</title>
		<script language="javascript" src="highlight.js" runat="client"></script>
		<script language="javascript">
			function IsIE()
			{
				var browser=navigator.appName;
				if (browser == "Microsoft Internet Explorer")
					return true;
				else
					return false;
			}

			function ShowPreview()
			{
				var highlightedHTML = processAndHighlightText( Form1.inputarea.value, "<", "pre", ">", true);
				highlightHTML = processAndHighlightText( highlightedHTML, "<", "code", ">", false);
				
				previewarea.innerHTML = '<table border=1 width=100% height=100% cellpadding=0 cellspacing=0><tr><td valign=top align=left>' 
							+ highlightHTML
							+ '</td></tr></table>';
				document.Form1.inputarea.focus();
			}

			function SelectAll()
			{
				document.Form1.inputarea.select();
			}

			function CopyToClipBoard() 
			{
				var objTextArea = document.Form1.inputarea;

				objTextArea.focus();
				var objSelectedTextRange = document.selection.createRange();
				var strSelectedText = objSelectedTextRange.text;

				if (strSelectedText.length == 0)
				{
					alert("Please select text within the article to copy.");
					return false;
				}
				else
				{
					objSelectedTextRange.execCommand("Copy");
				}
			}

			function CutToClipBoard() 
			{
				var objTextArea = document.Form1.inputarea;

				objTextArea.focus();
				var objSelectedTextRange = document.selection.createRange();
				var strSelectedText = objSelectedTextRange.text;

				if (strSelectedText.length == 0)
				{
					alert("Please select text within the article to cut.");
					return false;
				}
				else
				{
					objSelectedTextRange.execCommand("Cut");
				}
			}

			function PastFromClipBoard() 
			{
				var objTextArea = document.Form1.inputarea;

				objTextArea.focus();
				var objSelectedTextRange = document.selection.createRange();

				objSelectedTextRange.execCommand("Paste");
			}

			function DeleteSelectedText() 
			{
				var objTextArea = document.Form1.inputarea;

				objTextArea.focus();
				var objSelectedTextRange = document.selection.createRange();
				var strSelectedText = objSelectedTextRange.text;

				if (strSelectedText.length == 0)
				{
					alert("Please select text within the article to delete.");
					return false;
				}
				else
				{
					objSelectedTextRange.execCommand("Delete");
				}
			}
			
			function InsertText(strInsertText) 
			{
				if (strInsertText <= 0) return false;
				var objTextArea = document.Form1.inputarea;
				if (objTextArea)
				{

					if (strInsertText == 'space')
					{
						strInsertText = '&nbsp;';
					}
					else if (strInsertText == 'lt')
					{
						strInsertText = '&lt;';
					}
					else if (strInsertText == 'gt')
					{
						strInsertText = '&gt;';
					}
					else if (strInsertText == 'amp')
					{
						strInsertText = '&amp;';
					}
								
					if (document.selection && document.selection.createRange)
					{
						objTextArea.focus();
						var objSelectedTextRange = document.selection.createRange();
						var strSelectedText = objSelectedTextRange.text;
						objSelectedTextRange.text = strInsertText + strSelectedText;
					}
					else
					{
						objTextArea.value += strInsertText;
						objTextArea.focus();
					}

				}
				return false;
			}

			function ToggleWrapSelection(strTag) 
			{
				if (strTag.length <= 0) return false;
				
				var StartTag = "<" + strTag + ">";
				var EndTag   = "</" + strTag + ">";
				
				var objTextArea = document.Form1.inputarea;
				if (objTextArea)
				{
					if (document.selection && document.selection.createRange)
					{
						objTextArea.focus();
						var objSelectedTextRange = document.selection.createRange();
						var strSelectedText = objSelectedTextRange.text;
						var nStrtLen = StartTag.length;
						var nEndLen  = EndTag.length;
						var nSelLen  = strSelectedText.length;
						
						if (strSelectedText.substr(0, nStrtLen) == StartTag &&
							strSelectedText.substr(nSelLen-nEndLen) == EndTag)
						{
							objSelectedTextRange.text = strSelectedText.substr(nStrtLen, nSelLen-nStrtLen-nEndLen);
						}
						else
							objSelectedTextRange.text = StartTag + strSelectedText + EndTag;
							
						if (strSelectedText.length == 0)
						{
							objSelectedTextRange.move("character", -(strTag.length + 3));
							objSelectedTextRange.select();
						}
						objTextArea.focus();
					}
					else
					{
						var strAppendText = StartTag + EndTag;
						objTextArea.value += strAppendText;
						objTextArea.focus();
					}
				}
				return false;
			}

			function ToggleWrapHighlightSelection() 
			{				
				var StartTag = "<pre>";
				var EndTag   = "</pre>";
				
				var objTextArea = document.Form1.inputarea;
				if (objTextArea)
				{
					if (document.selection && document.selection.createRange)
					{
						objTextArea.focus();
						var objSelectedTextRange = document.selection.createRange();
						var strSelectedText = objSelectedTextRange.text;
						
						objSelectedTextRange.text = highlightCode( "cpp", "cpp", false, strSelectedText );
						objTextArea.focus();
					}
				}
				return false;
			}
			
			function InLinkErAte(NewWindow) 
			{
				var objTextArea = document.Form1.inputarea;
				if (objTextArea)
				{
					if (document.selection && document.selection.createRange)
					{
						objTextArea.focus();
						var objSelectedTextRange = document.selection.createRange();
						var strSelectedText = objSelectedTextRange.text;
						var objRegEx = new RegExp("(ht|f)tps?:\/\/");
						var strProtocol = "";
						if (strSelectedText.length == 0)
						{
							if (NewWindow) 
							{
								alert("Please select a URL within the article text to convert.");
								return false;
							}
						}
						else
						{
							if (!objRegEx.test(strSelectedText)) strProtocol = "http://";
						}
						
						var URI = strProtocol + strSelectedText;

						var offset = 0;
						if (NewWindow)
						{
							objSelectedTextRange.text = "<a href=\"" + URI + "\">" + strSelectedText
														+ "</a>[<a target=_blank title='New Window' href=\"" 
														+ URI + "\">^</a>]";
							offset = 8 + URI.length + 47;
						}
						else
						{
							objSelectedTextRange.text = "<a href=\"" + URI + "\">"
														+ strSelectedText + "</a>";
							offset = 4;
						}
			       
						if (strSelectedText.length == 0)
						{
							objSelectedTextRange.move("character", -offset);
							objSelectedTextRange.select();
						}
					}
					else
					{
						var strAppendText = "<a href=\"\"" + strTarget + "></a>";
						objTextArea.value += strAppendText;
						objTextArea.focus();
					}
				}
				return false;
			}
			
			function ImageErAte() 
			{
				var objTextArea = document.Form1.inputarea;
				if (objTextArea)
				{
					if (document.selection && document.selection.createRange)
					{
						objTextArea.focus();
						var objSelectedTextRange = document.selection.createRange();
						var strSelectedText = objSelectedTextRange.text;
						var objRegEx = new RegExp("(ht|f)tps?:\/\/");
						var strProtocol = "";
						if (strSelectedText.length == 0)
						{
							alert("Please select an image URL within the article text to convert.");
							return false;
						}
						else
						{
							if (!objRegEx.test(strSelectedText)) strProtocol = "http://";
						}
						
						var URI = strProtocol + strSelectedText;

						var offset = 0;
						objSelectedTextRange.text = "<img src=\"" + URI + "\">";
						offset = 4;
			       
						if (strSelectedText.length == 0)
						{
							objSelectedTextRange.move("character", -offset);
							objSelectedTextRange.select();
						}
					}
					else
					{
						var strAppendText = "<img src=\"\"" + strTarget + "></a>";
						objTextArea.value += strAppendText;
						objTextArea.focus();
					}
				}
				return false;
			}
			function TestHighlightCode()
			{
			}								
		</script>
		<style>
		BODY
		{
			font-family: Verdana,Tahoma,Arial, sans-serif;
		}
		H1, H2, H3, H4, H5, TH
		{
			font-weight: bold;
		}
		H2, H3, H5
		{
			color: #ff9900;
		}
		H1
		{
			font-size: 16pt;
		}
		H2
		{
			font-size: 13pt;
		}
		H3
		{
			font-family: Verdana,Tahoma,Arial, sans-serif;
			font-size: 11pt;
		}
		H4
		{
			font-size: 10pt;
			margin-top: 2px;
			margin-bottom: 0px;
		}
		H5
		{
			font-size: 9pt;
			font-weight: bold;
			margin-bottom: 2px;
		}
		H6
		{
			color: #626262;
			font-size: 65%;
			font-weight: normal;
		}		
		CODE, .cpp-inline 
		{ 
			color: #990000; 
			font-family: "Courier New", Courier, mono; 
		}
		PRE, .cpp-pre
		{
			background-color: #FBEDBB;
			padding: 7pt;
			background-image: url(/images/codebg.gif);
			font: 9pt "Courier New", Courier, mono;
			white-space: pre;
			width: 100%;
			/*overflow: auto;*/
		}
		.cpp-comment
		{
			color: #006633;
		}
		.cpp-literal	
		{
			color: #CC0000;
		}
		.cpp-keyword
		{
			color:#0000FF;
		}		
		.cpp-preprocessor
		{
			color:#0000FF;
		}		
		.xml-tag
		{
			color:#AA4400
		}
		.xml-bracket
		{
			color:#0000FF
		}
		.xml-cdata
		{
			color:#AA0088
		}
		.xml-attribute-name
		{
			color=#FF0000
		}
		.xml-attribute-value
		{
			color:#0000FF
		}
		</style>
	</HEAD>
	<body bgcolor="#ff9900" onLoad="if (IsIE() == false) document.write('This page requires Microsoft Internet Explorer.');">
		<form name="Form1" id="Form1" method="post" runat="server">
			<table width="100%" height="300" border="0" cellpadding="2" cellspacing="0">
				<tr>
					<td>&nbsp;</td>
					<td colspan="2">
						<big><b>Article Helper 1.1</b></big><br>
						<small>Type up your CP articles and preview them all on one page.</small>
					</td>
				</tr>
				<tr valign="top">
					<td width="55">
						<button onclick="ToggleWrapSelection('b');ShowPreview();" type="button" style="WIDTH: 50px; TEXT-ALIGN: center">
							<b>B</b></button><br>
						<button onclick="ToggleWrapSelection('i');ShowPreview();" type="button" style="WIDTH: 50px; TEXT-ALIGN: center">
							<i>I</i></button><br>
						<button onclick="ToggleWrapSelection('u');ShowPreview();" type="button" style="WIDTH: 50px; TEXT-ALIGN: center">
							<u>U</u></button><br>
						<button onclick="ToggleWrapSelection('strike');ShowPreview();" type="button" style="WIDTH: 50px; TEXT-ALIGN: center">
							<strike>S</strike></button><br>
						<button onclick="InLinkErAte(false);ShowPreview();" type="button" style="WIDTH: 50px; TEXT-ALIGN: center">link</button><br>
						<button onclick="InLinkErAte(true);ShowPreview();" type="button" style="WIDTH: 50px; TEXT-ALIGN: center">link [^]</button><br>
						<button onclick="ToggleWrapSelection('p');ShowPreview();" type="button" style="WIDTH: 50px; TEXT-ALIGN: center">p</button><br>
						<button onclick="InsertText('<br>');ShowPreview();" type="button" style="WIDTH: 50px; TEXT-ALIGN: center">br</button><br>
						<button onclick="InsertText('lt');ShowPreview();" type="button" style="WIDTH: 50px; TEXT-ALIGN: center">&lt;</button><br>
						<button onclick="InsertText('gt');ShowPreview();" type="button" style="WIDTH: 50px; TEXT-ALIGN: center">&gt;</button><br>
						<button onclick="InsertText('amp');ShowPreview();" type="button" style="WIDTH: 50px; TEXT-ALIGN: center">&amp;</button><br>
						<button onclick="InsertText('space');ShowPreview();" type="button" style="WIDTH: 50px; TEXT-ALIGN: center">space</button><br>
						<button onclick="ToggleWrapSelection('big');ShowPreview();" type="button" style="WIDTH: 50px; TEXT-ALIGN: center">
							<big>BIG</big></button><br>
						<button onclick="ToggleWrapSelection('small');ShowPreview();" type="button" style="WIDTH: 50px; TEXT-ALIGN: center">
							<small>small</small></button><br>
						<button onclick="ToggleWrapSelection('sup');ShowPreview();" type="button" style="WIDTH: 50px; TEXT-ALIGN: center">sup</button><br>
						<button onclick="ToggleWrapSelection('sub');ShowPreview();" type="button" style="WIDTH: 50px; TEXT-ALIGN: center">sub</button><br>
						<button onclick="ToggleWrapSelection('code');ShowPreview();" type="button" style="WIDTH: 50px; TEXT-ALIGN: center">
							<code>code</code></button><br>
						<button onclick="ToggleWrapSelection('pre');ShowPreview();" type="button" style="WIDTH: 50px; TEXT-ALIGN: center">
							<tt>pre</tt></button><br>
						<button onclick="ToggleWrapSelection('h2');ShowPreview();" type="button" style="WIDTH: 50px; TEXT-ALIGN: center">H2</button><br>
						<button onclick="ImageErAte();ShowPreview();" type="button" style="WIDTH: 50px; TEXT-ALIGN: center">img</button>
						<button onclick="ToggleWrapHighlightSelection();ShowPreview();" type="button" style="WIDTH: 50px; TEXT-ALIGN: center">c++</button>
					</td>
					<td>
						<TEXTAREA name="inputarea" id="inputarea" style="FONT-SIZE: 10pt; Z-INDEX: 101; WIDTH: 100%; COLOR: black; FONT-FAMILY: 'Courier New'; HEIGHT: 100%; BACKGROUND-COLOR: white; TEXT-ALIGN: left" rows="8" cols="35" OnKeyUp="ShowPreview();"></TEXTAREA>
					</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td>
						<button onclick="SelectAll()" type="button">Select All</button>
						<button onclick="CutToClipBoard();ShowPreview();" type="button">Cut</button>
						<button onclick="CopyToClipBoard()" type="button">Copy</button>
						<button onclick="PastFromClipBoard();ShowPreview();" type="button">Paste</button>
						<button onclick="DeleteSelectedText();ShowPreview();" type="button">Delete</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<button onclick="ShowPreview()" type="button">Update Preview</button>
						<button onclick="TestHighlightCode()" type="button">Test Hightlight Code</button>
					</td>
				</tr>
			</table>
		</form>
		<div name="previewarea" id="previewarea" style="WIDTH: 100%; HEIGHT: 300px; BACKGROUND-COLOR: #ffffff"></div>
	</body>
</HTML>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Jonathan de Halleux
Engineer
United States United States
Jonathan de Halleux is Civil Engineer in Applied Mathematics. He finished his PhD in 2004 in the rainy country of Belgium. After 2 years in the Common Language Runtime (i.e. .net), he is now working at Microsoft Research on Pex (http://research.microsoft.com/pex).

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.141223.1 | Last Updated 13 Mar 2003
Article Copyright 2003 by Jonathan de Halleux
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid