Markdown rendering fixes

Author: jmgasper

package.json

@@ -143,13 +143,14 @@
     "redux": "^3.7.2",
     "redux-actions": "^2.4.0",
     "redux-promise": "^0.6.0",
-    "remark-breaks": "^2.0.2",
     "rehype-katex": "^5.0.0",
+    "rehype-raw": "^5.1.0",
+    "rehype-stringify": "^8.0.0",
+    "remark-breaks": "^2.0.2",
     "remark-frontmatter": "^3.0.0",
     "remark-gfm": "^1.0.0",
-    "remark-parse": "^9.0.0",
-    "rehype-stringify": "^8.0.0",
     "remark-math": "^4.0.0",
+    "remark-parse": "^9.0.0",
     "request-ip": "^2.0.2",
     "require-context": "^1.1.0",
     "rss": "^1.2.2",

src/shared/components/challenge-detail/Specification/SpecificationComponent/index.jsx

@@ -7,6 +7,9 @@ import remarkGfm from 'remark-gfm';
 import remarkParse from 'remark-parse';
 import rehypeStringify from 'rehype-stringify';
 import remarkFrontmatter from 'remark-frontmatter';
+import rehypeRaw from 'rehype-raw';
+import remarkBreaks from 'remark-breaks';
+import style from './styles.scss';
 
 // eslint-disable-next-line import/no-extraneous-dependencies
 import 'katex/dist/katex.min.css';
@@ -23,8 +26,10 @@ export default function SpecificationComponent({
           remarkFrontmatter,
           remarkParse,
           [remarkGfm, { singleTilde: false }],
+          remarkBreaks,
         ]}
-        rehypePlugins={[rehypeKatex, rehypeStringify]}
+        rehypePlugins={[rehypeKatex, rehypeStringify, rehypeRaw]}
+        className={style.container}
       >
         {bodyText}
       </ReactMarkdown>

src/shared/components/challenge-detail/Specification/SpecificationComponent/styles.scss

@@ -0,0 +1,27 @@
+@import "~styles/mixins";
+
+.container {
+  :global {
+    table {
+      display: block;
+      width: 100%;
+      overflow: auto;
+      box-sizing: border-box;
+
+      * {
+        box-sizing: border-box;
+      }
+
+      tr {
+        background-color: #fff;
+        border-top: 1px solid #c6cbd1;
+      }
+
+      th,
+      td {
+        padding: 6px 13px;
+        border: 1px solid #dfe2e5;
+      }
+    }
+  }
+}

src/shared/components/challenge-detail/Specification/styles.scss

@@ -169,10 +169,10 @@ $tc-link-visited: #0c4e98;
 
     li::before {
       display: table-cell;
-      font-weight: 700;
       text-align: right;
       content: counter(item) ".";
       padding: 0 10px 0 0;
+      white-space: nowrap;
     }
   }
 
@@ -352,10 +352,10 @@ $tc-link-visited: #0c4e98;
 
         &::before {
           display: table-cell;
-          font-weight: 700;
           text-align: right;
           content: counter(item) ".";
           padding: 0 10px 0 0;
+          white-space: nowrap;
         }
       }
     }