updating Logic world

client/src/components/Markdown.tsx

@@ -3,11 +3,12 @@ import ReactMarkdown from 'react-markdown';
 import remarkMath from 'remark-math'
 import rehypeKatex from 'rehype-katex'
 import 'katex/dist/katex.min.css' // `rehype-katex` does not import the CSS for you
+import gfm from "remark-gfm";
 
 function Markdown(props) {
     const newProps = {
         ...props,
-        remarkPlugins: [...props.remarkPlugins ?? [], remarkMath],
+        remarkPlugins: [...props.remarkPlugins ?? [], remarkMath, gfm],
         rehypePlugins: [...props.remarkPlugins ?? [], rehypeKatex],
       };
       return (

client/src/components/TacticState.tsx

@@ -102,6 +102,7 @@ function TacticState({ goals, diagnostics, completed }) {
   const hasManyGoal = hasGoal && goals.length > 1
   return (
     <Box sx={{ height: "100%" }}>
+      {completed && <Typography variant="h6">Level completed ! 🎉</Typography>}
       {hasGoal &&
         <Paper sx={{ pt: 1, pl: 2, pr: 3, pb: 1, height: "100%" }}>
           <Typography variant="h5">Main Goal
@@ -114,7 +115,6 @@ function TacticState({ goals, diagnostics, completed }) {
           No goals
           (at <FontAwesomeIcon icon={faArrowPointer}></FontAwesomeIcon>)
         </Typography>}
-      {completed && <Typography variant="h6">Level completed ! 🎉</Typography>}
       {hasError &&
         <Paper sx={{ pt: 1, pl: 2, pr: 3, pb: 1, height: "100%" }}>
           <Typography variant="h5" sx={{ mb: 2 }}>Lean says</Typography>

client/src/components/level.css

@@ -48,6 +48,30 @@
   white-space: normal;
 }
 
+/* TODO: Adjust Mathjax styling. 1em vertical is excessive. */
+mjx-container[jax="CHTML"][display="true"] {
+  margin: 0.2em 0 !important;
+}
+
+
+/* Styling tables for Markdown */
+.message-panel table, .message-panel th, .message-panel td {
+  /* border: 1px solid rgb(0, 0, 0, 0.12); */
+  border-collapse: collapse;
+}
+
+.message-panel th, .message-panel td {
+  padding-left: .5em;
+  padding-right: .5em;
+}
+
+p, table {
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+}
+
 /***************************************/
 /* TODO: For development purposes only */
 /***************************************/