add support for external images in chat #235

client/src/components/markdown.tsx

@@ -2,14 +2,15 @@ import * as React from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkMath from 'remark-math'
 import rehypeKatex from 'rehype-katex'
+import rehypeRaw from 'rehype-raw'
 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, gfm],
-        rehypePlugins: [...props.remarkPlugins ?? [], rehypeKatex],
+        rehypePlugins: [...props.remarkPlugins ?? [], rehypeKatex, rehypeRaw],
       };
       return (
         <ReactMarkdown {...newProps} className="markdown" />

doc/hints.md

@@ -119,3 +119,17 @@ $$
 ```
 
 See https://www.jmilne.org/not/Mamscd.pdf
+
+### Images
+
+Hints and introductions/conclusions can also contain images.
+
+For remote images, simply add:
+
+```
+<img src=\"https://url.com/to/image\"/>
+```
+
+Local images can currently only be included with a hack:
+
+Images in the game's `images/` folder will be accessible at `data/g/[user]/[repo]/[image].[png|jpg|…]` and thus can be included as if they were external images.