Look at supporting multiple syntax highlighters

[JoelMarcey]

Is this a bug report?

No

Have you read the Contributing Guidelines?

Yes

Environment

N/A

Steps to Reproduce

https://twitter.com/notbrent/status/961436860928049152

Expected Behavior

JSX is supported

Actual Behavior

JSX is not supported

Reproducible Demo

N/A

[JoelMarcey]

cc @brentvatne

[brentvatne]

closing this related issue: #388

[ahmadalfy]

@JoelMarcey @yangshun should we switch to Prism? I looked at highlight.js and couldn't find support for JSX.

[endiliey]

I have investigated this. One thing to note is that unlike highlight.js, prism.js doesn't support auto language detection.

Since highlight.js couldn't support JSX, do we want to:

1. Support two highlighters - highlight.js and prism and let the user choose as a configuration option.
   or
2. Still use highlight.js for everything but use prism.js for jsx ??

My mockup for now

Highlight.js (before)

Prism.js (after)

[iRoachie]

What do you mean by auto-language detection?

You mean when if the language is not explicitly set? e.g ```js

[endiliey]

@iRoachie yes
PrismJS/prism#1313

[iRoachie]

Is this a requirement? The highlighter github uses for markdown doesn't do auto-language detection either.

[endiliey]

I think it's not required 😄. Anyway, would you prefer to see option 1 or option 2 ?

[iRoachie]

Think for now option 2 might be better. Don't think we have tests to check which languages might break using prismjs outside of jsx as compared to highlightjs.

[endiliey]

Any thoughts @yangshun @JoelMarcey ?

[JoelMarcey]

Option 2 might work ok. It's a little odd to have a second highlighter that is only used for one language.

Could we do something like...

Use highlight.js as the default. Then in siteConfig.js have an option called usePrism where we can have an array of languages where we want to use that highlighter? A little more configurable. What do you think?

[endiliey]

Something like this @JoelMarcey ?

usePrism: ['js', 'jsx']

Giving some examples:

usePrism: ['js', 'jsx'],
highlight: {
  theme: 'atom-one-dark',
}

usePrism: ['js', 'jsx'],
highlight: {
  theme: 'default',
}

usePrism: ['js', 'jsx'],
highlight: {
  theme: 'tomorrow-night-blue',
}

[JoelMarcey]

@endiliey 👍 Yep, something similar to that. I wonder if option 1 is easier or more clean 😆 But I think this should be ok. Let me look at the PR.