chore: update code editor

Author: adithyaakrishna

apps/sim/app/(landing)/studio/[slug]/prose-studio.css

@@ -66,8 +66,6 @@
 /* Code blocks */
 .prose-studio pre {
   background: #111111;
-  border: 1px solid #2a2a2a;
-  border-radius: 5px;
   padding: 1.5rem;
   overflow-x: auto;
   font-size: 0.875rem;
@@ -154,10 +152,11 @@
  * - Keywords/imports: #FA4EDF (pink)
  * - Strings: #FFCC02 (yellow)
  * - Functions/methods: #82aaff (periwinkle)
- * - Types/classes: #2ABBF8 (cyan)
+ * - Types/classes/properties: #2ABBF8 (cyan)
  * - Numbers/booleans: #00F701 (green)
  * - Comments: #666
  * - Operators/punctuation: #999
+ * - Plain text: #d4d4d8
  */
 
 .token.comment,
@@ -219,6 +218,18 @@
   color: #2abbf8;
 }
 
+.token.parameter {
+  color: #d4d4d8;
+}
+
+.token.template-string .token.interpolation {
+  color: #fa4edf;
+}
+
+.token.template-string .token.string {
+  color: #ffcc02;
+}
+
 /* Reduced motion */
 @media (prefers-reduced-motion: reduce) {
   .prose-studio a {

apps/sim/app/(landing)/studio/layout.tsx

@@ -49,7 +49,9 @@ export default function StudioLayout({ children }: { children: React.ReactNode }
         <StudioSidebar />
         <main className='relative flex-1'>{children}</main>
       </div>
-      <Footer />
+      <div className='border-t border-[#2A2A2A]'>
+        <Footer />
+      </div>
     </div>
   )
 }

apps/sim/content/blog/multiplayer/index.mdx

@@ -178,4 +178,4 @@ Multiplayer workflow building is no longer a technical curiosity—it's how team
 
 ---
 
-*Interested in how Sim's multiplayer system works in practice? [Try building a workflow](https://sim.ai) with a collaborator in real-time.*
+> Interested in how Sim's multiplayer system works in practice? [Try building a workflow](https://sim.ai) with a collaborator in real-time.

apps/sim/lib/blog/code.tsx

@@ -11,18 +11,26 @@ import 'prismjs/components/prism-bash'
 import 'prismjs/components/prism-css'
 import 'prismjs/components/prism-yaml'
 import 'prismjs/components/prism-markdown'
+import 'prismjs/components/prism-jsx'
+import 'prismjs/components/prism-tsx'
+import 'prismjs/components/prism-sql'
+import 'prismjs/components/prism-graphql'
+import 'prismjs/components/prism-go'
+import 'prismjs/components/prism-rust'
+import 'prismjs/components/prism-toml'
+import 'prismjs/components/prism-diff'
+import 'prismjs/components/prism-docker'
 
 interface CodeBlockProps {
   code: string
   language: string
-  filename?: string
 }
 
 const LANG_MAP: Record<string, string> = {
   js: 'javascript',
-  jsx: 'javascript',
+  jsx: 'jsx',
   ts: 'typescript',
-  tsx: 'typescript',
+  tsx: 'tsx',
   typescript: 'typescript',
   javascript: 'javascript',
   json: 'json',
@@ -36,37 +44,47 @@ const LANG_MAP: Record<string, string> = {
   yml: 'yaml',
   md: 'markdown',
   markdown: 'markdown',
-  markup: 'markup',
   html: 'markup',
   xml: 'markup',
-  php: 'php',
-  rust: 'rust',
+  sql: 'sql',
+  graphql: 'graphql',
   go: 'go',
-  java: 'java',
-  kotlin: 'kotlin',
-  scala: 'scala',
-  swift: 'swift',
-  dart: 'dart',
+  rust: 'rust',
+  toml: 'toml',
+  diff: 'diff',
+  dockerfile: 'docker',
 }
 
 const LANG_LABEL: Record<string, string> = {
   javascript: 'JavaScript',
   typescript: 'TypeScript',
+  jsx: 'JSX',
+  tsx: 'TSX',
   json: 'JSON',
   python: 'Python',
   bash: 'Bash',
   css: 'CSS',
+  html: 'HTML',
   yaml: 'YAML',
   markdown: 'Markdown',
+  sql: 'SQL',
+  graphql: 'GraphQL',
+  go: 'Go',
+  rust: 'Rust',
+  toml: 'TOML',
+  diff: 'Diff',
+  dockerfile: 'Dockerfile',
+  markup: 'HTML',
+  docker: 'Dockerfile',
 }
 
-export function CodeBlock({ code, language, filename }: CodeBlockProps) {
+export function CodeBlock({ code, language }: CodeBlockProps) {
   const [copied, setCopied] = useState(false)
 
   const lang = LANG_MAP[language.toLowerCase()] || 'javascript'
   const grammar = languages[lang] || languages.javascript
   const highlighted = highlight(code, grammar, lang)
-  const label = filename || LANG_LABEL[lang] || language
+  const label = LANG_LABEL[lang] || LANG_LABEL[language.toLowerCase()] || language || 'Code'
 
   const handleCopy = useCallback(async () => {
     try {