• Forum
  • Lounge
  • Anyone know where i can find something l

 
Anyone know where i can find something like this?

Mythios (1058)
Alright so for my website (I've totally revamped it and what not) I want to make a code highlighter for source code / tutorials I've posted.

At the moment I'm just using some css:
1
2
3
4
5
6
7
8
9
10
 
div.code
{
	font:1em "Courier New";
	margin: 10px auto 10px auto;
	background-color: #FFFFFF;
	border: thick solid #555555;
	color: #000000;
	white-space: pre;
	font-size: 12;
}


So the code stays neat and in a box. But what I want to do now is somehow make a small javascript function that scans the text inside the html file etc :
1
2
3
4
5
 
<div class="code">float TimerTicksPerSecond = 0;
float TimerTicksPerMillisecond = 0;
int value = 0;
std::string s = "hello world";
</div>

and can format it so float and int is blue, "hello world" is red etc. Be a great help if someone can point me in the right direction. As from the javascript I've done myself I can't see it being to hard. I'm just unsure how to scan for text inside like I have above.

Cheers Myth.
moorecm (1932)
This sounds very similar to what I have been working on for my website. I run the source file through a Perl script that inserts span tags (of various classes) around the lexical elements of the language. It's actually not as easy as it sounds--depending, of course, on what elements you aim to style.


PanGalactic (1658)
I just use a moinmoin wiki on my web site for posting code. It has built-in code formatters for a number of languages.

http://moinmo.in/HelpOnParsers

Moinmoin uses this internally: http://pygments.org/
Last edited on
DrChill (574)
Where is your website?
Mythios (1058)
My old one is still up - think it's in my profile but I've made a new one which I'm still doing some finishing touches. I'll let use know of it once I'm done :)
Mythios (1058)
Been having some fun got it partially working. Just need to know how to convert my findings to a string etc. And then find words in that string and replace there color?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<script type="text/javascript">
document.getElementsByClassName = function(cl)
{
	var retnode = [];
	var myclass = new RegExp('\\b'+cl+'\\b');
	var elem = this.getElementsByTagName('*');
	for (var i = 0; i < elem.length; i++) 
	{
		var classes = elem[i].className;
		if (myclass.test(classes)) retnode.push(elem[i]);
	}
	return retnode;
};
</script>

<script type="text/javascript"> 
window.onload = function () 
{
	var start = new Date();
	var matches = document.getElementsByClassName("code");	

	for(var i = 0; i < matches.length; i++)
	{
		elem = matches[i];
		// Change stuff here.
	}
};
</script>
Mythios (1058)
Well by changing it to this I can scan through and find the first int inside each code box (this isn't helpful to me lol) but I want to be able to do them all.

If you know how I can change this or a better way to do it (that is javascript) let me know. I can't figure out how to turn innerHTML into a string then go through it and change everything I need to and set it back.

Thanks :)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
document.getElementsByClassName = function(className)
{
	var classList = [];
	var myclass = new RegExp('\\b'+className+'\\b');
	var elem = this.getElementsByTagName('*');
	for (var i = 0; i < elem.length; i++) 
	{
		var classes = elem[i].className;
		if (myclass.test(classes)) 
		{
			var str = elem[i].innerHTML.replace("int ", "\<font color=\"0077FF\"\>int \</font\>");
			var str2 = str.toString();

			elem[i].innerHTML = str2;
			classList.push(elem[i]);
		}
	}
	return classList;
};

window.onload = function () 
{
	document.getElementsByClassName("code");	
};
moorecm (1932)
Mythios (1058)
I just read through every one of those and downloaded them all haha. They all seem so complex for what they do though. Mine isn't perfect yet as I'm still writing it. (It's not perfect) But it's so tiny: The keywords and what not I've done a little differently and haven't displayed them all. But at the current time it works pretty good.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
document.getElementsByClassName = function(className)
{
	var classList = [];
	var myclass = new RegExp('\\b'+className+'\\b');
	var elem = this.getElementsByTagName('*');
	for (var i = 0; i < elem.length; i++) 
	{
		var classes = elem[i].className;
		if (myclass.test(classes)) 
		{
			classList.push(elem[i]);
		}
	}
	return classList;
};

function wordhighlight(aSourceObject, sWords, sDescrip)
{
	var sText = aSourceObject.innerHTML;

	// http://www.regular-expressions.info/anchors.html
	// /g enables "global" matching. When using the replace() method, specify this modifier to replace all matches, rather than only the first one.
	// /i makes the regex match case insensitive.
	// /m enables "multi-line mode". In this mode, the caret and dollar match before and after newlines in the subject string.
	
	for( var i = 0; i < sWords.length; i++ )
	{
		sText = sText.replace( new RegExp(sWords[i], "g"), sDescrip[i]); 
	}

	aSourceObject.innerHTML = sText;
};

window.onload = function () 
{
	var codeBox = document.getElementsByClassName("code");

	var find = [	"bool ",
			"break",
			"case",
			//etc...

	var desc = [	"\<font color=\"0077FF\"\>bool \</font\>",
			"\<font color=\"0077FF\"\>break\</font\>",
			"\<font color=\"0077FF\"\>case\</font\>",
			// etc....

	for( var i = 0; i < codeBox.length; i++ )
	{
		wordhighlight(codeBox[i], find, desc);
	}
};
moorecm (1932)
A few more ideas. If you really want to do a class job, consider sitting down and jotting down your requirements. Be very specific as to what your expectations are and if it may be scaled to include more features in the future.

Since you seem to be using regular expressions, I'll post mine from my Perl script. I'll put them in my thread, though because they're more related to it than this one. Here's a link: http://www.cplusplus.com/forum/lounge/18223/
DrChill (574)
Also while checking out your website I went to the chat thing and got this:

Internal Server Error

The server encountered an internal error or misconfiguration and was unable to complete your request.

Please contact the server administrator, webmaster@cplusdev.com and inform them of the time the error occurred, and anything you might have done that may have caused the error.

More information about this error may be available in the server error log.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
Apache/2.2.11 (Unix) mod_ssl/2.2.11 OpenSSL/0.9.8e-fips-rhel5 mod_auth_passthrough/2.1 mod_bwlimited/1.4 FrontPage/5.0.2.2635 Server at cplusdev.com Port 80
Mythios (1058)
Thanks DrChill the website you went on is partially broken. Due to I'm creating a new one and i stripped the DB's and everything. It'll all be running soon. If you want to take a look at what I'm currently doing - you can see part of it at http://cplusdev.com/new
DrChill (574)
Looks good so far ;)
Mythios (1058)
Heh, thank you. Any ideas what I could change with the side and top menu. They need something different. Just can't figure out what :P
Topic archived. No new replies allowed.