fix: fix server-side rendering compatibility

Author: simonguo

README.md

@@ -4,12 +4,6 @@ Let the React code in Markdown be rendered to the page, and support online editi
 
 ![preview](https://user-images.githubusercontent.com/1203827/44707274-a30c0f80-aad6-11e8-8cc5-9cf7daf4d9e2.gif)
 
-## Principle of implementation
-
-- Parse Markdown documents through `markdown-loader` and `html-loader`.
-- Extract the code that needs to be rendered in the document and pass it to the `codemirror` editor.
-- Compile the code in `codemirror` through swc, and then render the component to the specified container through `ReactDOM.render`.
-
 ## Install
 
 ```
@@ -25,18 +19,46 @@ export default {
     rules: [
       {
         test: /\.md$/,
-        use: [
-          {
-            loader: 'react-code-view/webpack-md-loader',
-            parseLanguages: ['javascript', 'bash', 'xml', 'css', 'markdown', 'less', 'typescript'],
-            htmlOptions: {
-              // HTML Loader options
-              // See https://github.com/webpack-contrib/html-loader#options
-            },
-            markedOptions: {
-              // Pass options to marked
-              // See https://marked.js.org/using_advanced#options
-            }
+        loader: 'react-code-view/webpack-md-loader'
+      }
+    ]
+  }
+};
+```
+
+#### Options
+
+```json
+{
+  "parseLanguages": [
+    // Supported languages for highlight.js
+    // default: "javascript", "bash", "xml", "css", "markdown", "less", "typescript"
+    // See https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md
+  ],
+  "htmlOptions": {
+    // HTML Loader options
+    // See https://github.com/webpack-contrib/html-loader#options
+  },
+  "markedOptions": {
+    // Pass options to marked
+    // See https://marked.js.org/using_advanced#options
+  }
+}
+```
+
+**webpack.config.js**
+
+```js
+
+export default {
+  module: {
+    rules: [
+      {
+        test: /\.md$/,
+        use:[
+          loader: 'react-code-view/webpack-md-loader',
+          options:{
+            parseLanguages: ['typescript','rust']
           }
         ]
       }
@@ -51,7 +73,7 @@ export default {
 import CodeView from 'react-code-view';
 import { Button } from 'rsuite';
 
-import 'react-code-view/styles/index.less'; // or 'react-code-view/styles/react-code-view.css'
+import 'react-code-view/styles/react-code-view.css';
 
 return (
   <CodeView

docs/example.md

@@ -12,11 +12,11 @@ npm install react-code-view
 
 ## Usage
 
-```js
+```jsx
 import CodeView from 'react-code-view';
 import { Button } from 'rsuite';
 
-import 'react-code-view/styles/styles.less'; // or 'react-code-view/styles/react-code-view.css'
+import 'react-code-view/styles/react-code-view.css';
 
 return <CodeView dependencies={{ Button }}>{require('./example.md')}</CodeView>;
 ```

docs/gh-pages.js

@@ -1,6 +1,6 @@
 var ghpages = require('gh-pages');
 var path = require('path');
 
-ghpages.publish(path.join(__dirname, '../assets'), function (err) {
+ghpages.publish(path.join(__dirname, './assets'), function (err) {
   console.log(err);
 });

docs/index.tsx

@@ -5,6 +5,8 @@ import CodeView from '../src';
 
 import './styles/index.less';
 
+const example = require('./example.md');
+
 const App = () => {
   return (
     <Grid>
@@ -16,7 +18,7 @@ const App = () => {
           return code.replace(/import\ [\w\,\{\}\ ]+\ from\ "[\w-]+";/gi, '');
         }}
       >
-        {require('./example.md')}
+        {example}
       </CodeView>
     </Grid>
   );

docs/styles/index.less

@@ -2,7 +2,7 @@
 @import '~codemirror/lib/codemirror.css';
 @import '~codemirror/theme/base16-light.css';
 @import '~codemirror/theme/base16-dark.css';
-@import '~highlight.js/styles/github.css';
+@import '~highlight.js/styles/base16/tomorrow.css';
 
 @import '../../src/less/styles.less';
 @import './markdown.less';

docs/webpack.config.js

@@ -52,14 +52,7 @@ module.exports = {
       },
       {
         test: /\.md$/,
-        use: [
-          {
-            loader: path.resolve('./webpack-md-loader'),
-            options: {
-              parseLanguages: ['javascript', 'bash', 'xml', 'css', 'markdown', 'less', 'typescript']
-            }
-          }
-        ]
+        loader: path.resolve('./webpack-md-loader')
       }
     ]
   },

gulpfile.js

@@ -13,7 +13,7 @@ const writeFile = util.promisify(fs.writeFile);
 
 function buildLess() {
   return gulp
-    .src([`${STYLE_SOURCE_DIR}/*.less`])
+    .src([`${STYLE_SOURCE_DIR}/index.less`])
     .pipe(sourcemaps.init())
     .pipe(less({ javascriptEnabled: true, paths: ['*.css', '*.less'] }))
     .pipe(postcss([require('autoprefixer')]))
@@ -32,10 +32,6 @@ function buildCSS() {
     .pipe(gulp.dest(`${STYLE_DIST_DIR}`));
 }
 
-function copyLessFiles() {
-  return gulp.src([`${STYLE_SOURCE_DIR}/*.less`]).pipe(gulp.dest(STYLE_DIST_DIR));
-}
-
 function copyDocs() {
   return gulp
     .src(['./README.md', './CHANGELOG.md', './LICENSE', 'package.json'])
@@ -58,11 +54,4 @@ function createPkgFile(done) {
     });
 }
 
-exports.build = gulp.series(
-  buildLess,
-  buildCSS,
-  copyLessFiles,
-  copyDocs,
-  copyLoader,
-  createPkgFile
-);
+exports.build = gulp.series(buildLess, buildCSS, copyDocs, copyLoader, createPkgFile);

package.json

@@ -1,17 +1,16 @@
 {
   "name": "react-code-view",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.17",
   "description": "Code view for React",
   "main": "cjs/index.js",
   "module": "esm/index.js",
   "typings": "esm/index.d.ts",
   "scripts": {
-    "build:umd": "rollup -c",
     "build:esm": "NODE_ENV=esm npx babel --extensions .ts,.tsx src --out-dir dist/esm",
     "build:cjs": "NODE_ENV=commonjs npx babel --extensions .ts,.tsx src --out-dir dist/cjs",
     "build:types": "npx tsc --emitDeclarationOnly --outDir dist/cjs && npx tsc --emitDeclarationOnly --outDir dist/esm",
     "build:gulp": "gulp build",
-    "build": "npm run clean && npm run build:umd && npm run build:esm && npm run build:cjs && npm run build:types && npm run build:gulp",
+    "build": "npm run clean && npm run build:esm && npm run build:cjs && npm run build:types && npm run build:gulp",
     "clean": "rimraf dist",
     "dev": "webpack serve --mode development --port 3100 --host 0.0.0.0 --progress --config ./docs/webpack.config.js",
     "docs": "rm -rf assets && webpack --mode production --config ./docs/webpack.config.js",
@@ -40,6 +39,7 @@
     "classnames": "^2.2.5",
     "codemirror": "5.65.6",
     "highlight.js": "^11.5.1",
+    "html-loader": "^3.1.2",
     "marked": "^4.0.17"
   },
   "peerDependencies": {
@@ -57,9 +57,7 @@
     "@babel/preset-env": "^7.7.7",
     "@babel/preset-react": "^7.7.4",
     "@babel/preset-typescript": "^7.12.7",
-    "@rollup/plugin-commonjs": "^22.0.1",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-typescript": "^8.3.3",
+    "@types/node": "^18.0.3",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "autoprefixer": "^10.4.7",
@@ -78,7 +76,6 @@
     "gulp-postcss": "^9.0.1",
     "gulp-rename": "^2.0.0",
     "gulp-sourcemaps": "^3.0.0",
-    "html-loader": "^3.1.2",
     "html-webpack-plugin": "^5.5.0",
     "less": "^4.1.3",
     "less-loader": "^11.0.0",
@@ -88,10 +85,6 @@
     "prettier": "^2.4.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "rollup": "^2.75.7",
-    "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-terser": "^7.0.2",
     "rsuite": "^5.15.2",
     "typescript": "^4.6.4",
     "webpack": "^5.73.0",