Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question 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

  • #2
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    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.
    I am still learning English

  • Users who have thanked Amphiluke for this post:

    orgbiz (08-19-2009)

  • #3
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

    Do you have any other ide?

  • #4
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    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.
    I am still learning English

  • #5
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Opps... Yes it's work in FF

    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

    Sorry if I asking too much

    Thanks again for your quick reply

  • #6
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    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>
    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.
    I am still learning English

  • #7
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question New Problem

    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
    Last edited by orgbiz; 08-19-2009 at 08:48 AM. Reason: This problem has resolved, so the new problem I will post it in new thread..


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •