3 files changed, 41 insertions, 58 deletions

diff --git a/frontend/src/components/renderers/Code.js b/frontend/src/components/renderers/Code.js
index a312c51..4ab1175 100644
--- a/frontend/src/components/renderers/Code.js
+++ b/frontend/src/components/renderers/Code.js
@@ -1,7 +1,9 @@
 import React from 'react';
 import SyntaxHighlighter from 'react-syntax-highlighter';
+import virtualizedRenderer from 'react-syntax-highlighter-virtualized-renderer';
 import { atomOneLight, ascetic, atomOneDark, dracula, ocean } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import styled from 'styled-components'
+import {Border, CodeLike, DropShadow, Rounded} from "../Common/mixins";
 
 export const THEMES = Object.freeze({
     'atom': atomOneLight,
@@ -12,66 +14,50 @@ export const THEMES = Object.freeze({
 })
 
 export const LANGS = Object.freeze({
-    'bash': 'bash',
-    'c': 'c',
-    'c++': 'cpp',
-    'c#': 'cs',
-    'css': 'css',
-    'docker': 'dockerfile',
-    'go': 'go',
-    'haskell': 'haskell',
-    'html': 'html',
-    'java': 'java',
-    'js': 'javascript',
-    'jsx': 'jsx',
     'latex': 'latex',
-    'lisp': 'lisp',
-    'makefile': 'makefile',
     'markdown': 'markdown',
-    'php': 'php',
-    'python': 'python',
-    'raw': 'text',
-    'ruby': 'ruby',
-    'scala': 'scala',
-    'yaml': 'yaml'
+    'detect': 'text',
 })
 
-const StyledPre = styled.pre`
-  width: 100%;
-  font-size: 0.8em;
-  min-height: 1.2em;
-  border-radius: 3px !important;
-  border: 1px solid #565656 !important;
-  padding: calc(0.8em - 1px) !important;
-  outline: none;
+export const StyledPre = styled.pre`
+  ${Rounded};
+  ${Border};
+  ${DropShadow};
+  width: calc(100%);
+  padding: calc(0.6em - 1px) !important;
   margin: 1.7em 0;
+  position: relative;
+  outline: none;
+  
+  & code {
+    ${CodeLike}
+  }
 
-  & code:first-child {
+  & code:first-child:not(:only-of-type) {
     margin-right: 10px !important;
     border-radius: 0 !important;
     border-right: 1px solid #11111155 !important;
   }
 `
 
-const CodeRenderer = React.forwardRef((props, ref) => {
-
-    const Pre = (props) => {
-        return (
-            <StyledPre {...props} ref={ref} />
-        );
-    }
-
-    return (
-        <div className="lt-shadow">
-            <SyntaxHighlighter
-                language={LANGS[props.lang]}
-                style={THEMES[props.theme]}
-                showLineNumbers
-                PreTag={Pre}>
-                {props.content}
-            </SyntaxHighlighter>
-        </div>
-    );
-});
+export const Highlighter = ({language, lineNumbers, theme, pre = StyledPre, children}) => <SyntaxHighlighter
+  language={LANGS[language]}
+  style={THEMES[theme]}
+  showLineNumbers={lineNumbers}
+  PreTag={pre}>
+    {children}
+</SyntaxHighlighter>
+
+const CodeRenderer = (props) => {
+    return (<Highlighter
+      lineNumbers={true}
+      language={props.lang}
+      theme={props.theme}
+      renderer={virtualizedRenderer()}
+      pre={StyledPre}
+    >
+      {props.content}
+    </Highlighter>)
+};
 
 export default CodeRenderer
\ No newline at end of file
diff --git a/frontend/src/components/renderers/Raw.js b/frontend/src/components/renderers/Raw.js
index d4dc830..182bfff 100644
--- a/frontend/src/components/renderers/Raw.js
+++ b/frontend/src/components/renderers/Raw.js
@@ -1,12 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components'
 import { FetchPaste } from '../../helpers/httpHelper'
+import {CodeLike} from "../Common/mixins";
 
 const RawText = styled.pre`
-    word-wrap: break-word;
-    white-space: pre-wrap;
-    line-height: initial;
-    font-size: 0.8em;
+    ${CodeLike}
     padding: 0 1em;
 `
 
diff --git a/frontend/src/components/renderers/RenderDispatch.js b/frontend/src/components/renderers/RenderDispatch.js
index 3f1c87b..365a822 100644
--- a/frontend/src/components/renderers/RenderDispatch.js
+++ b/frontend/src/components/renderers/RenderDispatch.js
@@ -8,16 +8,16 @@ const RenderWrapper = styled.div`
     padding: 1em;
 `
 
-const RenderDispatch = React.forwardRef((props, ref) => {
+const RenderDispatch = (props) => {
     switch (props.language) {
         case 'latex':
             return (
-                <RenderWrapper ref={ref}>
+                <RenderWrapper>
                     <Latex content={props.content} />
                 </RenderWrapper>)
         case 'markdown':
             return (
-                <RenderWrapper ref={ref} className="md" >
+                <RenderWrapper className="md" >
                     <Markdown content={props.content} />
                 </RenderWrapper>)
         default:
@@ -26,9 +26,8 @@ const RenderDispatch = React.forwardRef((props, ref) => {
                     content={props.content}
                     lang={props.language}
                     theme={props.theme}
-                    ref={ref}
                     id="pasteInput" />)
     }
-});
+};
 
 export default RenderDispatch
\ No newline at end of file