From 7c2899d4fbe63526c66e596ac69a283205d0e6ee Mon Sep 17 00:00:00 2001
From: Ivan Verevkin <ivan.p.verevkin@gmail.com>
Date: Fri, 19 Jul 2019 17:00:36 +0200
Subject: [PATCH 1/2] fix: replaced SyntaxHighlighter to prism to fix react
 components

---
 package.json                                             | 2 +-
 src/public/js/components/sideBar/component/Code/index.js | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 40fdcc43..28034936 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,7 @@
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "react-redux": "^5.0.7",
-    "react-syntax-highlighter": "8.0.1",
+    "react-syntax-highlighter": "11.0.2",
     "redux": "^4.0.0",
     "redux-persist": "^5.10.0",
     "redux-saga": "^0.16.0",
diff --git a/src/public/js/components/sideBar/component/Code/index.js b/src/public/js/components/sideBar/component/Code/index.js
index 4f83ca6d..a5058706 100644
--- a/src/public/js/components/sideBar/component/Code/index.js
+++ b/src/public/js/components/sideBar/component/Code/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
-import SyntaxHighlighter from 'react-syntax-highlighter';
-import { atomOneLight } from 'react-syntax-highlighter/styles/hljs';
+import SyntaxHighlighter from 'react-syntax-highlighter/prism';
+import { coy } from 'react-syntax-highlighter/styles/prism';
 
 import './index.less';
 
@@ -49,7 +49,7 @@ export default class extends React.Component {
       <div className={classNames('Code', { limitedHeight })} ref={el => (this.codeRef = el)}>
         <SyntaxHighlighter
           language={language}
-          style={atomOneLight}
+          style={coy}
           showLineNumbers={true}
           wrapLines={true}
           customStyle={{

From e070f8874b4c33ee1eb71f9ae690296b89afcec7 Mon Sep 17 00:00:00 2001
From: Ivan Verevkin <ivan.p.verevkin@gmail.com>
Date: Mon, 22 Jul 2019 12:02:52 +0200
Subject: [PATCH 2/2] fix: reverted SyntaxHighlighter to hljs

---
 src/public/js/components/sideBar/component/Code/index.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/public/js/components/sideBar/component/Code/index.js b/src/public/js/components/sideBar/component/Code/index.js
index a5058706..f173f18a 100644
--- a/src/public/js/components/sideBar/component/Code/index.js
+++ b/src/public/js/components/sideBar/component/Code/index.js
@@ -1,13 +1,14 @@
 import React from 'react';
 import classNames from 'classnames';
-import SyntaxHighlighter from 'react-syntax-highlighter/prism';
-import { coy } from 'react-syntax-highlighter/styles/prism';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { atomOneLight } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 
 import './index.less';
 
 const FONT_SIZE = 12;
 const LINE_HEIGHT = 18;
 const PADDING_TOP = 5;
+
 //TODO: add select with several themes
 //TODO: scrool to/highlight crumbed lines
 //https://github.com/conorhastings/react-syntax-highlighter/blob/master/README.md
@@ -36,7 +37,6 @@ export default class extends React.Component {
 
   render() {
     const {
-      language,
       code,
       crumbedLines = [],
       dependenciesLines = [],
@@ -48,8 +48,7 @@ export default class extends React.Component {
     return (
       <div className={classNames('Code', { limitedHeight })} ref={el => (this.codeRef = el)}>
         <SyntaxHighlighter
-          language={language}
-          style={coy}
+          style={atomOneLight}
           showLineNumbers={true}
           wrapLines={true}
           customStyle={{