feat: implement highlight renderer

web/src/components/MemoContent/Highlight.tsx

@@ -0,0 +1,9 @@
+interface Props {
+  content: string;
+}
+
+const Highlight: React.FC<Props> = ({ content }: Props) => {
+  return <mark>{content}</mark>;
+};
+
+export default Highlight;

web/src/components/MemoContent/Renderer.tsx

@@ -7,6 +7,7 @@ import {
   CodeNode,
   EscapingCharacterNode,
   HeadingNode,
+  HighlightNode,
   HorizontalRuleNode,
   ImageNode,
   ItalicNode,
@@ -29,6 +30,7 @@ import Code from "./Code";
 import CodeBlock from "./CodeBlock";
 import EscapingCharacter from "./EscapingCharacter";
 import Heading from "./Heading";
+import Highlight from "./Highlight";
 import HorizontalRule from "./HorizontalRule";
 import Image from "./Image";
 import Italic from "./Italic";
@@ -92,6 +94,8 @@ const Renderer: React.FC<Props> = ({ index, node }: Props) => {
       return <Strikethrough {...(node.strikethroughNode as StrikethroughNode)} />;
     case NodeType.MATH:
       return <Math {...(node.mathNode as MathNode)} />;
+    case NodeType.HIGHLIGHT:
+      return <Highlight {...(node.highlightNode as HighlightNode)} />;
     case NodeType.ESCAPING_CHARACTER:
       return <EscapingCharacter {...(node.escapingCharacterNode as EscapingCharacterNode)} />;
     default:

web/src/components/MemoEditor/ActionButton/MarkdownMenu.tsx

@@ -1,4 +1,5 @@
 import { Dropdown, IconButton, Menu, MenuButton, MenuItem } from "@mui/joy";
+import { Link } from "@mui/joy";
 import toast from "react-hot-toast";
 import Icon from "@/components/Icon";
 import showPreviewMarkdownDialog from "@/components/PreviewMarkdownDialog";
@@ -93,6 +94,11 @@ const MarkdownMenu = (props: Props) => {
           <Icon.GanttSquare className="w-4 h-auto" />
           <span>Preview</span>
         </MenuItem>
+        <div className="-mt-0.5 pl-2">
+          <Link fontSize={12} href="https://www.usememos.com/docs/getting-started/content-syntax" target="_blank">
+            Content syntax
+          </Link>
+        </div>
       </Menu>
     </Dropdown>
   );