665733 - Kuma: Syntax highlighting, with optional line numbering

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: Wiki pages, defect, P1)

Comment 1

[Les Orchard [:lorchard]]

Code examples in Kuma are barely styled.

Syntax highlighting is currently implemented on MindTouch with dp.SyntaxHighlighter [1], but we've talked about moving to jsFiddle [2]. Maybe now's the time to switch?


[1] https://github.com/alexgorbatchev/SyntaxHighlighter
[2] http://jsfiddle.net

Comment 2

[Luke Crouch [:groovecoder]]

Let's do the same syntax highlighter for now.

Comment 3

[Luke Crouch [:groovecoder]]

This was easy to start but I came across an issue.

DekiWiki stores code blocks like this:
<pre class="deki-transform" function="syntax.JavaScript">

Which then renders like this:
<pre class="js" name="code" style="display: none;">

(The new version of) SyntaxHighlighter wants blocks like this:
<pre class="brush: js">

Should we convert the pre tags during migration? Or should we try to match DekiWiki's rendering logic to turn the 'deki-transform' class into 'brush: js'? Or should we try to modify SyntaxHighlighter?

Personally, I vote for converting the pre tags during migration - it gets us all the way off MindTouch/DekiWiki semantics.

Comment 4

[Luke Crouch [:groovecoder]]

Check https://github.com/groovecoder/kuma/tree/665733-syntax-highlighting for my start at this.

Comment 5

[Les Orchard [:lorchard]]

To sum up my IRC ramblings: 

I'd lean toward *not* changing the page content, just on principle of fewer things with a chance to damage content. Instead, this could be supported purely in JS.

That said, the JS to support this would be legacy cruft, and converting the content in migration is not necessarily a bad idea.

Something else that just occurred to me: We'll need to document this as a part of a "what's changed for authors in Kuma" guide that I don't think we've thought about yet.

Comment 6

[[github robot]]

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

https://github.com/mozilla/kuma/commit/567d5533261f7493cfe8167fbabf13ce0d880876
Fix Bug 665733 cover all syntax elements and languages

https://github.com/mozilla/kuma/commit/e415ad03bec2ca2a7bf0c2f87a9d9465eee0e6b9
Fix Bug 665733 use html5lib_Filter