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:
Endi 2019-06-04 15:59:51 +07:00 committed by GitHub
parent 246c1814c0
commit 305a4f0a29
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 287 additions and 84 deletions

View file

@ -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}
`;