Page 1 of 1

HTML Syntax Highlighter

Posted: Mon Oct 13, 2003 10:32 am
by Nay
Okay, so I was bored. I just though of a way of a simple highlighting of a HTML script from Dreamweaver's colors. Here it is:

Code: Select all

<html>

<head>

<title>HTML Syntax Highlighter</title>

<style type="text/css">

body {
font-family:verdana;
font-size:xx-small;
}

.code {
font-family:courier new;
font-size:x-small;
background:#dcdcdc;
width:500px;
border-width:1;
border-style: solid;
border-color: #999999;
padding:5px;
}

textarea {
font-family:courier new;
font-size:x-small;
background:#ffffff;
width:500px;
height:100px;
border-width:1;
border-style: solid;
border-color: #000000;
scrollbar-face-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #ffffff;
scrollbar-track-color: #ffffff;
scrollbar-arrow-color: #cccccc;
}

input {
font-family:verdana;
font-size:xx-small;
background:#cccccc;
border-width:1;
border-style: solid;
border-color: #000000;
}
</style>

</head>

<body>

<p>
Highlighted Code:
</p>

<div class="code">
<?php

$action = $_GET['action'];

if(isSet($action)) {

if(!empty($_POST['code'])) {

$code = $_POST['code'];
htmlspecialchars($code);

// tags

$syntax = array();
$syntax[0] = "b";
$syntax[1] = "strong";
$syntax[2] = "i";
$syntax[3] = "em";
$syntax[4] = "u";
$syntax[5] = "a";
$syntax[6] = "font";
$syntax[7] = "script";
$syntax[8] = "style";
$syntax[9] = "note";

// tag's colors

$colors = array();
$colors['b'] = "0066ff";
$colors['strong'] = "0066ff";
$colors['i'] = "0066ff";
$colors['em'] = "0066ff";
$colors['u'] = "0066ff";
$colors['a'] = "00cc33";
$colors['font'] = "0000ff";
$colors['script'] = "cc3300";
$colors['style'] = "cc00ff";
$colors['note'] = "6666cc";

$all = count($syntax);

for($i=0;$i<$all;$i++) {

$tag = $syntax[$i];
$color = $colors[$tag];

$start = "<" . $tag;
$end = "</" . $tag . "><br />";

$s_replace = "<span style="color:" . $color . ";">" . start;
$e_replace = $end . "</span>";

$code = str_replace($start, $s_replace, $code);
$code = str_replace($end, $e_replace, $code);

echo $code;

}

} else {
echo "Please insert the HTML code below"; // if the posted code is blank
}

} else {
echo "Please insert the HTML code below"; // if the code is NOT posted
}

?>
</div>

<br />
<form name="script" method="post" action="?action=highlight">
<textarea name="code"></textarea><br />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</form>

</body>

</html>
Now, since I wrote it, it's obvious that It doesn't work so correctly. No errors are thrown up so I'm scratching my head a little on this one O_o.

-Nay

Posted: Mon Oct 13, 2003 7:26 pm
by JAM
Some issues and tweaks.

Code: Select all

// main issue
htmlspecialchars($code); // no
$code = htmlspecialchars($code); // better
I changed around it abit to make it more 'me', so ignore linenumbers, but:

Code: Select all

