added some markdown stylings

src/components/comment/CommentTextBlock/index.tsx

@@ -1,13 +1,15 @@
 import React, { FC } from 'react';
 import { ICommentBlockProps } from '~/constants/comment';
 import styles from './styles.module.scss';
+import classNames from 'classnames';
+import markdown from '~/styles/common/markdown.module.scss';
 
 interface IProps extends ICommentBlockProps {}
 
 const CommentTextBlock: FC<IProps> = ({ block }) => {
   return (
     <div
-      className={styles.text}
+      className={classNames(styles.text, markdown.wrapper)}
       dangerouslySetInnerHTML={{
         __html: block.content,
       }}

src/styles/common/markdown.module.scss

@@ -0,0 +1,60 @@
+@import "../variables";
+
+.wrapper {
+  pre {
+    background-color: darken($comment_bg, 2%);
+    border: {
+      left: 4px solid $red;
+     right: 4px solid $red;
+    }
+    font-family: monospace;
+    font-size: 13px;
+    padding: $gap;
+    border-radius: $radius;
+  }
+
+  p {
+    margin-bottom: $gap;
+  }
+
+  h5, h4, h3, h2, h1 {
+    color: white;
+    font-weight: 800;
+    line-height: 1.2em;
+  }
+
+  h1 {
+    font-size: 2em;
+  }
+
+  h2 {
+    font-size: 1.8em;
+  }
+
+  h3 {
+    font-size: 1.6em;
+  }
+
+  h4 {
+    font-size: 1.4em;
+  }
+
+  h5 {
+    font-size: 1.2em;
+  }
+
+  ul {
+    list-style: disc;
+    padding-left: 20px;
+    margin-bottom: $gap;
+
+    li {
+      margin: 5px 0;
+    }
+  }
+
+  :global(.grey) {
+    color: #555555;
+    white-space: pre-line;
+  }
+}

src/utils/dom.ts

@@ -19,6 +19,7 @@ import {
   formatTextSanitizeYoutube,
   formatTextTodos,
 } from '~/utils/formatText';
+import { splitTextByYoutube, splitTextOmitEmpty } from '~/utils/splitText';
 
 export const getStyle = (oElm: any, strCssRule: string) => {
   if (document.defaultView && document.defaultView.getComputedStyle) {
@@ -112,9 +113,10 @@ export const findBlockType = (line: string): ValueOf<typeof COMMENT_BLOCK_TYPES>
 };
 
 export const splitCommentByBlocks = (text: string): ICommentBlock[] =>
-  text
+  pipe(
-    .split(/(https?:\/\/(?:www\.)(?:youtube\.com|youtu\.be)\/(?:watch)(?:\?v=)[\w\-\&\=]+)/)
+    splitTextByYoutube,
-    .map(line => ({
+    splitTextOmitEmpty
+  )([text]).map(line => ({
     type: findBlockType(line),
     content: line,
   }));

src/utils/splitText.ts

@@ -0,0 +1,11 @@
+import { flatten } from 'ramda';
+
+export const splitTextByYoutube = (strings: string[]): string[] =>
+  flatten(
+    strings.map(str =>
+      str.split(/(https?:\/\/(?:www\.)(?:youtube\.com|youtu\.be)\/(?:watch)(?:\?v=)[\w\-\&\=]+)/)
+    )
+  );
+
+export const splitTextOmitEmpty = (strings: string[]): string[] =>
+  strings.filter(el => !!el.trim());