Merge pull request #44 from jackyzha0/markdown-improvement

made markdown render less bad

4 files changed, 37 insertions, 21 deletions

diff --git a/.gitignore b/.gitignore
index c508331..87aa836 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,7 +6,6 @@ go.sum
 frontend/node_modules
 frontend/build
 frontend/.pnp
-frontend/yarn.lock
 .pnp.js
 
 npm-debug.log*
diff --git a/README.md b/README.md
index 3bf9578..e5d15cf 100644
--- a/README.md
+++ b/README.md
@@ -3,9 +3,10 @@
 
 Frontend is in React and backend is in Go.
 
-![New Paste](https://user-images.githubusercontent.com/23178940/82101247-e4848a00-96c0-11ea-99c3-a2cd301c52bb.png)
-![View Paste](https://user-images.githubusercontent.com/23178940/82101258-e9493e00-96c0-11ea-98ec-595f5f6f8b1d.png)
-![View Paste (different theme)](https://user-images.githubusercontent.com/23178940/82101261-ea7a6b00-96c0-11ea-9cf1-9b81883ab9f5.png)
+![Go Paste Example](https://user-images.githubusercontent.com/23178940/83225601-06f0bb80-a135-11ea-9af2-9f2946459fe7.png)
+![Markdown Rendering](https://user-images.githubusercontent.com/23178940/83225605-0821e880-a135-11ea-9efd-e7242ebde265.png)
+![Showing off another theme!](https://user-images.githubusercontent.com/23178940/83225610-0a844280-a135-11ea-8c7c-4a0ecb13f379.png)
+![Latex Rendering](https://user-images.githubusercontent.com/23178940/83225613-0c4e0600-a135-11ea-9f27-e5653cf9f343.png)
 
 ## developing
 when doing local backend development, make sure you change the backend address to be localhost. You can find this on Line 4 of `frontend/src/helpers/httpHelper.js`
diff --git a/frontend/src/components/renderers/RenderDispatch.js b/frontend/src/components/renderers/RenderDispatch.js
index 35fdc54..3f1c87b 100644
--- a/frontend/src/components/renderers/RenderDispatch.js
+++ b/frontend/src/components/renderers/RenderDispatch.js
@@ -5,7 +5,7 @@ import Markdown from './Markdown'
 import CodeRenderer from './Code'
 
 const RenderWrapper = styled.div`
-    padding: 2em;
+    padding: 1em;
 `
 
 const RenderDispatch = React.forwardRef((props, ref) => {
@@ -17,7 +17,7 @@ const RenderDispatch = React.forwardRef((props, ref) => {
                 </RenderWrapper>)
         case 'markdown':
             return (
-                <RenderWrapper>
+                <RenderWrapper ref={ref} className="md" >
                     <Markdown content={props.content} />
                 </RenderWrapper>)
         default:
diff --git a/frontend/src/css/index.css b/frontend/src/css/index.css
index da345d7..a6e8e9c 100644
--- a/frontend/src/css/index.css
+++ b/frontend/src/css/index.css
@@ -11,11 +11,6 @@ body {
   font-family: 'Lora', serif;
 }
 
-h1 {
-  font-size: 50px;
-  margin: 0 0;
-}
-
 form {
   width: 100%;
 }
@@ -132,17 +127,9 @@ button[type=button] {
   margin: 2em 2em;
 }
 
-ul {
-  list-style-type: none;
-  display: inline-block;
-}
-
-li {
-  display: inline-block;
-  margin: 0 1em;
-}
-
 .mainLogo {
+  font-size: 50px;
+  margin: 0 0;
   display: inline-block;
 }
 
@@ -165,4 +152,33 @@ li {
 
 .mainLogo:hover a::after {
   width: 100%;
+}
+
+/* fixing markdown renderer */
+.md h3 {
+  font-weight: bold;
+}
+
+.md hr {
+  border-top: 1px solid #000;
+  border-style: solid;
+}
+
+.md code {
+  background: #00000008;
+  font-size: 0.8em;
+  padding: 0.2em 0.5em;
+}
+
+.md pre {
+  padding: 0.7em;
+  background: #00000008;
+}
+
+.md pre > code {
+  background: none;
+}
+
+.md table {
+  width: 100%;
 }
\ No newline at end of file