PDA

View Full Version : mel syntax highlight greasemonkey for cgtalk


ewerybody
02-18-2011, 11:45 PM
Hello scripters!

As the oh so magic Jelsoft Enterprises Ltd. won't do anything about the crappy code-highlighting in the vBulletin here. I thought we could help ourselfes: We can fix the whole web (http://www.youtube.com/watch?v=8hghpuxCHTc) so we can do it with the code-boxes here too!

I wrote a lot of mel-parsing stuff already but I'm pretty new to JavaScript. So I'm kind of stuck now. But before I end the day I thought I share what I have so far. Maybe I can trigger some more minds and we come up with a all satisfying solution.

For those who don't know: Greasemonkey (http://www.greasespot.net) is a Firefox extension (https://addons.mozilla.org/en-US/firefox/addon/greasemonkey). But these Java Script Userscripts (http://userscripts.org/) run in other browsers too (http://en.wikipedia.org/wiki/Greasemonkey#Equivalents_for_other_browsers).

Ok. As I open up Firebug and look at the page here I see all code-boxes come in <pre> tags with the class='alt2'. Actually I've seen no <pre> without class='alt2' and this actually doesn't seem very solid. But nobody would expect anything to change on this board software anyway. Now from each element we get the textContent and split via \n to get each line:

// ==UserScript==
// @name cgtalk code syntax highlighting
// @namespace http://cgtalk.com
// @description "will" pimp cgtalks Code:-boxes with syntax highlighting and links to docs and stuff
// @include http://forums.cgsociety.org/showthread.php*
// ==/UserScript==

var incrementString = "\t";

var pres = document.getElementsByTagName('pre');
var codes = new Array();
for (i = 0, j = 0; i < pres.length; i++)
if ( pres[i].className == 'alt2')
codes[j++] = pres[i];

for (i = 0; i < codes.length; i++)
{
var inc = 0;
var newLines = '';
var lines = codes[i].textContent.split('\n');
for (l = 0; i < lines.length; l++)
{
// ...
}
}I think doing this for Mel first is the easiest thing. As we have discrete {brackets} for scoping and a line finishing character;

So here is what I actually want:




You might have noticed that the code box always adds a random number of spaces as indentation. Even if you post with tabs. I'd like to make the format of the code just the way you want: Greasemonkey offers GM_getValue("foo") and GM_setValue("boo","foo"). One could use these to setup a indentation string like tab ("\t") or 3 or 4 spaces (" "/" ")?
Then one could also make the curly brackets appear at the right place as well. No matter how the code was written?
Spaces between + " " + $var would be cool too or between ( and the content ) vs. (this)?
then colors for //comments, $vars and "strings" of course and links to the official documentation like ls (http://download.autodesk.com/us/maya/2009help/Commands/ls.html) for example?
a copy button. Maybe made with zeroclipboard (http://code.google.com/p/zeroclipboard)?
lineNumbers?

But I cannot get my head straight rightnow... JS split method seems to only support one delimiter at a time so we cannot split like in Mel here. Maybe someone else has more JS experience and is willing to participate? Maybe there is a JS syntax lib already? but how to load it with a Greasemonkey script?

what do you think?

CGTalk Moderation
02-18-2011, 11:45 PM
This thread has been automatically closed as it remained inactive for 12 months. If you wish to continue the discussion, please create a new thread in the appropriate forum.