mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-14 01:27:35 +02:00
feat(v2): composition syntax highlighting & live code editors (#1555)
* feat(v2): composition syntax highlighting & react-live playground * mobile friendly tweak * refactor styling * revert docs
This commit is contained in:
parent
246c1814c0
commit
305a4f0a29
21 changed files with 287 additions and 84 deletions
|
@ -7,18 +7,16 @@
|
|||
|
||||
const {getOptions} = require('loader-utils');
|
||||
const mdx = require('@mdx-js/mdx');
|
||||
const rehypePrism = require('@mapbox/rehype-prism');
|
||||
const emoji = require('remark-emoji');
|
||||
const slug = require('remark-slug');
|
||||
const matter = require('gray-matter');
|
||||
const stringifyObject = require('stringify-object');
|
||||
const linkHeadings = require('./linkHeadings');
|
||||
const rightToc = require('./rightToc');
|
||||
const linkHeadings = require('./rehype/linkHeadings');
|
||||
const rightToc = require('./remark/rightToc');
|
||||
|
||||
const DEFAULT_OPTIONS = {
|
||||
rehypePlugins: [[rehypePrism, {ignoreMissing: true}], linkHeadings],
|
||||
rehypePlugins: [linkHeadings],
|
||||
remarkPlugins: [emoji, slug, rightToc],
|
||||
prismTheme: 'prism-themes/themes/prism-atom-dark.css',
|
||||
};
|
||||
|
||||
module.exports = async function(fileString) {
|
||||
|
@ -36,7 +34,6 @@ module.exports = async function(fileString) {
|
|||
...DEFAULT_OPTIONS.rehypePlugins,
|
||||
...(reqOptions.rehypePlugins || []),
|
||||
],
|
||||
prismTheme: reqOptions.prismTheme || DEFAULT_OPTIONS.prismTheme,
|
||||
filepath: this.resourcePath,
|
||||
};
|
||||
let result;
|
||||
|
@ -47,16 +44,10 @@ module.exports = async function(fileString) {
|
|||
return callback(err);
|
||||
}
|
||||
|
||||
let importStr = '';
|
||||
// If webpack target is web, we can import the css
|
||||
if (this.target === 'web') {
|
||||
importStr = `import '${options.prismTheme}';`;
|
||||
}
|
||||
|
||||
const code = `
|
||||
import React from 'react';
|
||||
import { mdx } from '@mdx-js/react';
|
||||
${importStr}
|
||||
|
||||
export const frontMatter = ${stringifyObject(data)};
|
||||
${result}
|
||||
`;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue