Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 158 Stack Exchange communities.

What is meta?
Here's how it works:
  1. Any Stack Exchange user can ask a question
  2. The community provides support, votes on ideas, and reports bugs
  3. Your voice helps shape the way Stack Exchange operates

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
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 .