862003 - Switch to a better syntax highligher

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: Editing, defect, P2)

Description

[John Karahalis [:openjck]]

What feature should be changed? Please provide the URL of the feature if possible.
==================================================================================
The syntax highlighter we currently use on MDN has a number of problems. See the dependent bugs for some examples.

What problems would this solve?
===============================
See the list of dependent bugs as just some examples of problems that would be solved by switching to a better syntax highlighter.

Who would use this?
===================
Readers would primarily benefit from a better highlighter, but this would also solve some frustrations that editors experience while trying to document their code properly.

What would users see?
=====================
Readers should see code samples that are highlighted more accurately. It sounds like authors should not see any difference.

What would users do? What would happen as a result?
===================================================
Readers would not need to actively do anything to see the effects of a better syntax highlighter, and it sounds like authors would not need to do anything differently either.

Is there anything else we should know?
======================================

Comment 1

[John Karahalis [:openjck]]

We mentioned Prism as being one good option.

Comment 2

[David Walsh :davidwalsh]

My blog uses PrismJS (http://prismjs.com/) and I like it a lot.  Extensible and oft-updated.  Support for CSS/SCSS, JS/Coffeescript, HTML, and C-Like.  Gets my vote.

Comment 3

[Eric Shepherd [:sheppy]]

Sounds like a plan to me. I certainly don't object to improving our syntax highlighting!

Comment 4

[Eric Shepherd [:sheppy]]

David asked me to list the languages we need to highlight, so here we go:

JavaScript
C++
Python
Perl
Java
Bash
CSS
XML
PHP
XML

Someone mentioned JSON -- but wouldn't JavaScript cover that? If that's not adequate, then add JSON to the list.

Some of those we don't use often (but will, more, as we add more content about how to handle the server side of operations -- that'd be the Perl and Python stuff in particular).

Comment 5

[Jean-Yves Perrier [:teoli]]

We need WebIDL and HTML too.

Comment 6

[Jean-Yves Perrier [:teoli]]

Sheppy just thought of SVG and I add MathML.

Comment 7

[Eric Shepherd [:sheppy]]

Oops, did I leave HTML off? My mistake.

WebIDL would be a nice to have but IMHO not mandatory; we actually try to discourage showing IDL directly. :)

SVG would be good if it's available separately from XML.

Comment 8

[[github robot]]

Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/7d3f228459463bab1cff99adc34e48a53402c8e3
fix bug 862003 - Implement Prism syntax highlighter

https://github.com/mozilla/kuma/commit/39d7db88dbdd074a6f295c2932734489a8973bc1
Merge pull request #1025 from darkwing/syntax-862003-waffle

fix bug 862003 - Implement Prism syntax highlighter

Comment 9

[David Bruant]

(In reply to Eric Shepherd [:sheppy] from comment #4)
> Someone mentioned JSON -- but wouldn't JavaScript cover that? If that's not
> adequate, then add JSON to the list.
For JSON, I think it's important be able to visually differenciate keys and values. Most JS parsers consider both keys and values as string and color both with the same color.

Comment 10

[John Karahalis [:openjck]]

Are the dependencies of this bug (bug 774103, bug 793225, bug 821261) resolved by this?

Comment 11

[David Walsh :davidwalsh]

Only 821261 needs to be addressed, although we can use the JavaScript lighter for that, IMO.