Add class to <code> tag if it's not inside a <pre> tag

Question

I am using the Highlight.js script in my DocPad website.

I want to apply some nice styles to a simple <code> tag (which is what `` in Markdown does), but if I do this then I'm breaking the styles that Highlight.js is using.

However Highlight.js' styles are inside a <pre> tag.

So solution? Add a class to the <code> tags that aren't inside a <pre> tag.

Could you please provide a hint or a general direction of what I need to do to accomplish this? Thanks for your help! :)

Answer 1

Target all code tags that does not have a ancestor pre tag :

$('code').filter(function() {
    return !$(this).closest('pre').length;
}).css('color', 'red');

FIDDLE