Reveal.js fork to get highlight.js v8.6

[kfuglsang]

I created a fork of reveal.js that this PR refers to rather than hakimel's original. This will let FsReveal grab highlight.js version 8.6 that, amongst others, includes support for the C/AL language.

[forki]

Very cool. Could you please also send a PR upstream?

[kfuglsang]

I already sent a PR to hakimel some days ago. https://github.com/hakimel/reveal.js/pull/1250

[forki]

:kiss:

[forki]

I tried to set up a fsprojects fork and merged your commit. but it didn't work in fsreveal 0.10? ;-(

[kfuglsang]

I repro'ed that. I spent a bit time on it and its actually the HTML being generated from the markdown that is incompatible with reveal.js's custom highlight.js initialization.

The generated HTML ends up having code like:

<table class="pre">
<tr>
...
<td class="snippet">
<pre class="fssnip" lang="cal">
PROCEDURE FindPrinter@11(ReportID@1000 : Integer) : Text[250];
...
</pre>
</td>
</tr>
</table>

Reveal.js initializes highlight.js such that code is expected to be within

<pre><code>....</code></pre>

Thus, if the generated code would look like this, it would highlight it correctly.

<table class="pre">
<tr>
...
<td class="snippet">
<pre class="fssnip" lang="cal">
<code>
PROCEDURE FindPrinter@11(ReportID@1000 : Integer) : Text[250];
...
</code>
</pre>
</td>
</tr>
</table>

That gives some styling issues though, but that will have to be taken care of afterwards.

Can we manipulate the HTML generation?

[forki]

I'm sure we could pre- or postprocess in FsReveal, but I'm sure @tpetricek would help us to solve this in FSharp.Formatting ;-)

[kfuglsang]

I just submitted a PR to FSharp.Formatting that solves it. https://github.com/tpetricek/FSharp.Formatting/pull/319

[tpetricek]

There are two ways to do this - do a transformation in FsReveal (to produce the expected HTML) or do a change in F# Formatting.

I'm not sure what the right thing to do is. Is there any fundamental reason for using <pre><code>...</code></pre> rather than just using <pre>...</pre>, or is that just a side-effect of some other tool?

We seem to be having troubles getting the formatting right: https://github.com/fsprojects/FsReveal/issues/69, so I'm a bit worried what would happen if we made the change in F# Formatting...

[tpetricek]

Oh nice, I see there is a PR for this already :-)

@kfuglsang Can you try regenerating the documentation for F# Formatting using the changed version (just select everything in generate.fsx and do Alt-Enter) and check what the formatted HTML looks like? (In particular, do the code snippets look the same as in http://tpetricek.github.io/FSharp.Formatting?) and also, does this change how F# snippets look in FsReveal?

[kfuglsang]

There are two reasons for it as I see it.

• The line numbers are similarly embedded within a <pre class="fssnip"> meaning they are hard to distinguish from the actual code. This is a minor issue though.
• Reveal.js uses a custom initialization of highlight.js where it finds all code blocks to highlight using https://github.com/hakimel/reveal.js/blob/master/plugin/highlight/highlight.js#L4. Therefore, it will not find the FsReveal code blocks.

[kfuglsang]

@tpetricek I'm checking up on the F# Formatting documentation right now.

It might change the look of the FsReveal code snippets as well. This actually happens since the HTML now matches what highlight.js expects, and thus some formatting from their css might apply. This is something that can be resolved in FsReveal though.

[tpetricek]

Oh sorry, I understand why the highlight plugin is not running now.

I'm just trying to understand if this is an FsReveal-specific problem or if it is something that would make sense to change in F# Formatting in general, because it is always better to generate <pre><code>...

Yeah, I think FsReveal will need to do something clever to disable highlight on code snippets it formats through F# Formatting (I definitely had this enabled before and it was highlighting random things in my FsReveal slides :-))

[kfuglsang]

Using <pre><code> is the more correct thing to do.

The summary at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code explains The HTML Code Element (<code>) represents a fragment of computer code. By default, it is displayed in the browser's default monospace font.

[tpetricek]

Well, looks like HTML5 spec recommends it too: http://www.w3.org/TR/2011/WD-html5-author-20110809/the-code-element.html, so I guess we should do the change in F# Formatting...

Once that's there, how can we disable the reveal.js syntax highlighter on F# Formatting-formatted snippets in FsReveal slides? (Asking mainly in case we realized that we need some additional CSS styles to distinguish things...)

[tpetricek]

Let's say that F# Formatting takes:

[lang=whatever]
!<>>@#$#@$>@

And turns it into:

<table><tr><td class="lines"><pre class="fssnip"><code lang="whatever">
1:
</code></pre></td><td class="snippet"><pre class="fssnip"><code lang="whatever">
!<>>@#$#@$>@
</code></pre></td></tr></table>

Here, I suggest we also move "lang" attribute to <code> instead of <pre> because that seems to be what HTML5 recommends.

[tpetricek]

So, the question is, can we tell the syntax highlighter to ignore blocks that have lang="fsharp" (and a few others that F# Formatting handles directly), or do we need something else?

[kfuglsang]

I agree regarding the lang-attribute position. Updated the PR accordingly.

[kfuglsang]

Highlight.js supports that you add class="no-highlight" to ignore the code block. I think we could add a piece of javascript in FsReveal to dynamically add this class to all code blocks that match one of a set of ignored languages.

[tpetricek]

That would work - alternatively, we could generate this in F# Formatting for all things that we format there. But that would be a bit ad-hoc to do there (as it is FsReveal specific behavior)

[kfuglsang]

I'm shutting down for today but I'll follow up on the rest tomorrow. Particularly just checking the documentation of F# Formatting to make sure nothing is broken :)

[tpetricek]

No problem, I'll have a quick look and comment on the PR, thanks for helping with this, it will be good to follow HTML5 recommendations!