Iron Markdown

Iron Markdown, a lightweight flavor of Markdown specifically designed for documenting components and functionalities within a React project.

• Get started

  • Initialization

  • Features

• Examples

  • Input Markdown Component

  • Output HTML Element

• Description

  • Configuration

  • Constants

  • Hooks

  • Services

  • Modules

  • Layouts

  • Components

• Next features

• Versioning

1. Get started

1.1 Initialization

npm i @j0j0/iron-markdown

1.2 Features

• Markdown to HTML Conversion: Easily convert Markdown text into HTML, saving you time and effort.
• Support for Standard Markdown Elements: We support a wide range of standard Markdown elements including headers, lists, links, images, and more.
• Input and Output Components: Integration is made simple with dedicated Input and Output components. Input your Markdown text and instantly view the converted HTML output.
• Customizable Appearance: Tailor the look and feel of your HTML output with our customizable theme system, offering both pre-defined and personalized themes.
• Retrieve Generated HTML: Easily access the HTML generated from your Markdown text for seamless integration into other parts of your application.
• Interactive Example Site: Explore the library's features through our interactive example site, showcasing demonstrations of each component in action.
• Visual Exploration with StoryBook: Dive deep into our components with StoryBook, providing a comprehensive visual and interactive exploration experience.

2. Examples

This is a ready-to-use example to use input and output components from our library.

import { NavbarComponent } from "../components/NavbarComponent.jsx";
import { MarkdownComponent } from "../components/MarkdownComponent.jsx";
import "../assets/renderer.layout.css";
import { useMarkdown } from "../hooks/useMarkdown.jsx";

export function RendererLayout() {
  const { markdown, setMarkdown, html, setHtml } = useMarkdown();
  return (
    <div className="containerLib">
      <div className="containerNavButtons">
        <NavbarComponent markdown={markdown} setMarkdown={setMarkdown} />
      </div>
      <div className="containerMarkdownHtml">
        <div>
          <MarkdownComponent
            markdown={markdown}
            setMarkdown={setMarkdown}
            html={html}
            setHtml={setHtml}
          />
        </div>
        <div className="overflow">
          <div dangerouslySetInnerHTML={{ __html: html }} />
        </div>
      </div>
    </div>
  );
}

2.1 Input Markdown Component

The input component consists of the following:

import { useEffect } from "react";
import { useTheme } from "../hooks/useTheme.jsx";
import "../assets/markdown.component.css";
import { markdownToHtml } from "../services/markdownToHtml.js";

export function MarkdownComponent({ markdown, setMarkdown, setHtml, html }) {
  const { theme } = useTheme();

  useEffect(() => {
    setHtml(markdownToHtml(markdown));
  }, [markdown]);

  useEffect(() => {}, [html]);

  return (
    <textarea
      style={{ backgroundColor: theme.backgroundColor, color: theme.textColor }}
      onChange={(e) => setMarkdown(e.target.value)}
      value={markdown}
    ></textarea>
  );
}

2.2 Output HTML Element

The output component consists of the following:

<div dangerouslySetInnerHTML={{ __html: html }} />

3. Description

Comprehensive overview of the library, covering configuration, themes, features, components, and Markdown content manipulation.

3.1 Configuration

Sets the default theme for the library, as well as the properties that can be configured within that theme.

// themes
defaultTheme: {
    backgroundColor: "string",
    textColor: "string",
    linkColor: "string",
    codeBackgroundColor: "string",
}

3.2 Constants

Providing customizable themes to the entire library, allowing users to easily change the appearance of the interface using different predefined configurations.

3.3 Hooks

These hooks are useful for managing the appearance and behavior of components in a React application, providing Markdown element manipulation and theme management functionality.

useMarkdown

useTheme

3.4 Services

This section lists several services, each offering a specific functionality related to handling Markdown content.

3.5 Modules

This section introduces various modules, each offering functionalities related to text manipulation.

Text

3.6 Layouts

Load content written in markdown and convert it to HTML elements.

3.7 Components

Allow you to write markdown and transform it into HTML, with features such as changing themes and integrating into a navigation bar.

4. Next features

5. Versioning