Code blocks syntax highlighting specified in markdown ignored

[bettiolo]

🐛 Bug Report

Language syntax specified in markdown code blocks is ignored, eg ```js and ```text render the same output.

Today's (27th July) revision #75538395beb3bcd7591f586877d5971c51d4f5db in master was supposed to contain the fix for the language highlighting.

In fact the css bug of language- <lang> is fixed and now the CSS attribute is language-<lang> without the space. This was fixed by #840

Have you read the [Contributing Guidelines on issues]

Yes

To Reproduce

Create a .md file with the following content:

---
title: EXAMPLE
---

```text
function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) +
             ` class="${cls}"`;
  } catch (e) {
    /* handle exception */
  }
  for (var i = 0 / 2; i < classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      console.log('undefined');
  }
}

export  $initHighlight;
```

```js
function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) +
             ` class="${cls}"`;
  } catch (e) {
    /* handle exception */
  }
  for (var i = 0 / 2; i < classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      console.log('undefined');
  }
}

export  $initHighlight;
```

Expected behavior

I would expect the output to be highlighted differently between text and js code blocks, like this:

function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) +
             ` class="${cls}"`;
  } catch (e) {
    /* handle exception */
  }
  for (var i = 0 / 2; i < classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      console.log('undefined');
  }
}

export  $initHighlight;

function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) +
             ` class="${cls}"`;
  } catch (e) {
    /* handle exception */
  }
  for (var i = 0 / 2; i < classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      console.log('undefined');
  }
}

export  $initHighlight;

Actual Behavior

With fixed code in master, highlightjs seems to ignore language syntax specified in the code block:

As you can see the CSS class name is fixed but ignored.

Reproducible Demo

Use node 8

git clone https://github.com/bettiolo/docusaurus-hl-bug.git
cd docusaurus-hl-bug/website
npm install
npm start

A browser will open and will show the bug:

[endiliey]

Hi @bettiolo,

There is actually no text language in highlight.js, so it triggers the auto language detector defined in
https://github.com/facebook/Docusaurus/blob/75538395beb3bcd7591f586877d5971c51d4f5db/lib/core/renderMarkdown.js#L57-L58

and javascript was detected

You can check the supported languages here

Edit: See #875

[bettiolo]

@endiliey I don't believe that it is the case, to avoid highlighting you use no-highlight or the alias text and plain: https://github.com/highlightjs/highlight.js/blob/898bcd268fb684a6b94e0e817d0ec715178038be/src/highlight.js#L39

https://github.com/highlightjs/highlight.js/blob/898bcd268fb684a6b94e0e817d0ec715178038be/src/highlight.js#L91

[bettiolo]

Update: I didn't notice the Edit, I tested the PR and all is sorted now and no-highlight/plain/text are working.

[endiliey]

@bettiolo 👍

Just wanted to address that text or no-highlight or plain is in fact not a language in highlight.js. Language are: javascript, basic, bash anything defined here

See https://github.com/highlightjs/highlight.js/blob/master/README.md#getting-started
no-highlight/text/plain is just a way to indicate in your css class to disable highlighting

To disable highlighting altogether use the nohighlight class:

<pre><code class="nohighlight">...</code></pre>

I mentioned before that there is no no text language in highlight.js. This is the logic
https://github.com/facebook/Docusaurus/blob/75538395beb3bcd7591f586877d5971c51d4f5db/lib/core/renderMarkdown.js#L49-L51

which fallbacks to this auto language detector if language is not supported. Hence causing the previous code block with text having the same syntax highlighting with javascript code block
https://github.com/facebook/Docusaurus/blob/75538395beb3bcd7591f586877d5971c51d4f5db/lib/core/renderMarkdown.js#L57-L58

You can try out https://npm.runkit.com/highlightjs and see that there is no text language

Anyway, #875 helped on supporting text language for code block style without any highlighting so your problem should be solved