Skip to content

Explicitly specifying language on fenced block doesn't work #454

Open
@harpocrates

Description

@harpocrates

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);
   }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions