Markdown Rendering Simplified
MIT License
React
or HTML
.This package is ESM only and tested on the current lts version and its previous. Please don't open issues for questions regarding CommonJS / ESM or previous Nodejs versions. To learn more about using ESM please read this from sindresorhus
: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c
> npm install writr
Then you can use it like this:
import { Writr } from 'writr';
const writr = new Writr(`# Hello World ::-):\n\n This is a test.`);
const html = await writr.render(); // <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(`# Hello World ::-):\n\n This is a test.`);
const options = {
emoji: false
}
const html = await writr.render(options); // <h1>Hello World ::-):</h1><p>This is a test.</p>
An example passing in the options also via the constructor:
import { Writr, WritrOptions } from 'writr';
const writrOptions = {
renderOptions: {
emoji: true,
toc: true,
slug: true,
highlight: true,
gfm: true,
math: true,
mdx: true,
caching: true,
}
};
const writr = new Writr(`# Hello World ::-):\n\n This is a test.`, writrOptions);
const html = await writr.render(options); // <h1>Hello World ::-):</h1><p>This is a test.</p>
new Writr(arg?: string | WritrOptions, options?: WritrOptions)
By default the constructor takes in a markdown string
or WritrOptions
in the first parameter. You can also send in nothing and set the markdown via .content
property. If you want to pass in your markdown and options you can easily do this with new Writr('## Your Markdown Here', { ...options here})
. You can access the WritrOptions
from the instance of Writr. Here is an example of WritrOptions.
import { Writr, WritrOptions } from 'writr';
const writrOptions = {
renderOptions: {
emoji: true,
toc: true,
slug: true,
highlight: true,
gfm: true,
math: true,
mdx: true,
caching: true,
}
};
const writr = new Writr(writrOptions);
.content
Setting the markdown content for the instance of Writr. This can be set via the constructor or directly on the instance and can even handle frontmatter
.
import { Writr } from 'writr';
const writr = new Writr();
writr.content = `---
title: Hello World
---
# Hello World ::-):\n\n This is a test.`;
.options
Accessing the default options for this instance of Writr.
.cache
Accessing the cache for this instance of Writr. By default this is an in memory cache and is enabled by default. You can disable this by setting caching: false
in the RenderOptions
of the WritrOptions
or when calling render passing the RenderOptions
like here:
import { Writr } from 'writr';
const writr = new Writr(`# Hello World ::-):\n\n This is a test.`);
const options = {
caching: false
}
const html = await writr.render(options); // <h1>Hello World ::-):</h1><p>This is a test.</p>
If you would like to use a specific storage adapter from https://keyv.org you can pass in the adapter like so:
import { Writr } from 'writr';
import Keyv from '@keyv/redis';
const keyvRedis = new Keyv('redis://user:pass@localhost:6379');
const writr = new Writr(`# Hello World ::-):\n\n This is a test.`);
writr.cache.setStorageAdapter(keyvRedis);
.engine
Accessing the underlying engine for this instance of Writr. This is a Processor<Root, Root, Root, undefined, undefined>
fro the unified .use()
function. You can use this to add additional plugins to the engine.
.render(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
type RenderOptions = {
emoji?: boolean; // Emoji support (default: true)
toc?: boolean; // Table of contents generation (default: true)
slug?: boolean; // Slug generation (default: true)
highlight?: boolean; // Code highlighting (default: true)
gfm?: boolean; // Github flavor markdown (default: true)
math?: boolean; // Math support (default: true)
mdx?: boolean; // MDX support (default: true)
caching?: boolean; // Caching (default: true)
};
.renderSync(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(`# Hello World ::-):\n\n This is a test.`);
const html = writr.renderSync(); // <h1>Hello World 🙂</h1><p>This is a test.</p>
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(`# Hello World ::-):\n\n This is a test.`);
const reactElement = await writr.renderReact(); // Will return a 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(`# Hello World ::-):\n\n This is a test.`);
const reactElement = writr.renderReactSync(); // Will return a React.JSX.Element
.loadFromFile(filePath: string): Promise<void>
Load your markdown content from a file path.
import { Writr } from 'writr';
const writr = new Writr();
await writr.loadFromFile('path/to/file.md');
.loadFromFileSync(filePath: string): void
Load your markdown content from a file path synchronously.
.saveToFile(filePath: string): Promise<void>
Save your markdown and frontmatter (if included) content to a file path.
import { Writr } from 'writr';
const writr = new Writr(`# Hello World ::-):\n\n This is a test.`);
await writr.saveToFile('path/to/file.md');
.saveToFileSync(filePath: string): void
Save your markdown and frontmatter (if included) content to a file path synchronously.
Code of Conduct and Contributing guidelines.
MIT © Jared Wray