Replaced prismjs with highlightjs

Author: codeasashu

.babelrc

@@ -5,12 +5,6 @@
     ["@babel/plugin-proposal-class-properties", { "loose": false }],
     "@babel/plugin-proposal-optional-chaining",
     "@babel/plugin-transform-runtime",
-    ["prismjs", {
-      "languages": ["json", "markup"],
-      "plugins": ["line-numbers", "show-language"],
-      "theme": "okaidia",
-      "css": true
-    }]
   ],
   "presets": [
     "@babel/preset-flow",

package-lock.json

@@ -31,6 +31,7 @@
     "@stoplight/path": "^1.3.2",
     "class-autobind-decorator": "^3.0.1",
     "classnames": "^2.3.1",
+    "highlight.js": "^11.3.1",
     "immer": "^9.0.6",
     "js-yaml": "^4.1.0",
     "json-schema-faker": "^0.5.0-rcv.33",
@@ -40,7 +41,6 @@
     "mobx-react": "^7.2.0",
     "monaco-editor": "^0.27.0",
     "openapi3-ts": "^2.0.1",
-    "prismjs": "^1.25.0",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dnd": "^14.0.3",
@@ -114,7 +114,6 @@
     "autoprefixer": "^10.2.5",
     "babel-loader": "^8.0.6",
     "babel-plugin-lodash": "^3.3.4",
-    "babel-plugin-prismjs": "^2.0.1",
     "buffer": "^6.0.3",
     "css-loader": "^5.1.1",
     "enzyme-to-json": "^3.6.2",

package.json

@@ -2,7 +2,7 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import Editor from 'react-simple-code-editor';
-import Prism from 'prismjs';
+import hljs from 'highlight.js';
 
 class Code extends PureComponent {
   constructor(props) {
@@ -43,7 +43,7 @@ class Code extends PureComponent {
           preClassName=""
           value={value}
           highlight={(code) =>
-            code && Prism.highlight(code, Prism.languages.markup, 'markup')
+            code && hljs.highlight(code, {language: 'markup'}).value
           }
           onValueChange={(e) => this._handleChange(e)}
           onBlur={(e) => this._handleBlur(e.target.value)}

src/components/Editor/code.js

@@ -2,7 +2,7 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import Editor from 'react-simple-code-editor';
-import Prism from 'prismjs';
+import hljs from 'highlight.js';
 import {isObject} from 'lodash';
 
 class Json extends PureComponent {
@@ -65,7 +65,7 @@ class Json extends PureComponent {
           preClassName=""
           value={value}
           highlight={(code) =>
-            code && Prism.highlight(code, Prism.languages.json, 'json')
+            code && hljs.highlight(code, {language: 'json'}).value
           }
           onValueChange={(e) => this._handleChange(e)}
           onBlur={(e) => this._handleBlur(e.target.value)}

src/components/Editor/json.js

@@ -3,7 +3,7 @@ import React, {useState, useEffect} from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Editor from 'react-simple-code-editor';
-import Prism from 'prismjs';
+import hljs from 'highlight.js';
 
 const Markdown = ({value: initValue, onChange, ...props}) => {
   const [value, setValue] = useState(initValue || '');
@@ -37,7 +37,7 @@ const Markdown = ({value: initValue, onChange, ...props}) => {
         placeholder={props.placeholder || ''}
         value={value}
         highlight={(code) =>
-          code && Prism.highlight(code, Prism.languages.markup, 'markup')
+          code && hljs.highlight(code, {language: 'markdown'}).value
         }
         onValueChange={(e) => _handleChange(e)}
         onBlur={(e) => _handleBlur(e.target.value)}

src/components/Editor/markdown.js

@@ -1,12 +1,6 @@
 import React from 'react';
 import {render} from 'react-dom';
-import Prism from 'prismjs';
-require('prismjs/components/prism-markup');
-require('prismjs/components/prism-json');
-
-Prism.manual = true;
-Prism.highlightAll();
-
+import 'highlight.js/styles/monokai.css';
 import App from './app';
 
 import './css/overrides.scss';