Implement code highlighting

[ghost]

• Perform a spike to understand how to use highlight.js and how to integrate highlight.js with React. Consult the rescript-lang.org implementation.
• ...

Note: The list of tutorials has not been finalized. Assume that all tutorials will be ported over for now.

[agarwal]

@avsm Recommended highlight.js.

[ghost]

Here's one initial hit for integrating highlighting with React elements: https://github.com/wooorm/lowlight .

[ghost]

Here is the essential of rescript-lang.org's implementation:

@bs.deriving(abstract)
type highlightResult = {value: string}

@bs.module("highlight.js/lib/core")
external highlight: (~lang: string, ~value: string) => highlightResult = "highlight"

let renderHLJS = (~highlightedLines=[], ~darkmode=false, ~code: string, ~lang: string, ()) => {
  let (lang, highlighted) = try (lang, highlight(~lang, ~value=code)->valueGet) catch {
    ...
  }

  <code
    className={"hljs lang-" ++ (lang)}
    dangerouslySetInnerHTML={"__html": highlighted}
  />
}

[ghost]

I'm leaning towards using rehype-highlight which wraps lowlight. I believe rescript-lang.org uses highlight.js directly, instead of using rehype-highlight because their rendering of markdown files uses mdxjs and it is simpler to override rendering just code blocks using a single library, rather than using a rehype based wrapper and rewriting the internals of mdxjs to make use of rehype-highlight. Alternative, rescript-lang.org could have used the rehype-plugins options when using mdxjs. I'm not sure why that wasn't used.

[ghost]

There are a few different highlighting implementations. highlight.js is popular and has been successfully used by others, so we will use that for now. It's also convenient that people have implemented wrappers for highlight.js like lowlight.

[ghost]

Perform a spike to understand how to use highlight.js and how to integrate highlight.js with React. Consult the rescript-lang.org implementation.

This was done in #313 , as well as implementing an MVP of this highlighting.

[ghost]

The styles are very simple for now. We can tweak them later before going public.

[ghost]

This is being removed, and can be closed again once the implementation is complete in ood.

[rdavison]

Code highlighting is now being done in Ood, therefore it is no longer relevant here.

[ghost]

@patricoferris Please create an issue in ood to keep this remaining task visible.