lightbend/paradox

Explicitly specifying language on fenced block doesn't work

harpocrates opened this issue · 3 comments

Putting an explicit language tag on a fenced code block does not work:

```mylang
foo bar
```

It generates the following (which I've indented):

<pre class="prettyprint" id="__code_0">
  <button class="md-clipboard" title="Copy to clipboard" data-clipboard-target="#__code_0 pre, #__code_0 code">
    <span class="md-clipboard__message"></span>
  </button>
  <code class="language-mylang">foo bar</code>
</pre>

However, prettify apparently expects the following instead (noticed the language-mylang class has moved):

<pre class="prettyprint language-mylang" id="__code_0">
  <button class="md-clipboard" title="Copy to clipboard" data-clipboard-target="#__code_0 pre, #__code_0 code">
    <span class="md-clipboard__message"></span>
  </button>
  <code>foo bar</code>
</pre>

Workaround for other poor souls: make sure this gets run before PR.prettyPrint():

// Lift the `language-*` classnames from `code` elements up onto their `pre` parent elements
var codeElems = document.body.getElementsByTagName("code");
for (var i = 0; i < codeElems.length; ++i) {
   var codeElem = codeElems[i];
   var languageClassesToLift = [];
   codeElem.classList.forEach(function (className) {
     if (className.startsWith("language-")) languageClassesToLift.push(className);
   });
   if (codeElem.parentElement.classList.contains("prettyprint")) {
     DOMTokenList.prototype.add.apply(codeElem.parentElement.classList, languageClassesToLift);
   }
}

I think this is affecting the Akka docs too: notice how on https://doc.akka.io/docs/akka/current/typed/actors.html#akka-actors the val keywords often don't get colored properly (because the language-scala is not getting picked up).

Before:
Screen Shot 2020-10-25 at 3 41 17 PM

After applying the workaround I mentioned above:
Screen Shot 2020-10-25 at 3 36 53 PM

ennru commented

Thank you reporting. Scala seems to be very little affected by this.
There is even #450 suggesting to switch the library for syntax highlighting.

Either way, please suggest the necessary changes in a PR if you are in a position to do that.

There is even #450 suggesting to switch the library for syntax highlighting.

Right, I was the one who opened that too 😄. I think I'll focus my efforts on switching to highlight.js instead of fixing this - the main reason for opening the bug is to make sure others running into this issue realize what is causing it (and know how to work around it).