feat(code): add a way to configure Prism theme

[Kocal]

Summary

I didn't like Prism theme okaidia and I wanted to use another one, but it was not possible because the theme was hardcoded. I've added a Stylus variable $prismTheme (default okaida) and changed the way to include a prism theme (directly import it in code.styl, like default Vuepress theme does).

default theme:

(Don't take care of highlighted lines, it's part of #37 :sweat_smile:)

override theme:

I've also updated the documentation:

What kind of change does this PR introduce? (check at least one)

• [ ] Bugfix
• [x] Feature
• [ ] Code style update
• [ ] Refactor
• [x] Docs
• [ ] Build-related changes
• [ ] Other, please describe:

If changing the UI of default theme, please provide the before/after screenshot:

Does this PR introduce a breaking change? (check one)

• [ ] Yes
• [x] No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

• [ ] When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)

You have tested in the following browsers: (Providing a detailed version will be better.)

• [x] Chrome 78.0.3904.108
• [ ] Firefox
• [ ] Safari
• [ ] Edge
• [ ] IE

If adding a new feature, the PR's description includes:

• [x] A convincing reason for adding this feature
• [x] Related documents have been updated
• [ ] Related tests have been updated (I don't think there are tests for that)

To avoid wasting your time, it's best to open a feature request issue first and wait for approval before working on it.

Other information:

[billyyyyy3320]

For now, you can use index.stly to override it, such as:

//index.stly

@import '~prismjs/themes/prism-twilight.css'

Since our code block background is always black, some theme might not be suitable.

AFAIK, VP's default theme doesn't support configuring Prism theme. I can't confirm whether it should be supported, but it's worthwhile to open an issue in VuePress, and we can follow the decision.

[Kocal]

Yes, VP's default theme does not support configuring Prism theme, they directly use @import '~prismjs/themes/prism-tomorrow.css' in styles/code.styl.

Using your solution won't work properly because Prism is still imported with <style src="..."> in this theme. It seems that Prism need to be imported with @import in Stylus in the base theme in order to be overridable, see https://github.com/vuejs/vuepress/pull/1707.

I will open a new PR to remove <style> and import Prism in file code.styl, like it's done in VP's default theme. Like this, end users will be able to override it in their index.styl.