www.webdeveloper.com
Results 1 to 9 of 9

Thread: How to use js to do some syntax highlighting/finding?

  1. #1
    Join Date
    Feb 2010
    Posts
    6

    How to use js to do some syntax highlighting/finding?

    Alright so for my website (I've totally revamped it and what not) I want to make a code highlighter for source code / tutorials I've posted.

    At the moment I'm just using some css:

    Code:
    div.code
    {
    	font:1em "Courier New";
    	margin: 10px auto 10px auto;
    	background-color: #FFFFFF;
    	border: thick solid #555555;
    	color: #000000;
    	white-space: pre;
    	font-size: 12;
    }

    So the code stays neat and in a box. But what I want to do now is somehow make a small javascript function that scans the text inside the html file etc :

    Code:
    <div class="code">float TimerTicksPerSecond = 0;
    float TimerTicksPerMillisecond = 0;
    int value = 0;
    std::string s = "hello world";
    </div>
    and can format it so float and int is blue, "hello world" is red etc. Be a great help if someone can point me in the right direction. As from the javascript I've done myself I can't see it being to hard. I'm just unsure how to scan for text inside like I have above.

    Cheers Myth.

  2. #2
    Join Date
    Mar 2007
    Posts
    946
    Take a look at the string methods.

    http://www.w3schools.com/jsref/jsref_obj_string.asp

    That should help you search for a word.

  3. #3
    Join Date
    Feb 2010
    Posts
    6
    Thanks for the speedy reply. But how can i extract the text into the string then manipulate and replace it?

    Thanks again.

  4. #4
    Join Date
    Mar 2007
    Posts
    946
    The link I provided you shows you how to manipulate strings. For extracting the text I would suggest adding an id to the div and then using the document.getElementById()

  5. #5
    Join Date
    Feb 2010
    Posts
    6
    thank you - that was what like what I was looking for.

    EDIT: The way I've used the css in my site - If I change it to using an ID then I can only post 1 section of code? Sites are saying use ID's if you only need to display it once. Etc a menu bar.
    Last edited by mythios1; 02-02-2010 at 09:46 PM. Reason: Added some text

  6. #6
    Join Date
    Feb 2010
    Posts
    6
    Sorry to be a pain but I got this working for me after some tweaking and what not.

    Code:
    <script type="text/javascript">
    	document.getElementsByClassName = function(cl)
    	{
    		var retnode = [];
    		var myclass = new RegExp('\\b'+cl+'\\b');
    		var elem = this.getElementsByTagName('*');
    		for (var i = 0; i < elem.length; i++) 
    		{
    			var classes = elem[i].className;
    			if (myclass.test(classes)) retnode.push(elem[i]);
    		}
    		return retnode;
    	};
    	</script>
    
    	<script type="text/javascript"> 
    	window.onload = function () 
    	{
    		var start = new Date();
    		var matches = document.getElementsByClassName("code");	
    
    		for(var i = 0; i < matches.length; i++)
    		{
    			elem = matches[i];
    			// Change stuff here.
    		}
    	};
    	</script>
    How can I convert my finding here to a string and lets say replace the word int with the color blue?

    Thanks

  7. #7
    Join Date
    Feb 2010
    Posts
    6
    Well by changing it to this I can scan through and find the first int inside each code box (this isn't helpful to me lol) but I want to be able to do them all.

    If you know how I can change this or a better way to do it (that is javascript) let me know. I can't figure out how to turn innerHTML into a string then go through it and change everything I need to and set it back.

    Thanks

    Code:
    document.getElementsByClassName = function(className)
    {
    	var classList = [];
    	var myclass = new RegExp('\\b'+className+'\\b');
    	var elem = this.getElementsByTagName('*');
    	for (var i = 0; i < elem.length; i++) 
    	{
    		var classes = elem[i].className;
    		if (myclass.test(classes)) 
    		{
    			var str = elem[i].innerHTML.replace("int ", "\<font color=\"0077FF\"\>int \</font\>");
    			var str2 = str.toString();
    
    			elem[i].innerHTML = str2;
    			classList.push(elem[i]);
    		}
    	}
    	return classList;
    };
    
    window.onload = function () 
    {
    	document.getElementsByClassName("code");	
    };

  8. #8
    Join Date
    Feb 2010
    Posts
    184
    sounds like you want to this http://code.google.com/p/syntaxhighlighter/

  9. #9
    Join Date
    Feb 2010
    Posts
    6
    Yes that is what i'd like to do. But I want to have my own script for doing it

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles