Enable using Prism for syntax highlighting

[endiliey]

Motivation

Resolves #438

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

Production Test
https://deploy-preview-735--docusaurus-preview.netlify.com/docs/en/next/doc-markdown#using-prism-as-additional-syntax-highlighter

Local Test

cd website
yarn start

Go to http://localhost:3000/docs/en/next/doc-markdown & scroll down

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

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

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

[docusaurus-bot]

Deploy preview for docusaurus-preview ready!

Built with commit 0b518ed

https://deploy-preview-735--docusaurus-preview.netlify.com

[JoelMarcey]

💯

I think package-lock.json will need to be updated for this as well, in addition to you yarn.lock?

@iRoachie would this work for you?

[iRoachie]

Looks GTM, is possible to have a usePrism: true to just use it for all languages instead of highlight?

[endiliey]

That is doable. But it still fall back to hljs if the language is not supported by prism.

Additionally, I think user can override the prismJS css we use on their custom.css

[JoelMarcey]

I am good with this.

I would like a second approve from @yangshun on this, if possible.

[yangshun]

Requesting changes just for discussion. Is it possible to lazy load the CSS only when the user sets usePrism? I don't think it's good to add CSS payload to all Docusaurus users when only a fraction of them will use Prism styling. I made a similar comment for the scroll to top button script but on hindsight should have also asked for it for the CSS.

[yangshun]

Use siteConfig.usePrism.length > 0 to be safer.

[yangshun]

This increases the CSS payload to all Docusaurus users, even though not all of them will use it. Is it possible to lazy load the CSS if usePrism is true?

[endiliey]

@yangshun

Actually this main.css is a slightly modified version. I hacked it a little bit (like removing background) because if I don't, it can conflict with hljs theme.

Before:

After:

Is this okay for you ?

// Head.js
{this.props.config.usePrism && (
  <link
    rel="stylesheet"
    href={this.props.config.baseUrl + 'css/prism.css'}
  />
)}

I would love to use CDN but I've mentioned the problem above. Should I upload it somewhere & upload it to CDN ?
The link will look like this https://cdn.jsdelivr.net/gh/facebook/[email protected]/lib/static/css/main.css

[JoelMarcey]

Leaving to @yangshun to approve.

[yangshun]

Making it in a separate CSS file helps. Thanks @endiliey!

[iRoachie]

Finally got to try this out guys! Looks great. Encountered some small ux problems with the missing languages -- logged them in this ticket #1076