Problem render markdown support at backend

Author: codeMaverick7770

client/package-lock.json

@@ -41,7 +41,9 @@
     "react-simple-code-editor": "^0.14.1",
     "react-split": "^2.0.14",
     "react-toastify": "^11.0.5",
+    "rehype-highlight": "^7.0.2",
     "rehype-katex": "^7.0.1",
+    "rehype-sanitize": "^6.0.0",
     "remark-math": "^6.0.0",
     "tailwind-merge": "^3.3.1",
     "three": "^0.179.1"

client/package.json

@@ -9,7 +9,11 @@ import { Player } from '@lottiefiles/react-lottie-player';
 import { Wand2, Check } from 'lucide-react';
 import Split from 'react-split';
 import 'katex/dist/katex.min.css';
-import { InlineMath } from 'react-katex';
+import ReactMarkdown from 'react-markdown';
+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
+import rehypeHighlight from 'rehype-highlight';
+import rehypeSanitize from 'rehype-sanitize';
 
 const defaultHelloWorld = {
   cpp: `#include <iostream>\nusing namespace std;\nint main() {\n  cout << \"Hello, World!\";\n  return 0;\n}`,
@@ -453,25 +457,6 @@ export default function CompilerPage() {
 
   const renderProblemDescription = () => {
     if (!problem) return null;
-    
-    const renderLinesWithLatex = (text) => {
-      return text.split("\n").map((line, idx) => (
-        <p key={idx} className="mb-2 leading-relaxed">
-          {line.includes("$") ? (
-            line.split("$").map((segment, i) =>
-              i % 2 === 1 ? (
-                <InlineMath math={segment} key={i} />
-              ) : (
-                <span key={i}>{segment}</span>
-              )
-            )
-          ) : (
-            line
-          )}
-        </p>
-      ));
-    };
-
     return (
       <div className="space-y-6 text-white font-sans">
         <h2 className="text-2xl font-extrabold mb-4 bg-gradient-to-r from-[#7286ff] to-[#fe7587] bg-clip-text text-transparent drop-shadow-lg">
@@ -484,7 +469,21 @@ export default function CompilerPage() {
               Description
             </h3>
             <div className="text-white text-sm leading-relaxed">
-              {renderLinesWithLatex(problem.description)}
+              <ReactMarkdown
+                children={problem.description}
+                remarkPlugins={[remarkMath]}
+                rehypePlugins={[rehypeKatex, rehypeHighlight, rehypeSanitize]}
+                components={{
+                  img: ({node, ...props}) => (
+                    <img {...props} style={{maxWidth: '100%', borderRadius: '8px', margin: '12px 0'}} alt={props.alt || ''} />
+                  ),
+                  code: ({node, inline, className, children, ...props}) => (
+                    <code className={className} style={{background: '#232347', color: '#ffb4d0', borderRadius: '4px', padding: '2px 6px', fontSize: '0.95em'}} {...props}>
+                      {children}
+                    </code>
+                  )
+                }}
+              />
             </div>
           </div>
 

client/src/pages/CompilerPage.jsx

@@ -1,6 +1,12 @@
 import { useState } from 'react';
 import API from '../services/api';
 import { useNavigate } from 'react-router-dom';
+import ReactMarkdown from 'react-markdown';
+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
+import rehypeHighlight from 'rehype-highlight';
+import rehypeSanitize from 'rehype-sanitize';
+import 'katex/dist/katex.min.css';
 
 export default function CreateProblem() {
   const [mode, setMode] = useState('single'); // 'single' or 'bulk'
@@ -24,6 +30,7 @@ export default function CreateProblem() {
   const [error, setError] = useState('');
   const [success, setSuccess] = useState('');
   const navigate = useNavigate();
+  const [showPreview, setShowPreview] = useState(false);
 
   const handleChange = (e) => {
     setForm({ ...form, [e.target.name]: e.target.value });
@@ -143,6 +150,37 @@ export default function CreateProblem() {
             Switch to {mode === 'single' ? 'Bulk Mode' : 'Single Mode'}
           </button>
         </div>
+        {/* Preview toggle button */}
+        {mode === 'single' && (
+          <button
+            type="button"
+            className="mb-4 px-4 py-1 rounded bg-gradient-to-r from-[#7286ff] to-[#fe7587] text-white font-semibold shadow hover:brightness-110"
+            onClick={() => setShowPreview((p) => !p)}
+          >
+            {showPreview ? 'Hide Preview' : 'Preview Description'}
+          </button>
+        )}
+        {/* Preview area */}
+        {showPreview && mode === 'single' && (
+          <div className="mb-6 p-4 bg-[#18182a] rounded-lg border border-[#7286ff]/30 text-white">
+            <h3 className="text-lg font-bold mb-2 text-[#7286ff]">Preview</h3>
+            <ReactMarkdown
+              children={form.description}
+              remarkPlugins={[remarkMath]}
+              rehypePlugins={[rehypeKatex, rehypeHighlight, rehypeSanitize]}
+              components={{
+                img: ({node, ...props}) => (
+                  <img {...props} style={{maxWidth: '100%', borderRadius: '8px', margin: '12px 0'}} alt={props.alt || ''} />
+                ),
+                code: ({node, inline, className, children, ...props}) => (
+                  <code className={className} style={{background: '#232347', color: '#ffb4d0', borderRadius: '4px', padding: '2px 6px', fontSize: '0.95em'}} {...props}>
+                    {children}
+                  </code>
+                )
+              }}
+            />
+          </div>
+        )}
 
         {error && <p className="text-red-500 mb-4">{error}</p>}
         {success && <p className="text-green-400 mb-4">{success}</p>}

client/src/pages/CreateProblem.jsx

@@ -3,7 +3,7 @@ import redisClient from '../utils/redisClient.js'; // adjust path if needed
 
 // Admin: Create problem
 export const createProblem = async (req, res) => {
-  const { title, description, difficulty, tags = [], testCases, solutionCode = {} } = req.body;
+  let { title, description, difficulty, tags = [], testCases, solutionCode = {} } = req.body;
 
   if (req.user.role !== 'admin') {
     return res.status(403).json({ error: 'Access denied: Admins only' });
@@ -13,6 +13,11 @@ export const createProblem = async (req, res) => {
     return res.status(400).json({ error: 'At least one test case is required' });
   }
 
+  // Convert all literal '\n' in description to real newlines
+  if (typeof description === 'string') {
+    description = description.replace(/\\n/g, '\n');
+  }
+
   try {
     const problem = await Problem.create({
       title,
@@ -40,19 +45,21 @@ export const bulkCreateProblems = async (req, res) => {
     return res.status(403).json({ error: 'Access denied: Admins only' });
   }
 
-  const problems = req.body;
+  let problems = req.body;
 
   if (!Array.isArray(problems)) {
     return res.status(400).json({ error: 'Expected an array of problems' });
   }
 
-  try {
-    const enrichedProblems = problems.map(p => ({
-      ...p,
-      createdBy: req.user.id,
-    }));
+  // Convert all literal '\n' in description to real newlines for each problem
+  problems = problems.map(p => ({
+    ...p,
+    description: typeof p.description === 'string' ? p.description.replace(/\\n/g, '\n') : p.description,
+    createdBy: req.user.id,
+  }));
 
-    const result = await Problem.insertMany(enrichedProblems);
+  try {
+    const result = await Problem.insertMany(problems);
     await redisClient.del('all_problems'); // Invalidate cache
     res.status(201).json({ message: `${result.length} problems added.` });
   } catch (err) {