update: development

Signed-off-by: Vinyl-Davyl <[email protected]>

package.json

@@ -26,6 +26,7 @@
     "@types/styled-components": "^5.1.34",
     "antd": "^5.7.2",
     "core-js": "^3.37.1",
+    "highlight.js": "^11.10.0",
     "immer": "^10.1.1",
     "lz-string": "^1.5.0",
     "monaco-editor": "^0.50.0",
@@ -39,6 +40,8 @@
     "react-shepherd": "^6.1.1",
     "react-spring": "^9.7.4",
     "regenerator-runtime": "^0.13.11",
+    "rehype-highlight": "^7.0.0",
+    "rehype-raw": "^7.0.0",
     "shepherd.js": "^13.0.3",
     "styled-components": "^6.1.12",
     "ts-debounce": "^4.0.0",

src/App.tsx

@@ -159,6 +159,10 @@ const App = () => {
                 path="module2"
                 element={<LearnContent file="module2.md" />}
               />
+              <Route
+                path="module3"
+                element={<LearnContent file="module3.md" />}
+              />
             </Route>
           </Routes>
         </Content>

src/components/Content.tsx

@@ -1,16 +1,24 @@
 import React, { useEffect, useState } from "react";
 import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import rehypeHighlight from "rehype-highlight";
 import { useNavigate } from "react-router-dom";
 import {
   ContentContainer,
   NavigationButtons,
   NavigationButton,
 } from "../styles/components/Content";
-import { LoadingOutlined } from "@ant-design/icons";
+import {
+  LoadingOutlined,
+  LeftOutlined,
+  RightOutlined,
+} from "@ant-design/icons";
 import { Spin } from "antd";
 import fetchContent from "../utils/fetchContent";
 import { steps } from "../constants/learningSteps/steps";
-import { LeftOutlined, RightOutlined } from "@ant-design/icons";
+
+// markdown syntax highlighting theme
+import "highlight.js/styles/github.css";
 
 interface LearnContentProps {
   file: string;
@@ -80,7 +88,20 @@ const LearnContent: React.FC<LearnContentProps> = ({ file }) => {
 
   return (
     <ContentContainer>
-      {content && <ReactMarkdown>{content}</ReactMarkdown>}
+      {content && (
+        <ReactMarkdown
+          rehypePlugins={[rehypeRaw, rehypeHighlight]}
+          components={{
+            img: ({ node, ...props }) => (
+              <div className="image-container">
+                <img {...props} alt={props.alt || ""} />
+              </div>
+            ),
+          }}
+        >
+          {content}
+        </ReactMarkdown>
+      )}
       <NavigationButtons>
         <NavigationButton
           onClick={handlePrevious}