improve markdown rendering

frontend/package-lock.json

@@ -41,6 +41,7 @@
         "uuid": "^9.0.0"
       },
       "devDependencies": {
+        "@tailwindcss/typography": "^0.5.10",
         "@types/file-saver": "^2.0.7",
         "@types/lodash-es": "^4.17.12",
         "@types/react": "^18.2.6",
@@ -2283,6 +2284,34 @@
       "integrity": "sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw==",
       "dev": true
     },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.10",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.10.tgz",
+      "integrity": "sha512-Pe8BuPJQJd3FfRnm6H0ulKIGoMEQS+Vq01R6M5aCrFB/ccR/shT+0kXLjouGC1gFLm9hopTFN+DMP0pfwRWzPw==",
+      "dev": true,
+      "dependencies": {
+        "lodash.castarray": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.merge": "^4.6.2",
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
+    "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/@tensorflow/tfjs": {
       "version": "2.8.6",
       "resolved": "https://registry.npmjs.org/@tensorflow/tfjs/-/tfjs-2.8.6.tgz",
@@ -4242,6 +4271,24 @@
       "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
       "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
     },
+    "node_modules/lodash.castarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+      "dev": true
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "dev": true
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
     "node_modules/long": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",

frontend/package.json

@@ -42,6 +42,7 @@
     "uuid": "^9.0.0"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.10",
     "@types/file-saver": "^2.0.7",
     "@types/lodash-es": "^4.17.12",
     "@types/react": "^18.2.6",

frontend/src/components/MarkdownRender.tsx

@@ -23,7 +23,7 @@ const Hyperlink: FC<any> = ({ href, children }) => {
 
 const MarkdownRender: FC<ReactMarkdownOptions & { disabled?: boolean }> = (props) => {
   return (
-    <div dir="auto" className="markdown-body">
+    <div dir="auto" className="prose markdown-body" style={{ maxWidth: '100%' }}>
       {props.disabled ?
         <div style={{ whiteSpace: 'pre-wrap' }}>
           {props.children}

frontend/src/style.scss

@@ -46,48 +46,24 @@ body {
   overflow-y: auto;
   overflow-x: hidden;
 
-  ul,
-  ol {
-    padding-left: 1.5em;
-  }
-
-  ol {
-    list-style: none;
-    counter-reset: item;
-
-    li {
-      counter-increment: item;
-
-      &::marker {
-        content: counter(item) '. ';
-      }
-    }
-  }
-
   pre {
     padding: 0;
+    background: transparent;
 
     code {
       font-size: 14px;
     }
   }
 
-  p {
-    margin: 0 0 10px;
-  }
-
   code {
-    padding: 0 0.4em;
-    margin: 0;
     white-space: pre-wrap;
     word-break: break-word;
     border-radius: 8px;
     background-color: var(--color-neutral-muted);
-    font-size: 11px;
+  }
 
-    .hljs {
+  details summary {
-      padding: 0;
+    cursor: pointer;
-    }
   }
 }
 

frontend/tailwind.config.js

@@ -1,12 +1,121 @@
+const markdownElements = [
+  'div',
+  'p',
+  'span',
+
+  'video',
+  'img',
+
+  'abbr',
+  'acronym',
+  'b',
+  'blockquote',
+  'code',
+  'em',
+  'i',
+  'li',
+  'ol',
+  'ul',
+  'strong',
+  'table',
+  'tr',
+  'td',
+  'th',
+
+  'details',
+  'summary',
+  'kbd',
+  'samp',
+  'sub',
+  'sup',
+  'ins',
+  'del',
+  'var',
+  'q',
+  'dl',
+  'dt',
+  'dd',
+  'ruby',
+  'rt',
+  'rp',
+
+  'br',
+  'hr',
+
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+
+  'thead',
+  'tbody',
+  'tfoot',
+  'u',
+  's',
+  'a',
+  'pre',
+  'cite'
+]
+
+const markdownPseudoElements = [
+  '::marker',
+  '::before',
+  '::after'
+]
+
+const tableElements = [
+  'table',
+  'tr',
+  'td',
+  'th',
+  'thead',
+  'tbody',
+  'tfoot'
+]
+
+const proseStyles = {
+  color: 'inherit'
+}
+
+const tableProseStyles = {
+  ...proseStyles,
+  borderWidth: 'thin',
+  borderColor: '#d2d2d5'
+}
+
+const elementsStyles = markdownElements.reduce((acc, element) => {
+  let styles = proseStyles
+  if (tableElements.includes(element))
+    styles = tableProseStyles
+
+  acc[element] = styles
+  markdownPseudoElements.forEach(pseudo => {
+    acc[element + pseudo] = styles
+  })
+  return acc
+}, {})
+
 /** @type {import('tailwindcss').Config} */
 export default {
   content: [
-    "./index.html",
+    './index.html',
-    "./src/**/*.{js,ts,jsx,tsx}",
+    './src/**/*.{js,ts,jsx,tsx}'
   ],
   theme: {
-    extend: {},
+    extend: {
+      typography: {
+        DEFAULT: {
+          css: {
+            color: 'inherit',
+            fontSize: 'inherit',
+            ...elementsStyles
+          }
+        }
+      }
+    }
   },
-  plugins: [],
+  plugins: [require('@tailwindcss/typography')]
 }