DEV Community

Cover image for Stop Fighting AI Formatting: How I Built a "Sanitizer" for Messy AI Markdown
Suryansh Swarn
Suryansh Swarn

Posted on

Stop Fighting AI Formatting: How I Built a "Sanitizer" for Messy AI Markdown

#ai #webdev #javascript #react

The Problem: The "AI-to-Doc" Friction

We’ve all been there. You ask an AI like ChatGPT, Gemini, or NotebookLM to explain a complex topic. The output is great, but when you copy-paste it into a professional document or a standard editor, it looks... broken.

The biggest culprits? LaTeX delimiters. AI tools love using \[ ... \] for block math and \( ... \) for inline math. Most web-based markdown parsers don’t recognize these out of the box, leaving your document littered with backslashes and brackets instead of beautiful equations.

I decided to build a solution: Markdown Latex Pdf generator. A tool to solve this "messy copy-paste" journey.

The Tech Stack

To keep the app fast and responsive, I went with:

  • React (Vite): For the reactive UI.
  • Marked.js: For high-speed markdown parsing.
  • KaTeX: For math rendering that actually looks like a textbook.
  • html2pdf.js: To turn that "Liquid Glass" UI into a portable document.

The Engineering Challenge: The Regex "Sanitizer"

The core "intelligence" of this app isn't just the rendering; it’s the pre-processing. I realized that before I could hand the text over to marked.js, I had to translate "AI-speak" into "Standard-Markdown."

When I started building the app, I realized that simply using a markdown parser like marked.js wasn't enough. AI tools often wrap math equations in brackets that standard libraries don't recognize by default.

I had to implement a custom RegEx Sanitizer to "clean" the text before it even hit the parser.

The Code Snippet that fixed it:

// Sanitizing AI-specific delimiters to standard LaTeX $ and $$
const sanitized = rawInput
  .replace(/\\\[/g, '$$$$') // Convert \[ to $$
  .replace(/\\\]/g, '$$$$') // Convert \] to $$
  .replace(/\\\(/g, '$')    // Convert \( to $
  .replace(/\\\)/g, '$');   // Convert \) to $
Enter fullscreen mode Exit fullscreen mode

By implementing this "middleware" logic, I ensured that no matter how the AI formats the math, my app translates it into a standard format that KaTeX and marked.js can render perfectly.

Aesthetic Engineering: The "Liquid Glass" UI

As someone who bridges the gap between software utility and visual storytelling, I couldn't settle for a plain white text box. I engineered a "Liquid Glass" aesthetic.

Using modern CSS backdrop-filter: blur(), fixed mesh gradients, and a sleek dark-mode-first approach, the app feels like a premium desktop tool rather than a basic web form. It provides a "zen" environment for refining AI-generated content.

Modern Workflow: PWA & Mobile Responsiveness

A wide desktop screenshot of the application interface in dark mode.

A vertical screenshot showing the Markdown Latex Pdf web app running on a mobile device.

A vertical screenshot showing the Markdown Latex Pdf web app running on a mobile device.

A productivity tool is useless if it only works on a 27-inch monitor. I focused on two key features to make this app truly "portable":

  1. Fully Responsive Design: Using a fluid grid system, the "Liquid Glass" editor scales perfectly from a desktop setup to a mobile screen. Whether you are refining an AI response on your phone or your laptop, the UI remains intuitive and clutter-free.

  2. PWA Capable: I implemented a Web App Manifest and service worker configuration. This means you can "Install" the app directly onto your Windows, macOS, or Android device. It lives in your dock or app drawer, launches instantly, and feels like a native system utility.

My Journey & Documentation

Building this wasn't just about the code; it was about solving a personal workflow bottleneck. I wanted a way to turn a quick AI chat into a clean PDF I could share or submit, without the formatting headache.

Key Links:

Top comments (0)