Markdown & LaTeX Engine

Blogify features a robust rendering engine that transforms plain text into rich, interactive content. By leveraging a combination of Markdown and LaTeX support, the platform enables creators to publish everything from simple stories to complex technical and scientific articles.

Overview

The rendering pipeline is built on the React-Markdown ecosystem. It processes raw text through a series of transformations:

1. Parsing: Raw Markdown is parsed into a syntax tree using remark.
2. Transformation: Mathematical notation and media links are processed.
3. Rendering: The syntax tree is converted into optimized HTML via rehype and styled using Tailwind CSS's Typography plugin.

Standard Markdown Features

Blogify supports standard GitHub Flavored Markdown (GFM). This includes:

• Typography: Bold, italics, strikethrough, and blockquotes.
• Structure: Multi-level headings (H1–H6), ordered and unordered lists.
• Links & Code: Inline code snippets, fenced code blocks, and automatic link hydration.

Example Usage

### Getting Started
To install the dependencies, run:
`npm install`

> "Blogging is the new shelf space." - Seth Godin

LaTeX & Mathematical Notation

For technical writers, Blogify includes built-in support for LaTeX via the KaTeX library. This allows for high-performance, accessible rendering of mathematical formulas without requiring external plugins from the reader's side.

Inline Math

Wrap your expressions in single dollar signs: $E = mc^2$.

Block Math

For standalone equations, use double dollar signs:

$$
\int_{a}^{b} x^2 \,dx
$$

The engine uses remark-math to identify these patterns and rehype-katex to transform them into math-rendered HTML.

Image & Media Handling

The engine includes a specialized "Image Unwrapping" logic (remark-unwrap-images) to ensure that images are not nested inside paragraph tags, allowing for better responsive layouts and shadow effects.

• Auto-scaling: All images uploaded via the editor or linked via Markdown are automatically styled to fit the content width with rounded corners and subtle shadows.
• Alt Text: Supports standard Markdown image syntax: ![Image Description](url).

Code Highlighting

Technical content is supported with optimized code block styling.

• Syntax: Uses a specialized theme for the prose-pre and prose-code classes.
• Styling: Code blocks feature a dark background (even in light mode) for better contrast, while inline code uses a distinct indigo highlight to stand out within paragraphs.

Technical Specifications

For developers looking to extend the rendering capabilities, the following libraries power the engine:

| Library | Role | | :--- | :--- | | react-markdown | Core rendering component. | | remark-math | Parser for LaTeX math patterns. | | rehype-katex | Renderer for mathematical expressions. | | remark-unwrap-images | Removes parent <p> tags from images for cleaner DOM structure. | | @tailwindcss/typography | Provides the prose classes for automatic, beautiful styling. |

Configuration Example

The rendering logic is centralized in the PostPageContent component:

<ReactMarkdown
  remarkPlugins={[remarkMath, remarkUnwrapImages]}
  rehypePlugins={[rehypeKatex]}
  components={{
    // Custom overrides for specific HTML elements
    img: ({ node, ...props }) => (
      <img className="rounded-lg shadow-md" {...props} alt={props.alt || ''} />
    ),
  }}
>
  {post.content}
</ReactMarkdown>