feat: add common syntax highlight entry. #291

Author: jaywcjlove

core/README.md

@@ -216,6 +216,29 @@ export default function Demo() {
 }
 ```
 
+## Common Code Highlight
+
+Use `@uiw/react-markdown-preview/common` to keep syntax highlighting enabled with the `rehype-prism-plus/common` language subset. This is a middle ground between the default all-language build and `nohighlight`.
+
+```jsx mdx:preview
+import React from 'react';
+import MarkdownPreview from '@uiw/react-markdown-preview/common';
+
+const source = `
+\`\`\`js
+function greet(name) {
+  console.log('hello', name);
+}
+\`\`\`
+`;
+
+export default function Demo() {
+  return (
+    <MarkdownPreview source={source} style={{ padding: 16 }} />
+  );
+}
+```
+
 ## Remove Code Highlight
 
 The following example can help you _exclude code highlighting code_<!--rehype:style=color: #333;background-color: rgb(196 255 122 / 86%);--> from being included in the bundle. `@uiw/react-markdown-preview/nohighlight`<!--rehype:style=color: #e24444;--> component does not contain the `rehype-prism-plus` code highlighting package, `showLineNumbers` and `highlight line` functions will no longer work. ([#586](https://github.com/uiwjs/react-md-editor/issues/586))

core/common.d.ts

@@ -0,0 +1,7 @@
+declare module '@uiw/react-markdown-preview/common' {
+  import React from 'react';
+  import { MarkdownPreviewProps, MarkdownPreviewRef } from '@uiw/react-markdown-preview/lib/Props';
+  export * from '@uiw/react-markdown-preview/lib/Props';
+  const _default: React.ForwardRefExoticComponent<MarkdownPreviewProps & React.RefAttributes<MarkdownPreviewRef>>;
+  export default _default;
+}

core/package.json

@@ -15,6 +15,11 @@
       "types": "./lib/index.d.ts",
       "require": "./lib/index.js"
     },
+    "./common": {
+      "import": "./esm/common.js",
+      "types": "./lib/common.d.ts",
+      "require": "./lib/common.js"
+    },
     "./nohighlight": {
       "import": "./esm/nohighlight.js",
       "types": "./lib/nohighlight.d.ts",
@@ -40,6 +45,7 @@
     "dist",
     "lib",
     "esm",
+    "common.d.ts",
     "nohighlight.d.ts",
     "markdown.css",
     "src/**/*.{ts,tsx,less}"

core/src/common.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import rehypePrism from 'rehype-prism-plus/common';
+import type { PluggableList } from 'unified';
+import rehypeRewrite from 'rehype-rewrite';
+import rehypeAttrs from 'rehype-attr';
+import rehypeRaw from 'rehype-raw';
+import MarkdownPreview from './preview';
+import { reservedMeta } from './plugins/reservedMeta';
+import { retrieveMeta } from './plugins/retrieveMeta';
+import { rehypeRewriteHandle, defaultRehypePlugins } from './rehypePlugins';
+import type { MarkdownPreviewProps, MarkdownPreviewRef } from './Props';
+
+export * from './Props';
+
+export default React.forwardRef<MarkdownPreviewRef, MarkdownPreviewProps>((props, ref) => {
+  const rehypePlugins: PluggableList = [
+    reservedMeta,
+    rehypeRaw,
+    retrieveMeta,
+    ...defaultRehypePlugins,
+    [rehypeRewrite, { rewrite: rehypeRewriteHandle(props.disableCopy ?? false, props.rehypeRewrite) }],
+    [rehypeAttrs, { properties: 'attr' }],
+    ...(props.rehypePlugins || []),
+    [rehypePrism, { ignoreMissing: true }],
+  ];
+  return <MarkdownPreview {...props} rehypePlugins={rehypePlugins} ref={ref} />;
+});

test/index.test.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import TestRenderer from 'react-test-renderer';
 import { render } from '@testing-library/react';
 import MarkdownPreview, { MarkdownPreviewRef } from '../core/src';
+import CommonMarkdownPreview from '../core/src/common';
 
 it('Should output a TestRenderer', async () => {
   const component = TestRenderer.create(<MarkdownPreview source="## Hello World!" />);
@@ -60,4 +61,13 @@ it('MarkdownPreview Ref', async () => {
     );
   }
   render(<Demo />);
-});
+});
+
+it('Common MarkdownPreview entrypoint', async () => {
+  const component = TestRenderer.create(<CommonMarkdownPreview source="```js\nconst a = 1;\n```" />);
+  const tree = component.toJSON();
+  if (tree && !Array.isArray(tree)) {
+    expect(tree.type).toEqual('div');
+    expect(tree.props.className).toEqual('wmde-markdown wmde-markdown-color ');
+  }
+});