CodeHighlighter Example

Shows the example files when executed.

by Michael

HTML

<code class="html">
<!-- HTML code example -->
&lt;!DOCTYPE html>
&lt;html lang="de">
	&lt;head>
		&lt;title>Titel&lt;/title>
		&lt;meta charset="UTF-8"/>
		&lt;meta name="language" content="de"/>
		&lt;meta name="description" content=""/>
		&lt;meta name="keywords" content=""/>
		&lt;meta name="copyright" content="Michael David Kuckuk"/>
		&lt;meta name="author" content="Michael David Kuckuk"/>
		&lt;meta name="publisher" content="Michael David Kuckuk"/>
		&lt;meta name="generator" content="Notepad++">
		&lt;meta name="robots" content="noindex, nofollow, noarchive" />
		&lt;meta name="viewport" content="width=device-width, initial-scale=1.0" />
		&lt;link rel="icon" type="image/x-icon" href="./favicon.ico"/>
		&lt;link rel="stylesheet" type="text/css" href="./style.css"/>
		&lt;link rel="stylesheet" type="text/css" href="./js/jquery-ui/jquery-ui.css"/>
		&lt;script src="./js/jquery-2.1.1.js">&lt;/script>
		&lt;script src="./js/jquery-ui/jquery-ui.js">&lt;/script>
		&lt;script src="./js/jquery-migrate-min.js">&lt;/script>
		&lt;script src="./js/markCode.js">&lt;/script>
		&lt;script src="./js/main.js">&lt;/script>
	&lt;/head>
	
	&lt;body>
		<code class="html">
		
		</code>
	<code class="css">
		
		</code>
	<code class="js">
		
		</code>
	<code class="php">
			
		</code>
&lt;/body> &lt;/html></code>	<code class="css">
/* CSS code example */
html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font-family: monospace;
}
.comment * {
	color: inherit !important;
	font-weight: inherit !important;
}
.cssTag, .htmlTag {
	color: #0000FF;
}
.comment {
	color: #008000;
}
.htmlAttr, .cssClass, .jsInt {
	color: #FF0000;
}
.cssImportant {
	color: #FF0000;
	font-weight: bold;
}
.cssAttr {
	color: #8080C0;
	font-weight: bold;
}
.cssDOPPELPUNKT {
	color: #FF8000;
	font-weight: bold;
}
.cssId {
	color: #0080FF;
	font-weight: bold;
}
.htmlValue {
	color: #8000FF;
	font-weight: bold;
}
.jsKeyword {
	color: #000080;
}
.jsString {
	color: #808080...

CSS

/*
 * CodeHighlighter - a JavaScript library to highlight Code as in Notepad++
 * Copyright (C) 2015  Michael David Kuckuk
 * 
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 * 
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 * 
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 *
 */

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font-family: monospace;
}
/*############################################################
 * General code
 *############################################################*/
.comment {
	color: #008000;
}
.comment * {
	color: inherit !important;
	font-weight: inherit !important;
}
/*############################################################
 * HTML code
 *############################################################*/
.htmlTag {
	color: #0000FF;
}
.htmlAttr{
	color: #FF0000;
}
.htmlValue {
	color: #8000FF;
	font-weight: bold;
}
/*############################################################
 * CSS code
 *############################################################*/
.cssTag {
	color: #0000FF;
}
.cssClass {
	color: #FF0000;
}
.cssImportant {
	color: #FF0000;
	font-weight: bold;
}
.cssAttr {
	color: #8080C0;
	font-weight: bold;
}
.cssPseudoclass {
	color: #FF8000;
	font-weight: bold;
}
.cssId {
	color: #0080FF;
	font-weight: bold;
}
/*############################################################
 * JavaScript code
 *############################################################*/
.jsInt {
	color: #FF0000;
}
.jsKeyword {
	color:...

JavaScript

/*
 * CodeHighlighter - a JavaScript library to highlight Code as in Notepad++
 * Copyright (C) 2015  Michael David Kuckuk
 * 
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 * 
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 * 
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 *
 */

$.fn.highlightCode = function(codeType) {
	var self = this;
	var functions = {
		html: function() {
			var code = self.html();
			var HtmlRegex = /(\&lt;[a-zA-Z1-6]+(\s*[a-zA-Z1-6\-_\.]+(?:=\".*\")?)*\s*\/?\s*\&gt;)/g;
			var HtmlRegex2 = /\&lt;[a-zA-Z1-6]+(\s*[a-zA-Z1-6\-_\.]+(?:=\".*\")?)*\s*\/?\s*\&gt;/g;
			var HtmlEndRegex = /(\&lt;\/[a-zA-Z1-6]*\&gt;)/g;
			var attributeRegex = /([a-zA-Z0-9\-\_]*)=(\"[a-zA-Z0-9\-\_\s\{\}\(\)\[\]\.\/\,\=\+\#]*\")/g;
			var commentRegex1 = /(&lt;!--[\s\S]*?--&gt;)/g;
			var commentRegex2 = /(\/\/.*)/g;
			var styleRegex = /&lt;style&gt;([\s\S]*?)&lt;\/style&gt;/g
			var scriptRegex = /&lt;script&gt;([\s\S]*?)&lt;\/script&gt;/g
			
			var result = code;
			
			result = result.replace(/</g, '&lt;');
			result = result.replace(/>/g, '&gt;');
			console.log(result);
			
			result = result.replace(HtmlRegex, '<span class="htmlTag">$1</span>');
			
			var htmlAttrMatches = result.match(HtmlRegex2);
			for(var i = 0; i < htmlAttrMatches.length; i++) {
				var attrs = htmlAttrMatches[i];
				
				attrs = attrs.replace(attributeRegex, '<span class="htmlAttr">$1</span>=<span class="htmlValue">$2</span>');
				
				result = result.replace(htmlAttrMatches[i],...