Using javascript to highlight syntax in code examples.

Question

So, I was looking how to do something similar to Stackoverflow's code thing:

e.g. The "var" is colored and "test" isn't

var test

How would I write a JavaScript function to do this?

This is what I tried

if ("var")  {
document.getElementByTagName("code").style.color="purple";
}

So when the text "var" is in a "code" element, it turns JUST "var" purple.

You are in a wrong way right now. You should improve your html and javascript knowledge first before trying do this thing , because you are stucked in wrong concepts that im my option will retard your learning. — Wagner Leonardi
– Wagner Leonardi, Commented Nov 6, 2013 at 1:37
@Wagner Thanks, I'm pretty familiar with HTML and CSS, I was just wondering if there was a way to do it faster with JavaScript. — Roooooo
– Roooooo, Commented Nov 6, 2013 at 1:42
If you're actually looking to do proper syntax highlighting, it's a lot more complex than that. It would either have to be a very complicated regular expression (for most common forms of syntax - still doesn't work fully) or you'd have to tokenise your characters into an AST and map the relevant parts to the original code accordingly. — Qantas 94 Heavy
– Qantas 94 Heavy, Commented Nov 6, 2013 at 2:41

Mike Lyons · Accepted Answer · 2013-11-06 02:04:44Z

2

I would wrap the variable name in a span

<code>
  var <span class="variable-name">test</span>
</code>

Then color just the span, jQuery makes this easier

$('code span.variable-name').css('color', 'purple');

However, There are also syntax highlighting libraries that would make this whole thing easier since it's largely a solved problem :) Here is an example

edited Nov 6, 2013 at 2:04

answered Nov 6, 2013 at 1:36

Mike Lyons

1,7942 gold badges21 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ehdv Over a year ago

Doing it yourself would require implementing a decent chunk of a lexer, so a library is definitely the way to go.

Roooooo Over a year ago

I was looking to do it without an extra HTML. Is this possible?

Mike Lyons Over a year ago

Certainly possible, I would look into a syntax highlighting library like: craig.is/making/rainbows

Mike Lyons Over a year ago

Thanks for accepting, I assume you accepted because of my comment above. ^

mVChr · Accepted Answer · 2013-11-06 01:48:33Z

0

Here's a quick and dirty (emphasis on dirty) way to do it with regex replace if:

You don't care about actually parsing the syntax
You know the code elements only contain clean text, no child tags

If that's so, you can do something like:

var els = document.getElementsByTagName('code'),
    code;

for (var i = 0; i < els.length; i++) {
    code = els[i].innerHTML;
    els[i].innerHTML = code.replace(
        /\bvar\b/g,
        '<span style="color: #f00;">var</span>'
    );
}

Yes, it's better practice to use a class instead of inline style, but seeing as not following the above two points is also bad practice, this is just for example's sake.

See demo

answered Nov 6, 2013 at 1:48

mVChr

50.3k11 gold badges111 silver badges105 bronze badges

Comments

ElvinD · Accepted Answer · 2013-11-06 02:11:32Z

0

HTML and js element

 <div>
   var test;
 </div>


<script>
 var varText = $( "div" ).text().split( " " ).join( "</span> <span>" );
 newText = "<span>" + varText + "</span>";

$( "div" )
.html( varText )
.find( "span" )
.end()
.find( ":contains('var')" )
.css({
  "color": "purple",

});

answered Nov 6, 2013 at 2:11

ElvinD

6951 gold badge7 silver badges10 bronze badges

Collectives™ on Stack Overflow

Using javascript to highlight syntax in code examples.

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related