Merge pull request #66 from jordan-dalby/markdown-fix

Fixed markdown, now correctly applies styling (and renamed hook file)

client/src/components/editor/FullCodeBlock.tsx

@@ -6,99 +6,99 @@ import { getLanguageLabel, getMonacoLanguage } from '../../utils/language/langua
 import CopyButton from '../common/buttons/CopyButton';
 
 export interface FullCodeBlockProps {
-    code: string;
-    language?: string;
-    showLineNumbers?: boolean;
-  }
-
-  export const FullCodeBlock: React.FC<FullCodeBlockProps> = ({ 
-    code, 
-    language = 'plaintext',
-    showLineNumbers = true
-  }) => {
-    const isMarkdown = getLanguageLabel(language) === 'markdown';
-    const [highlighterHeight, setHighlighterHeight] = useState<string>("100px");
-    const containerRef = useRef<HTMLDivElement>(null);
-    const LINE_HEIGHT = 19;
-
-    useEffect(() => {
-      updateHighlighterHeight();
-      const resizeObserver = new ResizeObserver(updateHighlighterHeight);
-      if (containerRef.current) {
-        resizeObserver.observe(containerRef.current);
-      }
-      return () => resizeObserver.disconnect();
-    }, [code]);
-
-    const updateHighlighterHeight = () => {
-      if (!containerRef.current) return;
-
-      const lineCount = code.split('\n').length;
-      const contentHeight = (lineCount * LINE_HEIGHT) + 35;
-      const newHeight = Math.min(500, Math.max(100, contentHeight));
-      setHighlighterHeight(`${newHeight}px`);
-    };
-
-    const customStyle = {
-      ...vscDarkPlus,
-      'pre[class*="language-"]': {
-        ...vscDarkPlus['pre[class*="language-"]'],
-        margin: 0,
-        fontSize: '13px',
-        background: '#1E1E1E',
-        padding: '1rem',
-      },
-      'code[class*="language-"]': {
-        ...vscDarkPlus['code[class*="language-"]'],
-        fontSize: '13px',
-        background: '#1E1E1E',
-        display: 'block',
-        textIndent: 0,
-      }
-    };
-
-    return (
+  code: string;
+  language?: string;
+  showLineNumbers?: boolean;
+}
+
+export const FullCodeBlock: React.FC<FullCodeBlockProps> = ({ 
+  code, 
+  language = 'plaintext',
+  showLineNumbers = true
+}) => {
+  const isMarkdown = getLanguageLabel(language) === 'markdown';
+  const [highlighterHeight, setHighlighterHeight] = useState<string>("100px");
+  const containerRef = useRef<HTMLDivElement>(null);
+  const LINE_HEIGHT = 19;
+
+  useEffect(() => {
+    updateHighlighterHeight();
+    const resizeObserver = new ResizeObserver(updateHighlighterHeight);
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+    return () => resizeObserver.disconnect();
+  }, [code]);
+
+  const updateHighlighterHeight = () => {
+    if (!containerRef.current) return;
+
+    const lineCount = code.split('\n').length;
+    const contentHeight = (lineCount * LINE_HEIGHT) + 35;
+    const newHeight = Math.min(500, Math.max(100, contentHeight));
+    setHighlighterHeight(`${newHeight}px`);
+  };
+
+  const customStyle = {
+    ...vscDarkPlus,
+    'pre[class*="language-"]': {
+      ...vscDarkPlus['pre[class*="language-"]'],
+      margin: 0,
+      fontSize: '13px',
+      background: '#1E1E1E',
+      padding: '1rem',
+    },
+    'code[class*="language-"]': {
+      ...vscDarkPlus['code[class*="language-"]'],
+      fontSize: '13px',
+      background: '#1E1E1E',
+      display: 'block',
+      textIndent: 0,
+    }
+  };
+
+  return (
+    <div className="relative">
       <div className="relative">
-        <div className="relative">
-          {isMarkdown ? (
-            <div className="markdown-content">
-              <ReactMarkdown className="text-sm text-gray-300 markdown">
-                {code}
-              </ReactMarkdown>
-            </div>
-          ) : (
-            <div 
-              ref={containerRef}
-              style={{ maxHeight: '500px' }}
+        {isMarkdown ? (
+          <div className="markdown-content bg-gray-800 rounded-lg">
+            <ReactMarkdown className="markdown prose prose-invert max-w-none">
+              {code}
+            </ReactMarkdown>
+          </div>
+        ) : (
+          <div 
+            ref={containerRef}
+            style={{ maxHeight: '500px' }}
+          >
+            <SyntaxHighlighter
+              language={getMonacoLanguage(language)}
+              style={customStyle}
+              showLineNumbers={showLineNumbers}
+              wrapLines={true}
+              lineProps={{
+                style: { 
+                  whiteSpace: 'pre',
+                  wordBreak: 'break-all',
+                  paddingLeft: 0
+                }
+              }}
+              customStyle={{
+                height: highlighterHeight,
+                minHeight: '100px',
+                marginBottom: 0,
+                marginTop: 0,
+                textIndent: 0,
+                paddingLeft: showLineNumbers ? 10 : 20
+              }}
             >
-              <SyntaxHighlighter
-                language={getMonacoLanguage(language)}
-                style={customStyle}
-                showLineNumbers={showLineNumbers}
-                wrapLines={true}
-                lineProps={{
-                  style: { 
-                    whiteSpace: 'pre',
-                    wordBreak: 'break-all',
-                    paddingLeft: 0
-                  }
-                }}
-                customStyle={{
-                  height: highlighterHeight,
-                  minHeight: '100px',
-                  marginBottom: 0,
-                  marginTop: 0,
-                  textIndent: 0,
-                  paddingLeft: showLineNumbers ? 10 : 20
-                }}
-              >
-                {code}
-              </SyntaxHighlighter>
-            </div>
-          )}
-
-          <CopyButton text={code} />
-        </div>
+              {code}
+            </SyntaxHighlighter>
+          </div>
+        )}
+
+        <CopyButton text={code} />
       </div>
-    );
-  };
+    </div>
+  );
+};

