Bug 1476111 (bmo-markdown-highlight)

Enable syntax highlighting in comment code blocks

RESOLVED FIXED

Status

()

--
enhancement
RESOLVED FIXED
8 months ago
a month ago

People

(Reporter: kohei, Assigned: kohei)

Tracking

(Blocks: 1 bug)

Production
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

With GitHub flavoured Markdown, you can "add an optional language identifier to enable syntax highlighting in your fenced code block."

https://help.github.com/articles/creating-and-highlighting-code-blocks/

With the current Markdown support, the rendered comments have a class name like `language-javascript` but the code itself doesn't come with any markup.

We have 2 options:

1. Render code blocks server-side
2. Render code blocks client-side with https://prismjs.com/
What about highlight.js, which we had in upstream bugzilla?
If we already have that one, let’s use it.
Severity: normal → enhancement
Alias: bmo-markdown-highlight

Updated

2 months ago
Blocks: 1518508

Israel:

I'd like you to evaluate libraries that can highlight our 'language-foo' code blocks,
so we know which one we should use for this bug.
Some evaluation criteria is how well-supported the library is (do enough people use it?),
the quality of the syntax highlighting, and that it supports the languages most likely to be used. That means C++, Rust, Javascript are the most important.

The ones I know about:

  1. prism.js
  2. highlight.js

At the very least I'd like to understand the difference(s) between those two.

Forgot to needinfo in the above comment, oops

Flags: needinfo?(imadueme)

Not very much difference between them, they are both popular great libraries, both updated frequently, etc :)

I personally would choose prism.js because it is more beautiful, and tends to highlight attributes and methods better (especially for javascript, highlight js doesn't always highlight those). It also supports JSX which I'm not sure that highlight.js does (couldn't find any examples there). That and MDN already uses prisim.js too so it would be good to be consistent with them.

Flags: needinfo?(imadueme)
Posted file GitHub Pull Request
Assignee: nobody → kohei.yoshino
Status: NEW → ASSIGNED

Merged to master.

Status: ASSIGNED → RESOLVED
Last Resolved: a month ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.