styling updates

src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx

@@ -131,9 +131,25 @@ export default function EditAssignment({
       Body={
         <>
           {showHelp && (
-            <pre className=" max-w-96">
-              <code>{getAssignmentHelpString(settings)}</code>
-            </pre>
+            <div className=" max-w-96">
+              <pre>
+                <code>{getAssignmentHelpString(settings)}</code>
+              </pre>
+              <a
+                href="https://www.markdownguide.org/cheat-sheet/"
+                target="_blank"
+                className="text-blue-400 underline"
+              >
+                Markdown Cheat Sheet
+              </a>
+              <a
+                href="https://mermaid.live/edit"
+                target="_blank"
+                className="text-blue-400 underline ps-3"
+              >
+                Mermaid Live Editor
+              </a>
+            </div>
           )}
           <div className="flex-1 h-full">
             <MonacoEditor key={monacoKey} value={text} onChange={textUpdate} />

src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/getAssignmentHelpString.tsx

@@ -20,7 +20,42 @@ AllowedFileUploadExtensions:
 
 description goes here
 
+
+## Markdown
+You can use markdown to format your assignment description. For example, you can make lists like this:
+- Item 1
+- Item 2
+- Item 3
+
+**Bold text**
+
+*Italic text*
+
+[Link to Canvas](https://canvas.instructure.com)
+
+\`Inline code\`
+
+> Blockquote
+
+---
+
+1. First item
+2. Second item
+3. Third item
+
+you can make mermaid diagrams like this:
+
+\`\`\`mermaid
+flowchart TD
+    A[Christmas] -->|Get money| B(Go shopping)
+    B --> C{Let me think}
+    C -->|One| D[Laptop]
+    C -->|Two| E[iPhone]
+    C -->|Three| F[fa:fa-car Car]
+\`\`\`
+
 ## Rubric
+
 - 1pt: singular point
 - 1pts: plural points
 - 10pts: (extra credit) extra credit points