Better documentation and support for code syntax hightlighting

[ericelliott]

I think these code hightlighting issues keep popping up because it's not at all obvious how we're supposed to turn code highlighting on without digging into the code examples.

Take a look at how react-syntax-hightlighter deals with this issue:

import SyntaxHighlighter from 'react-syntax-highlighter';
import { tomorrowNightBright } from 'react-syntax-highlighter/styles/hljs';

<SyntaxHighlighter language="javascript" style={tomorrowNightBright}>`const foo = 'bar';`</SyntaxHighlighter>

In my opinion, something like this would be really cool:

import Markdown from 'react-markdown';
import { style } from './styles/hljs';

<Markdown style={ style }>`
# Hurray!

\`\`\`
const foo = 'bar';
\`\`\`
`</Markdown>

If we can already do something like this, it would be really cool to make it easy to find in the documentation.

[ibrahima]

It's actually pretty easy to enable code highlighting, you just need to pass a custom renderer for code blocks to ReactMarkdown. I found the easiest way to figure out how to do that was to look at the source for how the existing renderers were written: https://github.com/rexxars/react-markdown/blob/master/src/renderers.js . I am not sure if those examples in the other issues are fully up to date (since they predate version 3.0), but I'll throw mine into the pile because I'm actually using react-syntax-highlighter.

https://gist.github.com/ibrahima/d21950a95aee3212e991a8404e238093

(I've extracted this snippet from a bigger codebase with more customization so apologies if it doesn't work right away.)

[lawrenceching]

Build-In support is not that necessary. The solution @ibrahima provided is awesome.
As users, I think what we need is to document it somewhere.
The gap between the default result and the demo page is huge. That really confused me.

[colinhacks]

@ibrahima I'm confused - does your code work with triple-backtick syntax? How do you tell react-markdown what language's syntax to use?

Does anyone know of a solution that uses GitHub's custom syntax for specifying languages? e.g.:

const x: string = "asdf";

[ibrahima]

Yes it does. The markdown parser already handles that. My snippet just gives a way to render code blocks with syntax highlighting.

[ericelliott]

Did that example ever get added to the docs?

[wooorm]

This should be significantly easier when #428 lands, by adding either https://github.com/mapbox/rehype-prism, https://github.com/rsclarke/rehype-shiki, or https://github.com/rehypejs/rehype-highlight. I’ll rename this issue to ensure we add an example somewhere in the readme

edit: title is perfect 😅

[wooorm]

This is now documented in the readme