What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 131 Stack Exchange communities.

I have this question. I reformatted it, to get better view and syntax-highlighting.

Referring to this and this, there is special markdown to force special highlighting. But that has one requirement: <!-- language: lang-js --> has to be surrounded by a empty lines and no indention. But as you see, there is mixture of JS and XML/ HTML.

So I tried in preview to get both, but it looks quite ... ugly:

<div id="fb-root"></div>
<script>
    var facebookLang = "en_US";
    (function (d, s, id) { 
        var js, 
        fjs = d.getElementsByTagName(s)[0]; 
        fjs.parentNode.insertBefore(js, fjs); 
    } (document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-send" 
        data-href="http://hain-celestial.ca/Recipes/PastaAndBeanSaladwithTunaDressing" 
        data-font="arial">
</div>

Which way should I choose to get it well-looking? Taking only lang-js results in this:

<div id="fb-root"></div>
<script>
    var facebookLang = "en_US";
    (function (d, s, id) { 
        var js, 
        fjs = d.getElementsByTagName(s)[0]; 
        fjs.parentNode.insertBefore(js, fjs); 
    } (document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-send" 
        data-href="http://hain-celestial.ca/Recipes/PastaAndBeanSaladwithTunaDressing" 
        data-font="arial">
</div>

Is it just status-by-design or did I miss a formatting hint?

share|improve this question

2 Answers 2

up vote 10 down vote accepted

You can't explicitly specify multiple languages for highlighting in a single code block.

However, if you use lang-html, prettify is smart enough to detect JavaScript in <script> tags and CSS in <style> tags, and highlight them accordingly:

<div id="fb-root"></div>
<script>
    var facebookLang = "en_US";
    (function (d, s, id) { 
        var js, 
        fjs = d.getElementsByTagName(s)[0]; 
        fjs.parentNode.insertBefore(js, fjs); 
    } (document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-send" 
        data-href="http://hain-celestial.ca/Recipes/PastaAndBeanSaladwithTunaDressing" 
        data-font="arial">
</div>

Notice in this example, var and function are highlighted as JavaScript keywords, whereas the number and string values are highlighted as JavaScript literal values.

Some other languages like lang-php are compatible with HTML as well, so if you switched the lang-html hint above for lang-php you'd get the same result, because prettify is able to detect HTML and highlight it as such, even though you tagged it lang-php.

share|improve this answer

No, there is no way to have one block prettify two languages so the proper thing to do as far as I can tell is to simply separate the code.

See the question now, I just separated the HTML from JavaScript - in the rare cases where JavaScript directly injects HTML through document.write this is wrong but usually that's not the case and there's no harm in separating.

share|improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .