From 57584eeb0f8ba7212c613e0c79c20ec3dd67efc5 Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Sat, 6 Mar 2021 13:54:03 -0800
Subject: code input style finalizations

---
 frontend/src/components/renderers/Code.js | 33 +++++++++++++++++++------------
 1 file changed, 20 insertions(+), 13 deletions(-)

(limited to 'frontend/src/components/renderers/Code.js')

diff --git a/frontend/src/components/renderers/Code.js b/frontend/src/components/renderers/Code.js
index d9630fc..9243532 100644
--- a/frontend/src/components/renderers/Code.js
+++ b/frontend/src/components/renderers/Code.js
@@ -2,6 +2,7 @@ import React from 'react';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { atomOneLight, ascetic, atomOneDark, dracula, ocean } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import styled from 'styled-components'
+import {Rounded} from "../Form/mixins";
 
 export const THEMES = Object.freeze({
     'atom': atomOneLight,
@@ -14,43 +15,49 @@ export const THEMES = Object.freeze({
 export const LANGS = Object.freeze({
     'latex': 'latex',
     'markdown': 'markdown',
-    'auto': 'text',
+    'detect': 'text',
 })
 
-const StyledPre = styled.pre`
+export const StyledPre = styled.pre`
   width: 100%;
-  font-size: 0.8em;
-  min-height: 1.2em;
-  border-radius: 3px !important;
-  border: 1px solid #565656 !important;
+  font-size: 14px;
+  line-height: 1.2em;
   padding: calc(0.8em - 1px) !important;
-  outline: none;
   margin: 1.7em 0;
+  background: none !important;
+  position: relative;
+  ${Rounded}
+  outline: none;
+  border: 1px solid #565656 !important;
+  
+  & code {
+    font-family: JetBrains Mono !important;
+  }
 
-  & code:first-child {
+  & code:first-child:not(:only-of-type) {
     margin-right: 10px !important;
     border-radius: 0 !important;
     border-right: 1px solid #11111155 !important;
   }
 `
 
-export const Highlighter = ({language, theme, preTag, children}) => <SyntaxHighlighter
+export const Highlighter = ({language, lineNumbers, theme, pre = StyledPre, children}) => <SyntaxHighlighter
   language={LANGS[language]}
   style={THEMES[theme]}
-  showLineNumbers
-  PreTag={preTag}>
+  showLineNumbers={lineNumbers}
+  PreTag={pre}>
     {children}
 </SyntaxHighlighter>
 
 const CodeRenderer = React.forwardRef((props, ref) => {
     const Pre = (props) => <StyledPre {...props} ref={ref} />
-
     return (
         <div className="lt-shadow">
             <Highlighter
+                lineNumbers={true}
                 language={props.lang}
                 theme={props.theme}
-                preTag={Pre}
+                pre={Pre}
             >
                 {props.content}
             </Highlighter>
-- 
cgit v1.2.3