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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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
    Regular Coder
    Join Date
    Jan 2006
    Posts
    568
    Thanks
    6
    Thanked 84 Times in 84 Posts
    It does get more complicated than you'd think, keeping track of context and so on (function is blue but "function" is red etc).

    A quick google brings this up: http://softwaremaniacs.org/soft/highlight/en/download/

    Looks like it supports most of the languages you'd need.

  • #3
    New to the CF scene
    Join Date
    Feb 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok so I've written this up to get the sections I need. But how can i convert a div section to a string and edit words inside of it?

    Code:
    	<script type="text/javascript">
    	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)) 
    				classList.push(elem[i]);
    		}
    		return classList;
    	};
    	</script>
    
    	<script type="text/javascript"> 
    	window.onload = function () 
    	{
    		var start = new Date();
    		var matches = document.getElementsByClassName("title");	
    		
    
    		for(var i = 0; i < matches.length; i++)
    		{
                            //edit string here
    			elem = matches[i];
    			elem.style.color = 'blue';
    		}
    	};
    	</script>

  • #4
    New to the CF scene
    Join Date
    Feb 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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");	
    };


  •  

    Posting Permissions

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