imported>Omegatron at 01:43, 4 April 2008

2008-04-04T01:43:14Z

New page

== 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? — [[User:Omegatron|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. -- [[User:Olliminatore|Olliminatore]])

Sort of by [[User:Omegatron]], but ''heavily'' based on [http://simon.incutio.com/js/syntaxHighlight.html Simon Willison's script]. Other related projects? [http://www.codeproject.com/jscript/highlight.asp] [http://www.dreamprojections.com/SyntaxHighlighter/ dp.SyntaxHighlighter] has some regexps for javascript highlighting.

== Javascript ==
Add this to your user javascript.

<pre><nowiki>
/* 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;
}
});
</nowiki></pre>
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.

/*<pre><nowiki>*/

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

/*</nowiki></pre>*/

Additional for CSS-Code:

/*<pre><nowiki>*/

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

/*</nowiki></pre>*/

MyWiki:WikiProject User scripts/Scripts/Syntax highlighter - Revision history

imported>Omegatron at 01:43, 4 April 2008