code blocks lose background color when no-highlight is set

[thinlines]

This may actually be the intended result, but it doesn't make sense to me, at least. I want to keep the element styling of code blocks without any of the syntax highlighting.

I tried explicitly adding the background color to the elements in the inline CSS included with the reference implementation from the README, but that didn't work.

A markdown example:

```no-highlight
Some stuff I want to __write____ on a whiteboard
                      throw
                      catch
```

Expected result: no keywords from any programming language are highlighted, but background color is kept.

Actual result: background color is removed along with all syntax highlighting.

Any suggestions?

[utdrmac]

Ditto. I like having my code blocks with a "background box". I just have to force it by using ```sql everywhere, even though I don't want the highlighting. Sometimes I just have to try different highlight languages until I find one that "works". Crappy workaround indeed.

[thinlines]

I wrote something resembling a solution using javascript:

var elements = document.getElementsByClassName('no-highlight');
for(var i=0; i < elements.length; i++) {
    elements[i].className += " hljs-github hljs"; // note the space
}

I understand that getElementsByClassName has some browser limitations, but is overall widely supported, and I reckon that if that won't work, then remark.js won't work either. At any rate, it just adds hljs-github and hljs to any element with class no-highlight, which adds the styling back. It's still manual, so if I want to change the theme, then I'll also have to change this part of the template, too, but it works for now.

Maybe someone can do something similar in remark's code so that the styling doesn't disappear by default?

[scarolan]

I came here for this issue. I'm building a slide deck that has both commands, and shell output. I want to show the shell output so it also looks like it's in a terminal. Losing the background color is 👎

[mbrgm]

As a workaround, I added this to the javascript in my html file:

var slideshow = remark.create({
  // ...
});

function repairBackgroundForNoHighlightCodeblocks() {
  var elements = document.getElementsByClassName('remark-code');

  for(var i=0; i < elements.length; i++) {
    const hljsClass = "hljs";
    let el = elements[i];

    if (!el.classList.contains(hljsClass)) {
      el.classList.add(hljsClass);
    }
  }
}

slideshow.on('showSlide', function (slide) {
  repairBackgroundForNoHighlightCodeblocks();
});

[utdrmac]

I just did this and seems to accomplish the goal without needing extra JS

.remark-code.hljs[```
 <content>
```]

[beruic]

The solution from @mbrgm works. I would however like to add that the function repairBackgroundForNoHighlightCodeblocks() should be called in the end to make it work for refreshes too.

[abelards]

I think @utdrmac solution is the best one, it requires only a CSS directive, no JS, and no change in remark's core.
I have added this to the wiki: https://github.com/gnab/remark/wiki/HTML-CSS-JS-samples
Thanks to all!