HTML Syntax Highlighter

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
Nay
Forum Regular
Posts: 951
Joined: Fri Jun 20, 2003 11:03 am
Location: Brisbane, Australia

HTML Syntax Highlighter

Post 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
User avatar
JAM
DevNet Resident
Posts: 2101
Joined: Fri Aug 08, 2003 6:53 pm
Location: Sweden
Contact:

Post 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. ;)
Nay
Forum Regular
Posts: 951
Joined: Fri Jun 20, 2003 11:03 am
Location: Brisbane, Australia

Post 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
User avatar
JAM
DevNet Resident
Posts: 2101
Joined: Fri Aug 08, 2003 6:53 pm
Location: Sweden
Contact:

Post 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. ;)
Nay
Forum Regular
Posts: 951
Joined: Fri Jun 20, 2003 11:03 am
Location: Brisbane, Australia

Post 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
User avatar
JAM
DevNet Resident
Posts: 2101
Joined: Fri Aug 08, 2003 6:53 pm
Location: Sweden
Contact:

Post 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.
Nay
Forum Regular
Posts: 951
Joined: Fri Jun 20, 2003 11:03 am
Location: Brisbane, Australia

Post 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
Post Reply