3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-07-31 15:29:32 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(v2): Allow swizzling prism-include-languages in theme-classic (#2841)

Browse source 
* feat(v2): Allow swizzling prism-include-languages in theme-classic

* Add docs

* Improve docs
This commit is contained in:
Sam Zhou 2020-05-31 02:41:16 -04:00 • committed by GitHub
parent 374eba7474
commit 93b35afe95
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 53 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

19
packages/docusaurus-theme-classic/src/prism-include-languages.js
View file

@ -6,21 +6,6 @@
*/
import Prism from 'prism-react-renderer/prism';
import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
import siteConfig from '@generated/docusaurus.config';
import prismIncludeLanguages from '@theme/prism-include-languages';
(() => {
if (ExecutionEnvironment.canUseDOM) {
const {
themeConfig: {prism: {additionalLanguages = []} = {}},
} = siteConfig;
window.Prism = Prism;
additionalLanguages.forEach((lang) => {
require(`prismjs/components/prism-${lang}`); // eslint-disable-line
});
delete window.Prism;
}
})();
prismIncludeLanguages(Prism);

27
packages/docusaurus-theme-classic/src/theme/prism-include-languages.js Normal file
View file

@ -0,0 +1,27 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
import siteConfig from '@generated/docusaurus.config';
const prismIncludeLanguages = (Prism) => {
if (ExecutionEnvironment.canUseDOM) {
const {
themeConfig: {prism: {additionalLanguages = []} = {}},
} = siteConfig;
window.Prism = Prism;
additionalLanguages.forEach((lang) => {
require(`prismjs/components/prism-${lang}`); // eslint-disable-line
});
delete window.Prism;
}
};
export default prismIncludeLanguages;

24
website/docs/markdown-features.mdx
View file

@ -538,6 +538,30 @@ module.exports = {
};
```
If you want to add highlighting for languages not yet supported by Prism, you can swizzle `prism-include-languages`:
```bash npm2yarn
yarn swizzle @docusaurus/theme-classic prism-include-languages
```
It will produce `prism-include-languages.js` in your `src/theme` folder. You can add highlighting support for custom languages by editing `prism-include-languages.js`:
```js {8} title="src/theme/prism-include-languages.js"
const prismIncludeLanguages = (Prism) => {
// ...
additionalLanguages.forEach((lang) => {
require(`prismjs/components/prism-${lang}`); // eslint-disable-line
});
require('/path/to/your/prism-language-definition');
// ...
}
```
You can refer to [Prism's official language definitions](https://github.com/PrismJS/prism/tree/master/components) when you are writing your own language definitions.
### Line highlighting
You can bring emphasis to certain lines of code by specifying line ranges after the language meta string (leave a space after the language).