Markdown Rendering Simplified

---

Table of Contents

• Features
• Getting Started
• 1. Install Writr
• 2. Render from Markdown
• API
  • new Writr(options?: WritrOptions)
  • .engine
  • .options
  • .render(markdown: string, options?: RenderOptions): Promise<string>
  • .renderSync(markdown: string, options?: RenderOptions): string
  • '.renderReact(markdown: string, options?: RenderOptions, reactOptions?: HTMLReactParserOptions): Promise
    '
  • '.renderReactSync(markdown: string, options?: RenderOptions, reactOptions?: HTMLReactParserOptions): React.JSX.Element'
• Code of Conduct and Contributing
• License

Features

• Takes the complexity of Remark and makes it easy to use.
• Simpke to use and easy API
• Easily Render to React or HTML.
• Generates a Table of Contents for your markdown files (remark-toc).
• Slug generation for your markdown files (rehype-slug).
• Code Highlighting (rehype-highlight).
• Math Support (rehype-katex).
• Markdown to HTML (rehype-stringify).
• Github Flavor Markdown (remark-gfm).
• Emoji Support (remark-emoji).
• MDX Support (remark-mdx).

Getting Started

1. Install Writr

> npm install writr
    

2. Render from Markdown

import { Writr } from 'writr';
    
    const writr = new Writr();
    const markdown = `# Hello World ::-):\n\n This is a test.`;
    
    const html = await writr.render(markdown); // <h1>Hello World 🙂</h1><p>This is a test.</p>
    

Its just that simple. Want to add some options? No problem.

import { Writr } from 'writr';
    const writr = new Writr();
    const markdown = `# Hello World ::-):\n\n This is a test.`;
    const options  = {
    	emoji: false
    }
    const html = await writr.render(markdown, options); // <h1>Hello World ::-):</h1><p>This is a test.</p>
    

Want to render to a translation? No problem.

import { Writr } from 'writr';
    const writr = new Writr({ openai: 'your-api-key'});
    const markdown = `# Hello World ::-):\n\n This is a test.`;
    const langCode = 'es';
    const html = await writr.renderTranslation(markdown, langCode, options); // <h1>Hola Mundo 🙂</h1><p>Esta es una prueba.</p>
    

How about generating keywords and descriptions for your front matter?

import { Writr } from 'writr';
    const writr = new Writr({ openai: 'your-api-key'});
    const markdown = `# Hello World ::-):\n\n This is a test.`;
    const keywords = await writr.keywords(markdown); // ['Hello World', 'Test']
    const description = await writr.description(markdown); // 'Hello World Test'
    

API

new Writr(options?: WritrOptions)

You can access the WritrOptions from the instance of Writr. Here is an example of WritrOptions.

import { Writr, WritrOptions } from 'writr';
    const writrOptions = {
      openai: 'your-api-key', // openai api key (default: undefined)
      renderOptions: {
        emoji: true,
        toc: true,
        slug: true,
        highlight: true,
        gfm: true,
        math: true,
        mdx: true
      }
    };
    const writr = new Writr(writrOptions);
    

.engine

Accessing the underlying engine for this instance of Writr. This is a Processor<Root, Root, Root, undefined, undefined> fromt the unified .use() function. You can use this to add additional plugins to the engine.

.options

Accessing the default options for this instance of Writr.

.render(markdown: string, options?: RenderOptions): Promise<string>

Rendering markdown to HTML. the options are based on RenderOptions. Which you can access from the Writr instance.

import { Writr, RenderOptions } from 'writr';
    
    ## `RenderOptions`
    
    ```js
    interface RenderOptions {
      emoji?: boolean; // emoji support
      toc?: boolean; // table of contents generation
      slug?: boolean; // slug generation
      highlight?: boolean; // code highlighting
      gfm?: boolean; // github flavor markdown
    }
    

.renderSync(markdown: string, options?: RenderOptions): string

Rendering markdown to HTML synchronously. the options are based on RenderOptions. Which you can access from the Writr instance. The parameters are the same as the .render() function.

import { Writr } from 'writr';
    const writr = new Writr();
    const markdown = `# Hello World ::-):\n\n This is a test.`;
    const html = writr.renderSync(markdown); // <h1>Hello World 🙂</h1><p>This is a test.</p>
    

'.renderReact(markdown: string, options?: RenderOptions, reactOptions?: HTMLReactParserOptions): Promise

'

Rendering markdown to React. The options are based on RenderOptions and now HTMLReactParserOptions from html-react-parser.

import { Writr } from 'writr';
    const writr = new Writr();
    const markdown = `# Hello World ::-):\n\n This is a test.`;
    const reactElement = await writr.renderReact(markdown); // Will return a React.JSX.Element
    

'.renderReactSync(markdown: string, options?: RenderOptions, reactOptions?: HTMLReactParserOptions): React.JSX.Element'

Rendering markdown to React. The options are based on RenderOptions and now HTMLReactParserOptions from html-react-parser.

import { Writr } from 'writr';
    const writr = new Writr();
    const markdown = `# Hello World ::-):\n\n This is a test.`;
    const reactElement = writr.renderReactSync(markdown); // Will return a React.JSX.Element
    

Code of Conduct and Contributing

Code of Conduct and Contributing guidelines.

License

MIT © Jared Wray