CodingForums.com - Resolved Simple Code Highlight. Newbie please help!!!

CodingForums.com (http://www.codingforums.com/index.php)

- DOM and JSON scripting (http://www.codingforums.com/forumdisplay.php?f=15)

- - Resolved Simple Code Highlight. Newbie please help!!! (http://www.codingforums.com/showthread.php?t=174515)

Simple Code Highlight. Newbie please help!!!

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:

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=iso-8859-1" />

<title>Konversi Tipe Data</title>



        <script type="text/javascript">

var awSimpleCodeHighLight = function() {

        //awSimpleCodeHighLight (awSCH) v0.09 RC1

        var vbKeywords = new Array("If","Then","Else","ElseIf","End");

        

        var StrDisplayFormated='';

        var tempStr = new Array();

        var sInner = '';

        var TempsInner = '';

        var sKB = '';

        var dummy = 0;



        savedStr=document.getElementById('vb').innerHTML;

        savedStr = savedStr.replace(/<BR>/g,"BRtag");

        tempStr=savedStr.split(' ');

        

        for(var i=0;i<tempStr.length;i++) {

                sInner = tempStr[i]; //Assign Array to string variable, for compare purpose.

                

                for (var j=0;j<vbKeywords.length;j++) {

                        sKB = vbKeywords[j]; //Assign Array to string variable, for compare purpose.

                        //Compare string

                        if (sInner.toLowerCase() == sKB.toLowerCase()) {

                                StrDisplayFormated+="<font color='#0000FF'>"+ sInner +"</font> ";

                                dummy = 1;

                                break;

                        } else {

                                dummy = 0;

                                if (sInner.substring(0,5) == "BRtag"){ 

                                        TempsInner = sInner.replace(/BRtag/,"");

                                        if (TempsInner.toLowerCase() == sKB.toLowerCase()) {                                                

                                                StrDisplayFormated+="BRtag<font color='#0000FF'>"+ TempsInner +"</font> ";

                                                dummy = 1;

                                                break;

                                        }

                                }

                        }

                }

                

                if (dummy == 0) {

                        StrDisplayFormated += sInner +" ";

                } else if (dummy == 3) {

                        StrDisplayFormated += "<br>"+ sInner +" ";

                }

        }

        //Replace all 'BRtag' with BR tag

        StrDisplayFormated = StrDisplayFormated.replace(/BRtag/g,"<BR>");

        document.getElementById('vb').innerHTML="";

        document.getElementById('vb').innerHTML="<br /> Begin StrDisplayFormated:<br />"+ StrDisplayFormated +"<br /><table cellspacing='0'><tr><td><font size='1%'><a href='http://www.vb6-id.co.cc/'>awSimpleCodeHighLight &copy; 2009 vb6-id.co.cc</a></font></td></tr></table><br />";

}

        window.onload = awSimpleCodeHighLight;

        </script>

</head>



<body>

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

</body>

</html>

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>

Result (just the first code highlighted):

Code:

If iVar = 1 Then

Text1.Text = "Satu" 'This is comment

ElseIf iVar = 2 Then

Text1.Text = "Dua"

End If



awSimpleCodeHighLight © 2009 vb6-id.co.cc 



If iVar = 1 Then 

Text1.Text = "Satu" 'This is comment 

ElseIf iVar = 2 Then 

Text1.Text = "Dua" 

End If

P.S. Sorry for my bad english. :p

Here you are:

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, "&nbsp;");

      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

But thanks for your fast reply. :thumbsup:

Do you have any other ide?

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.

Opps... Yes it's work in FF :thumbsup:

But the problem is... your code is a high level code for me :confused:
Would you give the code comments for each line :D in that code for me... I'm still newbie here :D

Sorry if I asking too much :D

Thanks again for your quick reply :thumbsup:

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, "&nbsp;");

      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.

hi amphiluke...

I have a new problem if I change the keywords array become like this one:

Code:

var vbKeywords = new Array("Abs", "Access", "AddItem", "AddNew", "Alias", "And", "Any", "App", "AppActivate", "Append", "AppendChunk", "Arrange", "As", "Asc", "Atn", "Base", "Beep", "BeginTrans", "Binary", "ByVal", "Call", "Case", "CBool", "CCur", "CDbl", "ChDir", "ChDrive", "Chr", "Chr$", "CInt", "Circle", "Clear", "Clipboard", "CLng", "Close", "Cls", "Command", "Command$", "CommitTrans", "Compare", "Const", "Control", "Controls", "Cos", "CreateDynaset", "CSng", "CStr", "CurDir$", "Currency", "CVar", "CVDate", "Data", "Date", "Date$", "DateSerial", "DateValue", "Day", "Debug", "Declare", "DefCur", "CefDbl", "DefInt", "DefLng", "DefSng", "DefStr", "DefVar", "Delete", "Dim", "Dir", "Dir$", "Do", "DoEvents", "Double", "Drag", "Dynaset", "Each", "Edit", "Else", "ElseIf", "End", "EndDoc", "Environ$", "EOF", "Eqv", "Erase", "Erl", "Err", "Error", "Error$", "ExecuteSQL", "Exit", "Exp", "Explicit", "False", "FieldSize", "FileAttr", "FileCopy", "FileDateTime", "FileLen", "Fix", "For", "Form", "Format", "Format$", "Forms", "FreeFile", "Function", "Get", "GetAttr", "GetChunk", "GetData", "DetFormat", "GetText", "Global", "GoSub", "GoTo", "Hex", "Hex$", "Hide", "Hour", "If", "Imp", "In", "Input", "Input$", "InputBox", "InputBox$", "InStr", "Int", "Integer", "Is", "IsDate", "IsEmpty", "IsNull", "IsNumeric", "Kill", "LBound", "LCase", "LCase$", "Left", "Left$", "Len", "Let", "Lib", "Like", "Line", "LinkExecute", "LinkPoke", "LinkRequest", "LinkSend", "Load", "LoadPicture", "Loc", "Local", "Lock", "LOF", "Log", "Long", "Loop", "LSet", "LTrim", "LTrim$", "Me", "Mid", "Mid$", "Minute", "MkDir", "Mod", "Month", "Move", "MoveFirst", "MoveLast", "MoveNext", "MovePrevious", "MoveRelative", "MsgBox", "Name", "New", "NewPage", "Next", "NextBlock", "Not", "Nothing", "Now", "Null", "Oct", "Oct$", "On", "Open", "OpenDataBase", "Option", "Or", "Output", "Point", "Preserve", "Print", "Printer", "PrintForm", "Private", "PSet", "Put", "QBColor", "Random", "Randomize", "Read", "ReDim", "Refresh", "RegisterDataBase", "Rem", "RemoveItem", "Reset", "Restore", "Resume", "Return", "RGB", "Right", "Right$", "RmDir", "Rnd", "Rollback", "RSet", "RTrim", "RTrim$", "SavePicture", "Scale", "Second", "Seek", "Select", "SendKeys", "Set", "SetAttr", "SetData", "SetFocus", "SetText", "Sgn", "Shared", "Shell", "Show", "Sin", "Single", "Space", "Space$", "Spc", "Sqr", "Static", "Step", "Stop", "Str", "Str$", "StrComp", "String", "String$", "Sub", "System", "Tab", "Tan", "TextHeight", "TextWidth", "Then", "Time", "Time$", "Timer", "TimeSerial", "TimeValue", "To", "Trim", "Trim$", "True", "Type", "TypeOf", "UBound", "UCase", "UCase$", "Unload", "Unlock", "Until", "Update", "Using", "Val", "Variant", "VarType", "Weekday", "Wend", "With", "While", "Width", "Write", "Xor", "Year", "ZOrder");

the result become like this:

Code:

If iVar = 1 Then

  Text1.Text = "Satu" 'This Is comment

ElseIf iVar = 2 Then

  Text1.Text = "Dua"

End If

do you (or any one) have a solution for this?
For some one who have the solution for my problem please give your ide to this thread:
http://www.codingforums.com/showthread.php?t=174920

THXs for any reply