Syntax highlighting with several javascript lines

Yes, I know what parsing is. And I know a lot of different libraries to highlight anything. Only this all is not when it is necessary to highlight a simple primerchik that does not contain any code distortions. And it’s really useless to pull many, many bytes of _right_ disassembling _any_ code.

For cases without kodoizvrata (and most of them), you can use this code:

  code = code
 // keywords (the list is incomplete, wrote what came to mind)
 .replace (/ (var | function | typeof | new | return | if | for | in | while | break | do | continue | switch | case) ([^ a-z0-9 \ $ _]) / gi,
 '<span class = "kwrd"> $ 1 </ span> $ 2')
 // any brackets
 .replace (/ (\ {| \} | \] | \ [| \ |) / gi, '<span class = "kwrd"> $ 1 </ span>')
 // single line comments
 .replace (/ (\ / \ / [^ \ n \ r] * (\ n | \ r \ n)) / g, '<span class = "comm"> $ 1 </ span>')
 // lines
 .replace (/('.*?') / g, '<span class = "str"> $ 1 </ span>')
 // functions (when there is a bracket after the identifier)
 .replace (/ ([az \ _ \ $] [a-z0-9 _] *) \ (/ gi, '<span class = "func"> $ 1 </ span> (')
 // I don’t like eight-digit tabs, let 4 spaces be better
 .replace (/ \ t / g, ''); 

')

CSS

  .str {color: red} / * Strings are red * /
 .func {color: blue} / * User functions blue * /
 .comm {color: orange} / * Comments orange * /
 .kwrd {font-weight: bold} / * Keywords: bold * /
 .str span {color: red; font-weight: normal} / * Everything inside the line is a string * /
 .comm span {color: orange; font-weight: normal} / * Everything inside the comment - comment * / 

Example

Note the bug in the last line. About this conversation further

Scope, bugs

This code is sharpened on javascript, which can be judged by keywords. Making the code understand any C-like language is easy.

I did not bother with multi-line comments, as well as with multi-line lines, because not so privately multi-line comments are used in the examples, but I’m not used to multi-line lines in javascript.

Even worse than this approach - the text is “flat”, that is, this analyzer, if I may say so, considers the word for within a line or a comment to be the same key word as all of them. This does not suit us, so the css rules of .str span and .comm span are used in order to put CSS on the shoulders to recognize the block structure of the code. One problem occurs when the line contains a comment that contains a keyword or user-defined function. In this case, regardless of the end of the line, we consider everything as a line (before the newline character).

And yet, double quotes do not exist. You can add another replace:

  .replace (/(".*?")/ g, '<span class = "str"> $ 1 </ span>') 

But something keeps me from it.

Bonus: plugin for jQuery

chainable, multiple

  (function ($) {

	 $ .fn.syntax = function () {
		 return this.each (function () {
			 var jqCode = $ (this);
			 var code = jqCode.text ();
			 code = code
			 .replace (/ (var | function | typeof | new | return | if | for | in | while | break | do | continue | case | switch) ([^ a-z0-9 \ $ _]) / gi, ' <span class = "kwrd"> $ 1 </ span> $ 2 ')
			 .replace (/ (\ {| \} | \] | \ [| \ |) / gi, '<span class = "kwrd"> $ 1 </ span>')
			 .replace (/ (\ / \ / [^ \ n \ r] * (\ n | \ r \ n)) / g, '<span class = "comm"> $ 1 </ span>')
			 .replace (/('.*?') / g, '<span class = "str"> $ 1 </ span>')
			 .replace (/ ([az \ _ \ $] [a-z0-9 _] *) \ (/ gi, '<span class = "func"> $ 1 </ span> (')
			 .replace (/ \ t / g, '');
			 jqCode.html (code);
		 });
	 }

	 }) (jQuery);

	 // call example
	 $ ('pre # code'). syntax ();  // highlighting a specific block pre with id = code
	 $ ('pre'). syntax ();  // highlight all pre 

Advanced Version by etcdema

 function Syntax (code) {
	 var comments = [];  // Here we collect all kamenty
	 var strings = [];  // Here we collect all the lines
	 var res = [];  // Here we collect all RegExp
	 var all = {'C': comments, 'S': strings, 'R': res};
	 var safe = {'<': '<', '>': '>', '&': '&'};

	 return code
	 // Mask HTML
		 .replace (/ [<> &] / g, function (m)
			 {return safe [m];  })
	 // Remove Kamenty
		 .replace (/ \ / \ * [\ s \ S] * \ * \ // g, function (m)
			 {var l = comments.length;  comments.push (m);  return '~~~ C' + l + '~~~';  })
		 .replace (/ ([^ \\]) \ / \ / [^ \ n] * \ n / g, function (m, f)
			 {var l = comments.length;  comments.push (m);  return f + '~~~ C' + l + '~~~';  })
	 // Remove regexp
		 .replace (/ \ / (\\\ / | [^ \ / \ n]) * \ / [gim] {0,3} / g, function (m)
			 {var l = res.length;  res.push (m);  return '~~~ R' + l + '~~~';  })
	 // Remove lines
		 .replace (/ ([^ \\]) ((?: '(?: \\' | [^ ']) *') | (?: "(?: \\" | [^ ") *" )) / g, function (m, f, s)
			 {var l = strings.length;  strings.push (s);  return f + '~~~ S' + l + '~~~';  })
	 // Highlight keywords
		 .replace (/ (var | function | typeof | new | return | if | for | in | while | break | do | continue | switch | case) ([^ a-z0-9 \ $ _]) / gi,
			 '<span class = "kwrd"> $ 1 </ span> $ 2')
	 // Select the brackets
		 .replace (/ (\ {| \} | \] | \ [| \ |) / gi,
			 '<span class = "gly"> $ 1 </ span>')
	 // Select the function names
		 .replace (/ ([az \ _ \ $] [a-z0-9 _] *) [\ s] * \ (/ gi,
			 '<span class = "func"> $ 1 </ span> (')
	 // Return the placements, strings, RegExp
		 .replace (/ ~~~ ([CSR]) (\ d +) ~~~ / g, function (m, t, i)
			 {return '<span class = "' + t + '">' + all [t] [i] + '</ span>';  })
	 // Expose Line Breaks
		 .replace (/ \ n / g,
			 '<br/>')
	 // Tabulation is replaced by non-breaking spaces
		 .replace (/ \ t / g,
			 '& nbsp; & nbsp; & nbsp; & nbsp;');
 } 

Other styles will be needed here:

  .S {color: red} / * Strings are red * /
 .func {color: blue} / * User functions blue * /
 .C {color: orange} / * Comments orange * /
 .kwrd {font-weight: bold} / * Keywords: bold * /
 .R {color: gray} / * Gray regression * / 

upd: taking into account corrections and additions, got the script highlighting itself , but the version from etcdema : dema.ru/syntax