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..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';
-import { atomOneLight } from 'react-syntax-highlighter/styles/hljs';
+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,7 +48,6 @@ export default class extends React.Component {
     return (
       <div className={classNames('Code', { limitedHeight })} ref={el => (this.codeRef = el)}>
         <SyntaxHighlighter
-          language={language}
           style={atomOneLight}
           showLineNumbers={true}
           wrapLines={true}