Syntax highlighting is broken when you don't specify a language explicitly

Question

I've noticed that syntax highlighting doesn't work or only sort of works when you don't specify a language tag like

<!-- language: lang-html -->

Shouldn't it be able to autodetect common or known languages?

Here's a question I noticed it on since it has HTML, JS, and CSS blocks that are all not being colored correctly or only partially:

Screenshot:

Link: I was trying to make side navigation bar open with a checkbox but when I check the box the side bar doesn't appear

Looks like the JS is correctly highlighted to me (and it is the most popular tag on the question), HTML and CSS both look like they're being highlight as JS again because it's the most popular tag on the question. All working as intended. If you want multiple different languages in a post you need to specify them all where they are used — Nick is tired
– Nick is tired, Commented Jan 21, 2021 at 6:05
Script tags aren't JS, they're HTML that wraps the JS. Of course they're not highlighted. — Nick is tired
– Nick is tired, Commented Jan 21, 2021 at 6:10
If my IDE didn't highlight script tags wrapping the js, I'd think something was wrong, just like I would here — chiliNUT
– chiliNUT, Commented Jan 21, 2021 at 6:19
@chiliNUT If your IDE highlighted script tags in a .js file, I'd think there was something wrong with your IDE.(Note that I didn't say .jsx.) — Daedalus
– Daedalus, Commented Jan 21, 2021 at 7:26
Both the HTML and CSS seem incomplete (not balanced). That changed in revision 3. — Peter Mortensen
– Peter Mortensen, Commented Jan 21, 2021 at 18:28

rene · Accepted Answer · 2021-01-21 16:08:36Z

It works for me, as long you don't use  as those are deprecated.

From What is syntax highlighting and how does it work?

Note that [overriding the default highlighting] is only supported when using the code fence (```) method of code formatting; as of the implementation of CommonMark, doing so on code blocks using the four-space indent method is no longer supported*:

Instead use code fences (three backticks) and place the highlight hint on the starting code fence: ```javascript (if you want the hint used on that tag) or ```lang-javascript (if you want the explicit supported highlighter)

Example

Adapted from source revision

HTML

<div class="opened-side-nav" id="barres">Content</div>

<div class="logo">
    <input  id="5055" class="showsidenavbar" type="checkbox" onclick="showsidenav()">
    <label for="5055">=</label>

JavaScript

    <script>
        function showsidenav(){
            document.getElementsById("barres").style.display = "block"; 
        }                                         
              
    </script>

CSS

    .opened-side-nav {
    background-color: ghostwhite;
    width: 30%;
    height: 100%;
    position: absolute;
    border-right: black 2px solid;
    z-index: 1;
    overflow: hidden;
    display: none;

zcoop98 · Accepted Answer · 2021-01-21 18:32:50Z

As @rene said, make sure to use code fence syntax when specifying language per code block.

Also wanted to mention that the HTML highlighter is nicely versatile, and will highlight properly formatted JavaScript and CSS in HTML code blocks, as long as you specify the whole block as HTML:

```lang-html

<div class="opened-side-nav" id="barres">Content</div>

<div class="logo">
    <input  id="5055" class="showsidenavbar" type="checkbox" onclick="showsidenav()">
    <label for="5055">=</label> 
</div>

<script>
    function showsidenav(){
        document.getElementsById("barres").style.display = "block"; 
    }                                         
</script>

<style>
.opened-side-nav {
    background-color: ghostwhite;
    width: 30%;
    height: 100%;
    position: absolute;
    border-right: black 2px solid;
    z-index: 1;
    overflow: hidden;
    display: none;
}
</style>

Syntax highlighting is broken when you don't specify a language explicitly

2 Answers 2

Example

You must log in to answer this question.

Hot Network Questions

2 Answers 2

Example

You must log in to answer this question.

Related