Hi, All Javascript master.... I'm Newbie here... :D
A few week ago i have created javascript code to highlight vb code sintax for my VB Blog. But there is some problems that make me stuck. Before I ask you some questions this is the code:
And this is some question that I want to ask you all:
I want to display code like this:
Code:
If iVar = 1 Then
Text1.Text = "Satu" 'This is comment
ElseIf iVar = 2 Then
Text1.Text = "Dua"
End If
1. Is there any way to read innerHTML line by line?
Original code (If the BR tag removed):
Code:
If iVar = 1 Then
Text1.Text = "Satu" 'This is comment
ElseIf iVar = 2 Then
Text1.Text = "Dua"
End If
Result (It's become one line):
Code:
If iVar = 1 Then Text1.Text = "Satu" 'This is comment ElseIf iVar = 2 Then Text1.Text = "Dua" End If
2. Is there any way to read space indent (space/tab at the beginning of sintax)
Original code:
Code:
If iVar = 1 Then <br />
Text1.Text = "Satu" 'This is comment <br />
ElseIf iVar = 2 Then <br />
Text1.Text = "Dua" <br />
End If <br />
Result (indent missing):
Code:
If iVar = 1 Then
Text1.Text = "Satu" 'This is comment
ElseIf iVar = 2 Then
Text1.Text = "Dua"
End If
3. How to hendle multiple ID?
Original code:
Code:
<code id="vb">
If iVar = 1 Then
Text1.Text = "Satu" 'This is comment
ElseIf iVar = 2 Then
Text1.Text = "Dua"
End If
</code>
<code id="vb">
If iVar = 1 Then
Text1.Text = "Satu" 'This is comment
ElseIf iVar = 2 Then
Text1.Text = "Dua"
End If
</code>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Template</title>
<style type="text/css">
.hilightkw {
color: #0000FF;
}
.hilightcomm {
color: #008000;
}
</style>
<script type="text/javascript">
var vbKeywords = new Array("If","Then","Else","ElseIf","End");
function HiLightCode(codeBlock) {
var _code = codeBlock.innerHTML;
var re = / /g;
_code = _code.replace(re, " ");
for (var i = 0; i < vbKeywords.length; i++) {
var re = new RegExp(vbKeywords[i], "gi");
_code = _code.replace(re, "<span class=\"hilightkw\">" + vbKeywords[i] + "</span>");
delete re;
}
var lines = _code.split("\n");
var outputCode = "";
for (var i = 0; i < lines.length; i++) {
var re = new RegExp("('.+)");
outputCode += lines[i].replace(re, "<span class=\"hilightcomm\">$1</span>") + "<br />";
delete re;
}
codeBlock.innerHTML = outputCode;
}
function HiLightAll() {
var _codes = document.getElementsByTagName("code");
for (var i = 0; i < _codes.length; i++) {
if (_codes[i].className == "vb") HiLightCode(_codes[i]);
}
}
window.onload=HiLightAll;
</script>
</head>
<body>
<div>
<code class="vb">
If iVar = 1 Then
Text1.Text = "Satu" 'This is comment
ElseIf iVar = 2 Then
Text1.Text = "Dua"
End If
</code>
<code class="vb">
If iVar = 1 Then
Text1.Text = "Satu" 'This is comment
ElseIf iVar = 2 Then
Text1.Text = "Dua"
End If
</code>
</div>
</body>
</html>
Note that use the same ids in several objects is not valid.
Hey Thanks for the quick reply but the result not quite like what I want, the result of your code is:
Code:
If iVar = 1 Then Text1.Text = "Satu" 'This is comment ElseIf iVar = 2 Then Text1.Text = "Dua" End If
If iVar = 1 Then Text1.Text = "Satu" 'This is comment ElseIf iVar = 2 Then Text1.Text = "Dua" End If
Your code come in one line and I want result like this:
Code:
If iVar = 1 Then
Text1.Text = "Satu" 'This is comment
ElseIf iVar = 2 Then
Text1.Text = "Dua"
End If
If iVar = 1 Then
Text1.Text = "Satu" 'This is comment
ElseIf iVar = 2 Then
Text1.Text = "Dua"
End If
This "bug" is for IE only. If you try it with FF or Opera for instance, you'll see that it works as expected. So far, I have no any ideas on how to bring it to work in IE, since this browser returns innerHTML property as a single string without line breaks ("\n") at all.
But the problem is... your code is a high level code for me
Would you give the code comments for each line in that code for me... I'm still newbie here
If use pre instead of code then it works in IE too!
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Template</title>
<style type="text/css">
.hilightkw {
color: #0000FF;
}
.hilightcomm {
color: #008000;
}
</style>
<script type="text/javascript">
var vbKeywords = new Array("If","Then","Else","ElseIf","End");
function HiLightCode(codeBlock) {
var _code = codeBlock.innerHTML;
var re = / /g;
_code = _code.replace(re, " ");
for (var i = 0; i < vbKeywords.length; i++) {
var re = new RegExp(vbKeywords[i], "gi");
_code = _code.replace(re, "<span class=\"hilightkw\">" + vbKeywords[i] + "</span>");
delete re;
}
var lines = _code.split("\n");
var outputCode = "";
for (var i = 0; i < lines.length; i++) {
var re = new RegExp("('.+)");
outputCode += lines[i].replace(re, "<span class=\"hilightcomm\">$1</span>") + "<br />";
delete re;
}
codeBlock.innerHTML = outputCode;
}
function HiLightAll() {
var _codes = document.getElementsByTagName("pre");
for (var i = 0; i < _codes.length; i++) {
if (_codes[i].className == "vb") HiLightCode(_codes[i]);
}
}
window.onload=HiLightAll;
</script>
</head>
<body>
<div>
<pre class="vb">
If iVar = 1 Then
Text1.Text = "Satu" 'This is comment
ElseIf iVar = 2 Then
Text1.Text = "Dua"
End If
</pre>
<pre class="vb">
If iVar = 1 Then
Text1.Text = "Satu" 'This is comment
ElseIf iVar = 2 Then
Text1.Text = "Dua"
End If
</pre>
</div>
</body>
</html>
Quote:
Would you give the code comments for each line in that code for me... I'm still newbie here
Sorry, time is lacking for a full explanation. Maybe later.
Before you post, read our: 
Simple Code Highlight. Newbie please help!!!
in that code for me... I'm still newbie here 
