Wikipedia:WikiProject User scripts/Scripts/Syntax highlighter

Syntax highlighter
This meta-script highlights anything that looks like css code inside pre tags by giving a class to each bit.

''A syntax highlighter is built into the site now, displaying on .js and .css pages. Deprecate this? — Omegatron 01:43, 4 April 2008 (UTC)''

Makes it much easier to read. Use your monobook.css to format your monobook.css. :-)

It's not perfect, and could be extended to do javascript, too. Please fix it and make it better. (I've done a first example for this. -- Olliminatore)

Sort of by User:Omegatron, but heavily based on Simon Willison's script. Other related projects? dp.SyntaxHighlighter has some regexps for javascript highlighting.

Javascript
Add this to your user javascript.

/* Syntax highlighter */

if(document.title.indexOf(".js") == -1)    //   Ignore pages that end in .js  addOnloadHook(function  {  /* CSS syntax highlighting */     multicommentRE = new RegExp('(/\\*[\\s\\S]*?\\*/)', 'g');     ruleRE = new RegExp('([^\\{]+)\\{([^\\}]+)\\}', 'g');     idselectorRE = new RegExp('(#[a-zA-Z0-9\-\_]+)\\b', 'g');     classselectorRE = new RegExp('(\\.[a-zA-Z0-9\-\_]+)\\b', 'g');     pairRE = new RegExp('([a-zA-Z-]+):([^;]+);', 'g');     css = document.getElementsByTagName('pre');     for (i = 0; i < css.length; i++) {       c = css[i];       content = c.innerHTML;       content=content.replace(multicommentRE, ' $1 ');       content = content.replace(ruleRE, function(text, selector, body) { selector = selector.replace(idselectorRE, ' $1 '); selector = selector.replace(classselectorRE, ' $1 '); body = body.replace(pairRE, ' $1 : $2 ;'); return selector + '{' + body + '}'; });      c.innerHTML = content;     }  }); For additional JavaScript-Code (with optional gutter for line-numbers):

else { /* JS syntax highlighting */ }

CSS
Add this to your user CSS to style the different code bits. Adjust to taste.

/* */

/* Syntax highlighting style */

pre span.idselector { color: red; }

pre span.classselector { color: green; }

pre span.property { color: blue; }

pre span.value { color: orange; }

pre span.comment { font-weight: bold; background-color: #eee; }

pre { background: white; }

/* */

Additional for CSS-Code:

/* */

/* Extreme Syntax highlighting style */

/* Main style for the table */ .dp-highlighter { width: 100%; overflow: auto; line-height: 100% !important; margin: 18px 0px 18px 0px; padding:3px 0 3px 0;} .dp-highlighter table {width: 100%; margin: 2px 0px 2px 0px; border-collapse: collapse; border-bottom: 2px solid #eee; background-color: #fff;} .dp-highlighter td { font-family: Courier New; font-size: 11px;} /* Gutter with line number */ .dp-highlighter .gutter { padding-right: 5px; padding-left: 10px; width: 5px; background-color: #eee; border-right: 1px solid gray; color: gray; text-align: right; vertical-align: top;} /* Single line style */ .dp-highlighter .line1, .line2 { padding-left: 10px; border-bottom: 1px solid #F7F7F7; white-space:nowrap;} .dp-highlighter .line2 { background-color: #F7F7F7;} /* Language specific styles */ .dp-c .comment { color: green; } .dp-c .string { color: #69C; } .dp-c .preprocessor { color: gray; } .dp-c .keyword { color: blue; } .dp-c .vars { color: #d00; }

/* */