// Notice: Undefined index: action in \index.php on line 51
// no
$action = $_GET['action'];
if(isSet($action)) { 
// better
if(isset($_GET['action'])) {
$action = $_GET['action'];
// not that you really use it (yet)...

// Notice: Use of undefined constant start - assumed 'start' in \index.php on line 89
$s_replace = "<span style="color:" . $color . ";">" . start;  // no
$s_replace = "<span style="color:" . $color . ";">" . $start; // better
Neat so far. ;)

Posted: Tue Oct 14, 2003 3:41 am
by Nay
Thanks JAM! :D

Now behold the very simple HTML syntax highlighter!

Code: Select all

<html> 

<head> 

<title>HTML Syntax Highlighter</title> 

<style type="text/css"> 

body { 
font-family:verdana; 
font-size:xx-small; 
} 

.code { 
font-family:courier new; 
font-size:x-small; 
background:#dcdcdc;
color:#0033cc;
width:500px; 
border-width:1; 
border-style: solid; 
border-color: #999999; 
padding:5px; 
} 

textarea { 
font-family:courier new; 
font-size:x-small; 
background:#ffffff; 
width:500px; 
height:100px; 
border-width:1; 
border-style: solid; 
border-color: #000000; 
scrollbar-face-color: #ffffff; 
scrollbar-shadow-color: #ffffff; 
scrollbar-darkshadow-color: #ffffff; 
scrollbar-highlight-color: #ffffff; 
scrollbar-3dlight-color: #ffffff; 
scrollbar-track-color: #ffffff; 
scrollbar-arrow-color: #cccccc; 
} 

input { 
font-family:verdana; 
font-size:xx-small; 
background:#cccccc; 
border-width:1; 
border-style: solid; 
border-color: #000000; 
} 
</style> 

</head> 

<body> 

<p> 
Highlighted Code: 
</p> 

<div class="code"> 
<?php 

$action = $_GET['action']; 

if(isSet($action)) { 

if(!empty($_POST['code'])) { 

$code = $_POST['code']; 
$code = htmlspecialchars($code);
$code = nl2br($code);

// tags 

$syntax = array(); 
$syntax[0] = "b"; 
$syntax[1] = "strong"; 
$syntax[2] = "i"; 
$syntax[3] = "em"; 
$syntax[4] = "u"; 
$syntax[5] = "a"; 
$syntax[6] = "font"; 
$syntax[7] = "script"; 
$syntax[8] = "style"; 
$syntax[9] = "note";

// tag's colors 

$colors = array(); 
$colors['b'] = "0066ff"; 
$colors['strong'] = "0066ff"; 
$colors['i'] = "0066ff"; 
$colors['em'] = "0066ff"; 
$colors['u'] = "0066ff"; 
$colors['a'] = "00cc33"; 
$colors['font'] = "0000ff"; 
$colors['script'] = "cc3300"; 
$colors['style'] = "cc00ff"; 
$colors['note'] = "6666cc"; 

$all = count($syntax); 

for($i=0;$i<$all;$i++) { 

$tag = $syntax[$i]; 
$color = $colors[$tag]; 

if($tag=="note") {

$start = "<!--";
$end = "//--><br />";

$s_replace = "<em><span style="color:#000000;">" . $start;
$e_replace = $end . "</span></em>";

$code = str_replace($start, $s_replace, $code);
$code = str_replace($end, $e_replace, $code);

} else {

$start = "<" . $tag; 
$end = "</" . $tag . "><br />"; 

$s_replace = "<span style="color:" . $color . ";">" . $start;
$e_replace = $end . "</span>";

$code = str_replace($start, $s_replace, $code);
$code = str_replace($end, $e_replace, $code);

}

} 

echo $code;

} else { 
echo "Please insert the HTML code below"; // if the posted code is blank 
} 

} else { 
echo "Please insert the HTML code below"; // if the code is NOT posted 
} 

?> 
</div> 

<br /> 
<form name="script" method="post" action="?action=highlight"> 
<textarea name="code"></textarea><br /> 
<input type="submit" value="Submit" /> 
<input type="reset" value="Reset" /> 
</form> 

</body> 

</html>
:lol: Any suggestions? :lol:

-Nay

Posted: Tue Oct 14, 2003 3:49 am
by JAM
Well...

"<b>JAM</b>"
It should not colourzie the entire string above, but only <b> and </b>. JAM should be treated as, in this case, a string (#000000).

"<foo name="a_foo" bar="kitten">something</foo>"
foo blue, a_foo & bar green, kitten red, something black.

I think you see what I'm aiming at? This is not yet added in the above version, but I want to make your work. ;)

Posted: Tue Oct 14, 2003 4:02 am
by Nay
Yeah, I know what your getting at. I wanted to do that but I knew I was going to have to use Regular Expressions and.........and.........I'm scared of Regular Expressions !!!! :(

lol.........I just hate the mess up everytime I try it :(.

-Nay

Posted: Tue Oct 14, 2003 4:07 am
by JAM
"Knowing by practise".
Stop looking at this board, and get to work! :)

Seriously, yah, it's not really as fun as people might think. Tho I belive that it's a good enough idea so I don't want it to go wasted.

Post what you came up with (or not) in 12h, then I'm home from work and will take some serious look at this also. Happy coding.

Posted: Tue Oct 14, 2003 4:11 am
by Nay
Okay, so I'm getting started. So I'm not straight away going to add Regular Expressions. Gonna play around with it first, until I understand it.

I now know:

Code: Select all

<[a-z]+>
Well, I hope that's right. It should be able to identify any tag with that :D - I think.

-Nay