/    Sign up×
Community /Pin to ProfileBookmark

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

Copy linkTweet thisAlerts:
Feb 02.2010

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;
}[/CODE]

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> [/CODE]

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.

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@skywalker2208Feb 02.2010 — Take a look at the string methods.

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

That should help you search for a word.
Copy linkTweet thisAlerts:
@mythios1authorFeb 02.2010 — Thanks for the speedy reply. But how can i extract the text into the string then manipulate and replace it?

Thanks again.
Copy linkTweet thisAlerts:
@skywalker2208Feb 02.2010 — 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()
Copy linkTweet thisAlerts:
@mythios1authorFeb 03.2010 — 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.
Copy linkTweet thisAlerts:
@mythios1authorFeb 03.2010 — 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>[/CODE]

How can I convert my finding here to a string and lets say replace the word int with the color blue?

Thanks ?
Copy linkTweet thisAlerts:
@mythios1authorFeb 03.2010 — 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");
};
[/CODE]
Copy linkTweet thisAlerts:
@mythios1authorFeb 03.2010 — Yes that is what i'd like to do. But I want to have my own script for doing it ?
×

Success!

Help @mythios1 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...