Fix code blocks (with language identifiers) on webcompat.com

[marimeireles]

The following is happening:

If you type something like:

```html
<div>

It'll break on webcompat.com (not upper cased, that was fixed):

If just type your code directly after the three back ticks you'll get the correct output on webcompat:

Like shown by Mike on this issue.

[marimeireles]

What's happening here is that github is sending the classes they use on their website to ours directly. But since we don't have their .css it doesn't take any effect.

One thing we could do is download their lib. I found this one: https://github.com/primer/github-syntax-light and I'm going to make some tests with it.

[marimeireles]

So this is what I got after downloading this lib:

The code with the word after the back ticks gets highlighted correctly, but doesn't get that little box around it. That box comes from the prism.js lib.
I think that there are two alternatives to fix this.

First, we can just copy the class from prism.js and add .highlight > pre to it and we'll have the same result we have now.

 /* Code blocks */
 pre[class*="language-"], .highlight > pre{
   padding: 1em;
   margin: .5em 0;
   overflow: auto;
   border: 1px solid #dddddd;
   background-color: white;
 }

I think this is the only part of the prism.js code we're using, right? If yes, we could remove it and keep only the github-syntax-light lib.

Another thing we could do is use this lib: https://github.com/primer/primer/blob/master/modules/primer-markdown/README.md
Primer markdown is an official lib by Github that offers "Stylesheets for rendering GitHub Flavored Markdown and syntax highlighted code snippets".
It would mimic all of the Github style perfectly, but this is a big change and might break parts of our code. I could test it if you think it's a good idea.

What do you think @miketaylr ?

[miketaylr]

I think this is the only part of the prism.js code we're using, right?

No, it's doing the syntax highlighting for new comments as well.

webcompat.com/webcompat/static/js/lib/issues.js

Lines 502 to 509 in 0133d3d

	addComment: function(comment) {
	// if there's a nsfw label, add the whatever class.
	var view = new issues.CommentView({ model: comment });
	var commentElm = view.render().$el;
	$(".js-Issue-commentList").append(commentElm);
	_.each(commentElm.find("code"), function(elm) {
	Prism.highlightElement(elm);
	});

[miketaylr]

First, we can just copy the class from prism.js and add .highlight > pre to it and we'll have the same result we have now.

This seems like a good idea.

It would mimic all of the Github style perfectly, but this is a big change and might break parts of our code. I could test it if you think it's a good idea.

It looks like that's all SASS, so we'd have to add a SASS pipeline into our build process which doesn't seem worth it (IMO).

[karlcow]

just a naive thought, but why not just renaming our highlight as webc-highlight everywhere in the webcompat code base.