Broken Duck Media Logo Broken Duck

About Services Products Resources

Markdown Content Engine

Content → Silver
đź’° $1000

Write content in markdown and render to HTML automatically.

Technology iconTechnology iconTechnology icon

Overview of Markdown Content Engine Module

Key Features:

Benefits:

Usage Scenarios:

Conclusion:

The Markdown Content Engine module is an indispensable tool for developers seeking efficient, reliable, and scalable markdown rendering capabilities. By automating the conversion process and offering extensive customization options, it significantly enhances productivity and collaboration. Its robust features make it a superior choice for integrating markdown into various applications, ensuring seamless content management and dynamic rendering.

Markdown Content Engine Documentation

Real-time Rendering

The module provides instant HTML output as you type in markdown. This real-time feedback enhances productivity by allowing immediate visualization of changes.

Syntax Highlighting

Elements such as headers, links, and code blocks are visually distinguished through syntax highlighting, improving the efficiency of writing and debugging.

Customizable Themes

Users can choose from various predefined themes or create custom ones to match their application’s design, ensuring a consistent look and feel.

Cross-platform Compatibility

The module works seamlessly across different operating systems and devices, making it accessible and reliable for diverse environments.

Security Sanitization

Automatically sanitizes rendered content to prevent XSS attacks, crucial for securely displaying user-generated markdown in web applications.

Markdown Content Engine Documentation

Overview

The Markdown Content Engine is a module designed to convert markdown content into HTML. It provides an API endpoint and a React component for seamless integration into web applications.

Features

Code Samples

FastAPI/Node.js Endpoint (FastAPI Example)

from fastapi import FastAPI, Request
from pydantic import BaseModel
import markdown

app = FastAPI()

class MarkdownRequest(BaseModel):
    id: str | None = None
    content: str
    options: dict | None = None

@app.post("/markdown-to-html")
async def convert_to_html(request: MarkdownRequest):
    """Convert markdown content to HTML."""
    try:
        html_content = markdown.markdown(request.content)
        return {"id": request.id, "html": html_content}
    except Exception as e:
        return {"error": str(e)}

React UI Snippet

import React, { useState, useEffect } from 'react';

function MarkdownEditor() {
  const [input, setInput] = useState('');
  const [output, setOutput] = useState('');

  useEffect(() => {
    if (input.trim()) {
      fetch('/markdown-to-html', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ content: input }),
      })
        .then((res) => res.json())
        .then((data) => setOutput(data.html));
    }
  }, [input]);

  return (
    <div className="markdown-editor">
      <h2>Markdown Editor</h2>
      <textarea
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Enter your markdown content..."
        style={{ width: '100%', height: '300px' }}
      />
      <div className="preview">
        <h3>Preview</h3>
        <div dangerouslySetInnerHTML={{ __html: output }}></div>
      </div>
    </div>
  );
}

export default MarkdownEditor;

Data Schema (Pydantic)

from pydantic import BaseModel
from typing import Optional

class MarkdownRequest(BaseModel):
    id: Optional[str] = None
    content: str
    options: Optional[dict] = None

    class Config:
        json_schema_extra = {
            "example": {
                "id": "123",
                "content": "# Header\n## Subheader\n\nThis is a markdown document.",
                "options": {"sanitize": True, "preview": False}
            }
        }

class MarkdownResponse(BaseModel):
    html: str
    id: Optional[str] = None
    error: Optional[str] = None

    class Config:
        json_schema_extra = {
            "example": {
                "html": "<h1>Header</h1>\n<h2>Subheader</h2>\n\n<p>This is a markdown document.</p>",
                "id": "123"
            }
        }

Usage

FastAPI/Node.js Endpoint


### React Component
```jsx
<MarkdownEditor />

Security Note

Ensure that the markdown library used is properly sanitized to prevent XSS attacks.

# Markdown Content Engine Documentation

## Overview
The **Markdown Content Engine** is a module designed to render markdown content into HTML automatically, simplifying the process of creating and displaying formatted text in web applications.

---

## Related Modules

- **File Handling Module**: For reading markdown files from disk or other storage systems.
- **Syntax Highlighting Module**: To enable code syntax highlighting for better readability.
- **HTTP Requests Module**: For fetching external markdown content over HTTP.
- **Dependency Injection Module**: For managing dependencies in large-scale applications.

---

## Use Cases

1. **Writing Blog Posts**  
   Developers can write blog posts using markdown and have them rendered automatically to HTML without manual intervention.

2. **Creating Technical Documentation**  
   Teams can use this module to generate documentation from markdown files, ensuring consistent formatting across projects.

3. **Rendering README Files**  
   The module can be used to display project READMEs in a formatted manner on web platforms.

4. **Generating Email Content**  
   Developers can create email content using markdown and render it into HTML for better visual appeal.

5. **Building Static Websites**  
   Markdown files can be rendered into HTML pages, enabling the creation of static websites efficiently.

---

## Integration Tips

- **Handling Images**: Ensure that image paths are correctly configured to avoid broken links.
- **Custom CSS Classes**: Use custom CSS classes in markdown to control styling and layout.
- **Pre-rendering Content**: For better performance, pre-render markdown content during build time for static sites.
- **Error Handling**: Implement error handling for cases where markdown files cannot be found or rendered.

---

## Configuration Options

| Parameter                  | Description                                                                 | Data Type         | Default Value  |
|----------------------------|-----------------------------------------------------------------------------|-------------------|---------------|
| `inputEncoding`           | Specifies the encoding of input markdown files.                             | String            | "utf-8"        |
| `outputEncoding`          | Specifies the encoding of the rendered HTML output.                        | String            | "utf-8"        |
| `renderOptions`           | Additional options for rendering, such as syntax highlighting or footnotes. | Object            | `{}`          |
| `fileRoot`                | The root directory where markdown files are stored.                         | String            | "./content"   |
| `enableCache`             | Whether to enable caching of rendered HTML content.                          | Boolean           | false         |

---

## Example Usage

```javascript
const { MarkdownEngine } = require('@example/markdown-engine');

// Initialize the engine with custom configuration
const engine = new MarkdownEngine({
  inputEncoding: 'utf-8',
  fileRoot: './docs',
});

// Render a markdown file
engine.render('README.md', (error, html) => {
  if (error) {
    console.error('Rendering failed:', error);
  } else {
    console.log(html); // Output the rendered HTML
  }
});

Conclusion

The Markdown Content Engine is a powerful tool for rendering markdown content into HTML. With its flexibility and ease of use, it streamlines the process of creating formatted text in web applications.

For more information or to contribute to this project, please visit our GitHub repository.