Javascript & CSS Highlighter

[Master_script_maker]

Many people have been seeking this for javascript and css, so I have created a highlighter which will add colors. This is still a work in progress and is not efficient for long code, but it should work. Try it out: http://masterscriptmaker.co.cc/tools/hl.php

[Snookerman]

Nice! This should be really useful here on the forums (Nile has really put a lot of work into highlighting his codes :D). It still has some quirks but I'm sure you'll get to them.

[Master_script_maker]

Yeah. Actually If you look at his signature you'll see he has been using my highlighter.

[Nile]

Yes, I have been snookerman. :D Now make a php one with the highlighting of Notepad++.

Give it a little style MSM. (http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/)

It also seems that I have to have indentation for the css one to work, so either run it through a beautifier, make a beautifier, or fix it. Lol. :D
Also, short hexed color funny (start with #), your regexp is probably wrong.

Maybe Ddadmin would be willing to make a little window at the top of the quick reply thing(like "Phrase Center"), having this. And at the bottom: made by Master_Script_Maker. :D

[Master_script_maker]

I've fixed both css problems, and am now working of styling the form.

[Nile]

I'll work on the styling if you like.

This (http://www.emblematiq.com/projects/niceforms/) looks pretty nice.

I made a little preview of it, if you want me to make it for you:
http://localhostr.com/files/87ae29/capture.png

[Master_script_maker]

No thanks, I've already started. ;)

[Nile]

Oh, I've finished. :D

Tell me if you like it:
http://localhostr.com/files/1a3fca/capture.png

[Master_script_maker]

I made a style for it along with javascript to apply it, but yours looks nicer nile.

[Snookerman]

This is a bit off topic. If you firebug the radio buttons, they disappear :eek:

[Master_script_maker]

Yes, it seems like it does not fire the mouseover event. Clicking the text brings them back though.

[Nile]

So, do you want it or not. :D

[Master_script_maker]

No thanks.

[Nile]

Ok. :D

[boogyman]

This is a good idea, but I found a few bugs in the script. Please see the attached screen shots.

[Schmoopy]

You'll need to upload them again in a higher resolution, can't make out what's going wrong.

[Snookerman]

@boogyman - If you don't have a server: http://beta.localhostr.com/ (http://beta.localhostr.com/)

[Master_script_maker]

I fixed the javascript part, and am totally rewriting the css part to be more efficient.

[techietim]

This CSS code does not get highlighted correctly:


body{
background: url(my{FILE}.png);
}

[Master_script_maker]

This is because of the { and }. The css portion is based on syntax and will break if the syntax seems to be incorrect (Notepad++ also breaks with your code).

[techietim]

Yeah, I knew what was causing it, but it would be nice if it would colour it correctly, considering it is correct CSS.

[Snookerman]

Is it really valid CSS?? I've never seen that before. What does it do?

[Snookerman]

Yeah, I looked at that too but if you read it carefully it doesn't say curly braces aren't allowed. Also, the W3C CSS validator (http://jigsaw.w3.org/css-validator/) doesn't complain. I'm just curious to what it actually does.
Oops, I see you removed your post.

[techietim]

Really? It's not valid?

Did you run it through here: http://jigsaw.w3.org/css-validator/#validate_by_input


body {
background : url(my{FILE}.png);
}

[Master_script_maker]

@Snookerman: yeah, i was mistaken so i deleted it :p

I changed the css highlighter. It is now almost fully functional. The only part that is buggy is when you have comments inside the {}. Hopefully most of the bugs are gone now ;)

[Snookerman]

Really? It's not valid?

Did you run it through here: http://jigsaw.w3.org/css-validator/#validate_by_input
I did run it through the validator and I had no errors:

the W3C CSS validator (http://jigsaw.w3.org/css-validator/) doesn't complain.
Then again, it doesn't throw an error for this either so I guess almost anything goes:

body {
background: url(my<-!?+*§~^½[{&%¤#@€µ:FILE:µ€@#¤%&}]½^~§*+?!->.png);
}
So I'm still curious techieteam, what does the code you posted do, what is it for?
Ahh.. now I get it, it's not CSS, it's just part of the name of the file, I tried renaming a file in Windows and I was allowed to use curly braces in the name.

[boogyman]

You'll need to upload them again in a higher resolution, can't make out what's going wrong.

Most of the issues have since been resolved, however I did find the issues below.
And yes I know the background-image declaration won't validate.

http://localhostr.com/files/68c4b0/css.png

http://localhostr.com/files/68c4b0/css.png



@boogyman - If you don't have a server: http://beta.localhostr.com/ (http://beta.localhostr.com/)

Thanks, I do have a server, but I am having some technical hardware issues.

[Master_script_maker]

Well you must end the values in a semicolon:
selector {property:value !important;}

div p#id.class:hover {background-image: url('/path/image.png') no-repeat left top;}

body > h2#id.class:first-child {overflow:hidden;text-decoration:underline;}

ul li, li + li {display:inline /* comment */;}

div:nth-of-type(n+2), p > span {property:value;} here is the highlighter's output:
selector {
property:value !important;
}
div p#id.class:hover {
background-image: url('/path/image.png') no-repeat left top;
}
body > h2#id.class:first-child {
overflow:hidden;
text-decoration:underline;
}
ul li, li + li {
display:inline /* comment */;
}
div:nth-of-type(n+2), p > span {
property:value;
}

[Nile]

Someone dig this!