Markdown & Math Support

Writing with Markdown

Blogify uses a high-performance Markdown engine to turn your plain text into beautifully formatted articles. Whether you are writing a technical tutorial, a personal story, or a research paper, you can use standard Markdown syntax to structure your content.

Supported Formatting

Mathematical Expressions

For researchers, engineers, and students, Blogify includes built-in support for KaTeX. This allows you to render complex mathematical formulas directly within your posts using LaTeX-style syntax.

Inline Math

To include math within a sentence, wrap your expression in single dollar signs ($).

Input: The Pythagorean theorem is $a^2 + b^2 = c^2$.
Output: The Pythagorean theorem is $a^2 + b^2 = c^2$.

Block Math

For larger equations that need their own line, wrap the expression in double dollar signs ($$).

$$
I = \int_{0}^{\infty} e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
$$

Images and Media

Blogify handles images in two ways to give you maximum flexibility:

Direct Upload: Use the image uploader in the post editor to host images directly on our servers. This will automatically insert the correct Markdown syntax into your editor.
External Images: If your image is hosted elsewhere, use the standard Markdown image syntax: ![Alt text](https://example.com/image.png)

Our renderer automatically "unwraps" images from paragraphs to ensure they display at full width with proper styling and rounded corners.

Technical Integration

If you are extending Blogify or curious about how the rendering works, the platform leverages the following ecosystem:

react-markdown: The core parser for transforming Markdown into React components.
remark-math: A plugin that identifies mathematical strings in the Markdown source.
rehype-katex: The engine that transforms math strings into accessible HTML and CSS.
remark-unwrap-images: Ensures images aren't constrained by <p> tags for better layout control.

Content Styling

All rendered content is processed through Tailwind CSS's Typography (Prose) plugin, ensuring that headings, links, and code blocks look consistent across both light and dark modes.

// Example of the rendering component configuration
<ReactMarkdown
  remarkPlugins={[remarkMath, remarkUnwrapImages]}
  rehypePlugins={[rehypeKatex]}
  components={{
    img: ({src, alt}) => <img src={src} alt={alt} className="rounded-lg shadow-md" />,
    code: ({children}) => <code className="bg-indigo-50 dark:bg-slate-800 px-1 rounded">{children}</code>
  }}
>
  {post.content}
</ReactMarkdown>