client/src/components/editor/PreviewCodeBlock.tsx

@@ -46,6 +46,15 @@ export const PreviewCodeBlock: React.FC<PreviewCodeBlockProps> = ({
     <div className="relative select-none" style={{ height: visibleHeight }}>
       <style>
         {`
+          .markdown-content-preview {
+            color: white;
+            background-color: #1E1E1E;
+            padding: 1rem;
+            border-radius: 0.5rem;
+            position: relative;
+            max-height: ${visibleHeight}px;
+            overflow: hidden;
+          }
           .token-line:nth-child(n+${previewLines + 1}) {
             visibility: hidden;
           }
@@ -57,8 +66,8 @@ export const PreviewCodeBlock: React.FC<PreviewCodeBlockProps> = ({
 
       <div className="relative">
         {isMarkdown ? (
-          <div className="markdown-content-preview">
-            <ReactMarkdown className="text-sm text-gray-300 markdown">
+          <div className="markdown-content markdown-content-preview bg-gray-800 rounded-lg overflow-hidden">
+            <ReactMarkdown className="markdown prose prose-invert max-w-none">
               {truncatedCode}
             </ReactMarkdown>
           </div>

client/src/index.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
 import './index.css'
+import './styles/markdown.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>

client/src/styles/markdown.css

@@ -1,84 +1,58 @@
-.markdown {
-  color: theme('colors.gray.100');
-  line-height: 1.6;
+.markdown-content {
+  color: white;
+  background-color: #1E1E1E;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  position: relative;
 }
 
-.markdown h1 {
-  font-size: 2em;
-  margin-top: 0.67em;
-  margin-bottom: 0.67em;
-  font-weight: bold;
+.markdown-content > :first-child {
+  margin-top: 0 !important;
 }
 
-.markdown h2 {
-  font-size: 1.5em;
-  margin-top: 0.83em;
-  margin-bottom: 0.83em;
-  font-weight: bold;
+.markdown-content > :last-child {
+  margin-bottom: 0 !important;
 }
 
-.markdown h3 {
-  font-size: 1.17em;
-  margin-top: 1em;
-  margin-bottom: 1em;
-  font-weight: bold;
+.markdown-content blockquote {
+  border-left: 3px solid #4a5568;
+  padding-left: 1rem;
+  margin: 1rem 0;
+  color: #a0aec0;
 }
 
-.markdown p {
-  margin-top: 1em;
-  margin-bottom: 1em;
-}
-
-.markdown ul {
-  list-style-type: disc;
-  margin-left: 2em;
-}
-
-.markdown ol {
-  list-style-type: decimal;
-  margin-left: 2em;
-}
-
-.markdown code {
-  background-color: theme('colors.gray.800');
-  padding: 0.2em 0.4em;
-  border-radius: 0.25em;
-  font-family: theme('fontFamily.mono');
+.markdown-content table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1rem 0;
 }
 
-.markdown pre {
-  background-color: theme('colors.gray.800');
-  padding: 1em;
-  border-radius: 0.5em;
-  overflow-x: auto;
-  margin: 1em 0;
+.markdown-content th,
+.markdown-content td {
+  border: 1px solid #4a5568;
+  padding: 0.5rem;
+  text-align: left;
 }
 
-.markdown pre code {
-  background-color: transparent;
-  padding: 0;
-  border-radius: 0;
+.markdown-content th {
+  background-color: #2d3748;
 }
 
-.markdown blockquote {
-  border-left: 4px solid theme('colors.gray.600');
-  padding-left: 1em;
-  margin: 1em 0;
-  color: theme('colors.gray.400');
+.markdown-content hr {
+  border: 0;
+  border-top: 1px solid #4a5568;
+  margin: 1rem 0;
 }
 
-.markdown table {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 1em 0;
+.markdown.prose > :first-child {
+  margin-top: 0 !important;
 }
 
-.markdown th,
-.markdown td {
-  border: 1px solid theme('colors.gray.600');
-  padding: 0.5em;
+.markdown.prose > * {
+  margin-top: 1rem !important;
+  margin-bottom: 1rem !important;
 }
 
-.markdown th {
-  background-color: theme('colors.gray.800');
+.markdown.prose > :last-child {
+  margin-bottom: 0 !important;
 }