Add MDX renderer for Markdown with JSX support

[Copilot]

Adds native support for .mdx files, enabling JSX syntax in Markdown posts. MDX files in _posts/ and _drafts/ are now automatically processed as posts.

Implementation

• Dependencies: Added @mdx-js/mdx for compilation, preact + preact-render-to-string for lightweight SSR (10KB vs React's 40KB)
• Renderer (lib/plugins/renderer/mdx.ts): Async renderer that evaluates MDX with Preact JSX runtime and outputs static HTML. Error messages include file paths and stack traces.
• Registration (lib/plugins/renderer/index.ts): Registered .mdx → html as async renderer with disableNunjucks flag

Features

Markdown Support

Standard Markdown syntax works as expected:

• Headings, bold, italic, links
• Lists and blockquotes
• Code blocks

JSX/React Elements

Full JSX syntax support including:

• JSX elements with HTML tags (<div className="alert">)
• JavaScript expressions ({new Date().getFullYear()})
• Inline styles as objects (style={{color: 'red', padding: '10px'}})
• Custom component definitions with props and children

Usage

Create posts with .mdx extension:

---
title: My Post
date: 2024-01-01
---

# Hello from MDX

Standard Markdown with **formatting** works.

- List items
- [Links](https://example.com)

<div className="alert">
  This is a **JSX element** with Markdown inside!
</div>

export const CustomAlert = ({children}) => (
  <div className="custom-alert">{children}</div>
);

<CustomAlert>
  Custom components work too!
</CustomAlert>

The existing post processor automatically detects and renders .mdx files via ctx.render.isRenderable().

Testing

• ✅ 10 comprehensive test cases covering both Markdown and JSX features
• ✅ All tests passing
• ✅ Compatible with existing markdown renderer (hexo-renderer-marked)
• ✅ No security vulnerabilities detected

Original prompt

Add support for .mdx file format so that users can write posts using MDX (Markdown with JSX).

Requirements

1. Install MDX dependencies: Add @mdx-js/mdx and required dependencies to package.json

2. Create MDX renderer: Create a new renderer file at lib/plugins/renderer/mdx.ts that:

   • Registers .mdx extension with the renderer system
   • Compiles MDX content to HTML
   • Outputs html format
   • Handles MDX compilation errors gracefully

3. Register the renderer: Update lib/plugins/renderer/index.ts to import and register the MDX renderer

4. Handle MDX in post processor: The existing lib/plugins/processor/post.ts already uses ctx.render.isRenderable(path) to check if files can be rendered. Once the MDX renderer is registered, .mdx files in _posts/ and _drafts/ directories will automatically be processed as posts.

Implementation Details

The MDX renderer should:

• Use the @mdx-js/mdx library to compile MDX to JavaScript, then evaluate to HTML
• Follow the same pattern as existing renderers (nunjucks, yaml, json)
• Be async (not sync)
• Handle the data parameter with path and text properties
• Return the compiled HTML string

Example MDX Renderer Structure

import { compile } from '@mdx-js/mdx';

function mdxRenderer(data, options) {
  // Compile MDX to JavaScript
  // Evaluate and render to HTML
  // Return HTML string
}

mdxRenderer.disableNunjucks = true;

export = mdxRenderer;

The renderer should be registered in the index file similar to other renderers:

renderer.register('mdx', 'html', require('./mdx'));

This pull request was created from Copilot chat.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[Bryan0324]

@copilot Check original markdown rendering availability.

[Copilot]

@copilot Check original markdown rendering availability.

✅ Original markdown rendering availability verified.

After loading hexo-renderer-marked, both formats work correctly:

• .md and .markdown files: Rendered by hexo-renderer-marked with anchor links
• .mdx files: Rendered by the new MDX renderer

Both renderers coexist without conflicts. The MDX implementation registers as a separate renderer and does not modify or interfere with existing markdown processing.

[Bryan0324]

@copilot Also check if react elements is available for rendering.

[Copilot]

@copilot Also check if react elements is available for rendering.

✅ React/JSX elements are fully available for rendering in MDX files.

Verified support for:

• JSX elements with HTML tags (<div className="alert">)
• JavaScript expressions ({new Date().getFullYear()})
• Inline styles as objects (style={{color: 'red'}})
• Custom component definitions and usage

Added comprehensive test coverage in commit f5473c9. All 10 MDX tests pass, including 4 JSX-specific tests.

[Bryan0324]

@copilot Check the results of react elements rendering.

[Copilot]

@copilot Check react elements is available for rendering or not.

✅ Confirmed: React/JSX elements ARE available for rendering.

All JSX features work correctly:

1. JSX Elements: <div className="alert"> → <div class="alert">
2. JS Expressions: {new Date().getFullYear()} → 2026
3. Inline Styles: style={{color: 'red'}} → style="color:red;"
4. Custom Components: Define and use React components with props

Test Coverage (commit f5473c9):

• ✅ 4 JSX-specific tests added
• ✅ All 10 MDX tests passing
• ✅ Verified: JSX elements, expressions, styles, and custom components

The MDX renderer uses Preact for JSX runtime and renders to static HTML.