Highlighted forum codeblocks

BlitzMax Forums/BlitzMax Programming/Highlighted forum codeblocks

grable

(Posted 2008) [#1]

I dont know if this is the right topic to post this, but here goes:

I was tired of looking at boring source code on this forum so i whipped up a simple highlighter for greasemonkey (an extension for firefox) to fix that for me :D
i really wish this was done server side, with options for c/c++ etc, but i digress.

Latest version (0.8) adds line numbering, see the image below.

Example:

You can install the script from here: http://userscripts.org/scripts/show/26817

N	(Posted 2008) [#2]

Nice, thanks for the script.

Cruis.In

(Posted 2008) [#3]

noel cower, genius, and all grown up, what are you working on these days?

N	(Posted 2008) [#4]

Depends on the street corner.

Cruis.In

(Posted 2008) [#5]

ahaha, no chance of an imposter here!

plash

(Posted 2008) [#6]

Awesome! I kind of like it how it is, not built-in, makes it customizable and doesn't add to the server latency.

Perturbatio

(Posted 2008) [#7]

nice :)

I was wondering about code highlighting server side not that long ago. I still think it would be a better way (for security reasons mainly). I don't know how secure greasemonkey is though.

grable

(Posted 2008) [#8]

Thanks, i have updated the script since i last posted as well. Fixing some bugs and adding highlighting for codeboxes namely.

I don't know how secure greasemonkey is though.

Since scripts run at the domain level, they have access to cookies/history etc from the originating site.
So someone could potentially get access to your account.
But cross-site scripting isnt possible as far as i know, so running trusted scripts wont endanger you or your other sites.

But you should always check the script to see what it does anyways ;)

Perturbatio

(Posted 2008) [#9]

But you should always check the script to see what it does anyways ;)

Yep, I did that :)

nino	(Posted 2008) [#10]

not to derail the thread (looks like a cool utility) but here is a great set of regular expressions to accomplish the same...

http://www.phoboslab.org/log/2007/08/generic-syntax-highlighting-with-regular-expressions

would be easy to modify for blitz, at least it was pretty easy to modify for Lua (and php4)

here was my result...

http://www.physle.com/lua/

Perturbatio

(Posted 2008) [#11]

I just modified this code, added a link at the bottom of the newly created code blocks that allows you to select the code.

// ==UserScript==
// @name	BlitzMax Code Highlighting
// @description Highlights BlitzMax code within codeblocks in the forums at blitzbasic.com
// @include http://blitzmax.com/*
// @include http://blitzbasic.com/*
// @include http://www.blitzmax.com/*
// @include http://www.blitzbasic.com/*
// ==/UserScript==

// keywords
var vartypes = [ "\$", "\!", "\%", "\#", "Byte", "Short", "Int", "Long", "Float", "Double", "String", "Object" ];

var keywords = [ "Strict","SuperStrict","End","True","False","Null","Pi","Nan","Var","Ptr","If","Then","Else","ElseIf","EndIf","For","To","Step","Next","EachIn",
"While","Wend","EndWhile","Repeat","Until","Forever","Select","EndSelect","Case","Default","Exit","Continue","Const","Local","Global",
"Field","Function","EndFunction","Type","EndType","Extends","Method","EndMethod","Abstract","Final","New","Self","Super","Delete",
"Release","Public","Private","Extern","EndExtern","Module","ModuleInfo","Incbin","IncbinPtr","IncbinLen","Include","Framework","Import",
"Assert","Goto","Try","EndTry","Catch","Throw","DefData","ReadData","RestoreData","And","Or","Not","Shl","Shr","Sar","Len","Abs","Mod",
"Sgn","Min","Max","Varptr","SizeOf","Asc","Chr","Return" ];

var blitz_mod = [ "RuntimeError", "DebugStop", "DebugLog", "AppDir", "AppFile", "AppTitle", "AppArgs", "LaunchDir", "OnEnd",
"ReadStdin", "WriteStdout", "WriteStderr", "Delay", "MilliSecs", "MemAlloc", "MemFree", "MemExtend",
"MemClear", "MemCopy", "MemMove", "GCSetMode", "GCSuspend", "GCResume", "GCCollect", "GCMemAlloced",
"GCEnter", "GCLeave", "HandleFromObject", "HandleToObject", "Print", "Input"]

function addGlobalStyle(css) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
}
// color styles use by highlighter
addGlobalStyle(
	// background & normal text styles
	"pre.code, pre.codebox { background-color: #013c77 !important;  color: #f0f0f0 !important; }" +
	"pre.codebox { border: 2px solid gray !important; }" +
	// code styles
	".code-comment { color: #06bed9 !important; font-weight: none !important;  }" +
	".code-keyword { color: #fbfb00 !important; font-weight: none !important;  }" +
	".code-vartype { color: #fbc300 !important; font-weight: none !important;  }" +
	".code-string { color: #00f400 !important; font-weight: none !important;  }" +
	".code-number { color: #bbbbbb !important; font-weight: none !important;  }" +
	".code-attribute { color: #808080 !important; font-weight: none !important;  }"
);


function HighlightWord( source, word, style) {
	return source.replace( new RegExp( "\\b("+word+")\\b", "gim"), "<font class=" + style + ">$1</font>");
}

function Sanitize( source) {
	return source.replace( /<\/?font( class=code-(comment|keyword|vartype|string|number|attribute))?(>|$)/gi, "");
}

function HighlightSource( code) {
	// vartypes
	for( var x=0; x<vartypes.length; x++)	code = HighlightWord( code, vartypes[x], "code-vartype");
	// keywords
	for( var x=0; x<keywords.length; x++)	code = HighlightWord( code, keywords[x], "code-keyword");
	for( var x=0; x<blitz_mod.length; x++)	code = HighlightWord( code, blitz_mod[x], "code-keyword");
	// numerals
	code = code.replace( /\b(\$[a-f0-9]+|%[0-1]+|\d+(\.\d*)?)\b/gi, "<font class=code-number>$1</font>");	
	// attributes
	code = code.replace( /(\{[^\r\n\}]*\})/g, function(match,p) {
		return "<font class=code-attribute>"+Sanitize(p)+"</font>";
	});
	// strings
	code = code.replace( /("[^\r\n"]*")/g, function(match,p) {
		// hack to get around comments inside strings
		var s = Sanitize(p).replace( /'/g, "=SINGLE-QUOTE=")
		return "<font class=code-string>"+s+"</font>";
	});
	// comments
	code = code.replace( /('.*)$/gm, function(match,p) {
		return "<font class=code-comment>"+Sanitize(p)+"</font>";
	});
	code = code.replace( /^(Rem(\n|.)*EndRem)$/gim, function(match,p) {
		return "<font class=code-comment>"+Sanitize(p)+"</font>";
	});
	// hack to get around comments inside strings
	return code.replace( /=SINGLE-QUOTE=/g, "'");
}

// highlight all codebox elements on the page
var codes = document.evaluate( "//pre[@class='code']", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
for( var i=0; i<codes.snapshotLength; i++) {
	var e = codes.snapshotItem(i);
	e.id = "greasemonkey_bbcode_"+(i+1);
	e.innerHTML = HighlightSource( e.innerHTML);
	var a = document.createElement("a");
		a.href = "#";
		a.id = "greasemonkey_bbcode_"+(i+1)+"_a"
		a.addEventListener('click', selectCodeBoxCode, false);
		a.appendChild( document.createTextNode("Select Above Code") );
		a.style.marginTop = "0";
		e.style.marginBottom = "0";
	e.parentNode.insertBefore(a, e.nextSibling);
}

var codeboxes = document.evaluate( "//textarea[@class='codebox']", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
for( var i=0; i<codeboxes.snapshotLength; i++) {
	
	var e = codeboxes.snapshotItem(i);
	var c = document.createElement("pre");
	c.id = "greasemonkey_bbcodebox_"+(i+1);
	c.className = "codebox";
	c.style.overflow = "auto";
	c.style.width = 800;
	c.style.height = 300;
	c.style.fontSize = "1.5em";
	c.innerHTML = HighlightSource( e.innerHTML);
	e.parentNode.insertBefore( c, e);
	e.parentNode.removeChild(e);
	var a = document.createElement("a");
		a.href = "#";
		a.id = "greasemonkey_bbcodebox_"+(i+1)+"_a"
		a.addEventListener('click', selectCodeBoxCode, false);
		a.appendChild( document.createTextNode("Select Above Code") );
		a.style.marginTop = "0";
		c.style.marginBottom = "0";
	c.parentNode.insertBefore(a, c.nextSibling);
}

function selectCodeBoxCode(event){
	var userSelection;
	if (window.getSelection) {
		userSelection = window.getSelection();
	}	
	if (document.createRange){
		var oRange = document.createRange();
		var target = document.getElementById( this.id.substring( 0, this.id.length - 2 ) );
		oRange.selectNodeContents(target);
		userSelection.addRange(oRange);
	}
	event.preventDefault()
	return false;
}

grable

(Posted 2008) [#12]

I just modified this code, added a link at the bottom of the newly created code blocks that allows you to select the code.

Thanks for sharing :D

Ive updated the script at userscript.org with your changes, hope you dont mind.

plash

(Posted 2008) [#13]

Nice addition!

There is a problem when highlighting Rem/End Rem blocks (the script only handles Rem/EndRem):

Rem 
a block comment
End Rem
Function Uhoh(snap!)
End Function

Print "~n"

Actually, it seems like its not even highlighting Rem/EndRem blocks anymore..

grable

(Posted 2008) [#14]

it seems like its not even highlighting Rem/EndRem blocksanymore..

Thanks for letting me know, its fixed now =)

Perturbatio

(Posted 2008) [#15]

I've noticed a (slightly) handy side effect of my code addition, if someone has split code into multiple boxes, you can just click [Select Above Code] for each one and it will continue to add to the selection, so you can copy it all at once instead of back and forthing.

hope you dont mind.

Not at all.

Digital Anime

(Posted 2008) [#16]

This option works great, it makes this forum soooo better readable!!!

Thanks a whole lot :-)

Czar Flavius

(Posted 2008) [#17]

I just saw this :D

Perturbatio

(Posted 2008) [#18]

If anyone's interested, I've just made this: http://www.blitzbasic.com/Community/posts.php?topic=78196 (adds forum codes buttons and modifies the post textarea)

plash

(Posted 2008) [#19]

The "don't format comment if in a string" part isn't working either, see here (fredborg's code, you don't even have to scroll down, its the first Print call): http://www.blitzbasic.com/Community/posts.php?topic=50045&hl=dll

EDIT: The whole code in his post doesn't format correctly, when the comment in string thing gets fixed be sure to check it again, there could be something else buggerd up.

EDIT2: [Select Above Code] doesn't work on his post either.

Perturbatio

(Posted 2008) [#20]

[Select Above Code] doesn't work on his post either.

my fault (I think)

grable

(Posted 2008) [#21]

The "don't format comment if in a string" part isn't working

That was my fault, for copying Perturbatios code verbatim off the forum ;)
It should be fixed now. The other error i cant seem to reproduce...

Oh and im also using Perturbatios forum helper script (thanks!)

Perturbatio

(Posted 2008) [#22]

It should be fixed now. The other error i cant seem to reproduce...

It only occurs when you have my script running after yours, changing the order in greasemonkey seems to solve it.

plash

(Posted 2008) [#23]

It only occurs when you have my script running after yours, changing the order in greasemonkey seems to solve it.

Works for me too!

Perturbatio

(Posted 2008) [#24]

I think I know what's causing it.

I think it's a result of my script using innerHTML instead of transferring the DOM nodes, rewriting innerHTML doesn't re-attach the eventListeners. I'll try changing my code to shift the nodes instead. (I knew innerHTML was going to come back and bite me, I don't normally use it when writing code at work).

Perturbatio

(Posted 2008) [#25]

fixed this now (I hope), seems to work for me regardless of the script order.

grable

(Posted 2008) [#26]

Ive updated the script with Line Numbering if anyone is interested. Check the image in the top post as to how it looks.

degac

(Posted 2008) [#27]

Great!
Thank you very much!

Perturbatio

(Posted 2008) [#28]

Yup, thanks :)