support more markdown features (#19)

* feat: support markdown tables

* chore: update `README.md`

* feat: support `blockquote`

---------

Co-authored-by: sourcery-ai[bot] <58596630+sourcery-ai[bot]@users.noreply.github.com>

README.md

@@ -9,7 +9,15 @@ With Pythonline, you can easily share your Python snippets with others, without
 >>> math.pi
 ```
 
-How about `math.e`? try hovering this! 👉 `math.pi / math.e`
+If you hover over the code block above, you will see a button to run the code.
+After that, you can inspect these values by hovering over them 👇
+
+| Kind           | Examples                                      |
+| -------------- | --------------------------------------------- |
+| Global Names   | `_`, `__name__`, `int`, `Exception`           |
+| Literal Values | `[{}]`, `1,2`, `1+2j`, `.0`, `0b10`           |
+| Expressions    | `math.pi / 2`                                 |
+| Assignments    | `one = -(math.e ** complex(0, math.pi)).real` |
 
 ## Main Features
 
@@ -64,7 +72,7 @@ async def f(url):
 await gather(*(f(".") for _ in range(10)))
 ```
 
-This project is still work in progress for now, so feel free to [get in touch](https://github.com/promplate/pyth-on-line/discussions) if you have any feedback or suggestions!
+> This project is still work in progress for now, so feel free to [get in touch](https://github.com/promplate/pyth-on-line/discussions) if you have any feedback or suggestions!
 
 ## Acknowledgements
 

package.json

@@ -34,14 +34,14 @@
     "paneforge": "^0.0.5",
     "pyodide": "0.26.2",
     "rehype-stringify": "^10.0.0",
-    "remark-parse": "^11.0.0",
+    "remark": "^15.0.1",
+    "remark-gfm": "^4.0.0",
     "remark-rehype": "^11.1.0",
     "rollup-plugin-flatten-dir": "^1.0.1",
     "shiki": "^1.12.0",
     "svelte": "^4.2.18",
     "svelte-portal": "^2.2.1",
     "svelte-sonner": "0.3.27",
-    "unified": "^11.0.5",
     "unocss": "^0.61.6",
     "vite": "^5.3.5"
   },

src/lib/components/markdown/Router.svelte

@@ -6,6 +6,7 @@
   import InlineCode from "./InlineCode.svelte";
   import Link from "./Link.svelte";
   import Code from "./Pre.svelte";
+  import Table from "./Table.svelte";
 
   export let node: Node;
 
@@ -13,7 +14,7 @@
   export let codeProps: Record<string, any> = {};
   export let inlineCodeProps: Record<string, any> = {};
 
-  function getTagName(node: Node): string {
+  function getTagName(node: Node) {
     switch (node.type) {
       case "heading":
         return `h${(node as Heading).depth}`;
@@ -33,9 +34,12 @@
       case "paragraph":
         return "p";
 
+      case "blockquote":
+        return "blockquote";
+
       default:
         console.error(node);
-        return "div";
+        return null;
     }
   }
 
@@ -65,7 +69,13 @@
     {/each}
   </Link>
 
-{:else if "children" in node}
+{:else if node.type === "table"}
+
+  <Table {node} let:child>
+    <svelte:self node={child} {OverrideCode} {codeProps} {inlineCodeProps} />
+  </Table>
+
+{:else if "children" in node && getTagName(node)}
 
   <svelte:element this={getTagName(node)}>
     {#each children as child}

src/lib/components/markdown/Table.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import type { Node, Table } from "mdast";
+
+  export let node: Node;
+
+  $: table = node as Table;
+</script>
+
+<table>
+
+  <thead>
+    <tr>
+      {#each table.children[0].children as cell}
+        <th>
+          {#each cell.children as child}
+            <slot {child} />
+          {/each}
+        </th>
+      {/each}
+    </tr>
+  </thead>
+
+  <tbody>
+    {#each table.children.slice(1) as row}
+      <tr>
+        {#each row.children as cell}
+          <td>
+            {#each cell.children as child}
+              <slot {child} />
+            {/each}
+          </td>
+        {/each}
+      </tr>
+    {/each}
+  </tbody>
+
+</table>

src/lib/components/reusable/WithMarkdown.svelte

@@ -1,10 +1,10 @@
 <script context="module">
   import "../../md.css";
 
-  import remarkParse from "remark-parse";
+  import { remark } from "remark";
-  import { unified } from "unified";
+  import remarkGfm from "remark-gfm";
 
-  const processor = unified().use(remarkParse);
+  const processor = remark().use(remarkGfm);
   const parse = processor.parse.bind(processor);
 </script>
 

src/lib/md.css

@@ -27,3 +27,27 @@
 .prose a:hover code {
   @apply text-white underline-op-60;
 }
+
+.prose table {
+  @apply w-fit b-1 b-white/6 rounded-md text-left;
+}
+
+.prose thead {
+  @apply bg-white/2 font-bold op-90;
+}
+
+.prose tr {
+  @apply b-b-1 b-white/6;
+}
+
+.prose tbody tr {
+  @apply transition-background-color last:b-b-none even:bg-white/2;
+}
+
+.prose tbody:hover tr {
+  @apply even:bg-white/1 hover:bg-white/4;
+}
+
+.prose blockquote {
+  @apply b-(l-0.2em white/10 solid) pl-1em not-italic;
+}