MyWiki: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? [1] 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, '<span class="comment">$1</span>');
       content = content.replace(ruleRE, function(text, selector, body) {
         selector = selector.replace(idselectorRE, '<span class="idselector">$1</span>');
         selector = selector.replace(classselectorRE, '<span class="classselector">$1</span>');
         body = body.replace(pairRE, '<span class="property">$1</span>:<span class="value">$2</span>;');
         return selector + '{' + body + '}';
       });
       c.innerHTML = content;
     }
  });

For additional JavaScript-Code (with optional gutter for line-numbers):

 else { /* JS syntax highlighting */
   User:Olliminatore/shCore.js
 }

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; }

/*

*/