Markdown Rendering Simplified

Table of Contents

• Features
• Getting Started
• License - MIT

Features

• Takes the complexity of Remark and makes it easy to use.
• Up and Rendering in seconds with a simple 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<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 = 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