Merge pull request #28 from jackyzha0/save-png

save as png

1 files changed, 17 insertions, 15 deletions

diff --git a/frontend/src/components/renderers/Code.js b/frontend/src/components/renderers/Code.js
index a024bb7..3d84adb 100644
--- a/frontend/src/components/renderers/Code.js
+++ b/frontend/src/components/renderers/Code.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import styled from 'styled-components'
 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { atomOneLight, ascetic, atomOneDark, dracula, ocean } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 
@@ -35,22 +34,25 @@ export const LANGS = Object.freeze({
     'yaml': 'yaml'
 })
 
-const RelPositioning = styled.div`
-    position: relative; 
-`
+const CodeRenderer = React.forwardRef((props, ref) => {
+
+    const Pre = (props) => {
+        return (
+            <pre {...props} ref={ref} />
+        );
+    }
 
-const CodeRenderer = (props) => {
     return (
-        <RelPositioning>
-            <SyntaxHighlighter
-                className="codeBlock lt-shadow"
-                language={props.lang}
-                style={THEMES[props.theme]}
-                showLineNumbers >
-                {props.content}
-            </SyntaxHighlighter>
-        </RelPositioning>
+        <SyntaxHighlighter
+            className="codeBlock lt-shadow"
+            ref={ref}
+            language={props.lang}
+            style={THEMES[props.theme]}
+            showLineNumbers
+            PreTag={Pre}>
+            {props.content}
+        </SyntaxHighlighter>
     );
-};
+});
 
 export default CodeRenderer
\ No newline at end of file