remark-preview

Extracts a preview of the markdown and adds it to the frontmatter

Usage

import preview, { textFormatter } from "remark-preview";

const md = `
# Welcome to my blog

In this post, I will talk about dogs, cats, squirrels, llamas and polar bears.
`;

remark()
  .use(
    preview(
      textFormatter({
        length: 50,
      })
    )
  )
  .process(md, function (err, file) {
    console.log(file.data.fm.preview);
    // Welcome to my blog\n\nIn this post, I will talk about dogs, cats...
  });

You can also format it as HTML:

import remark from "remark";
import preview, { htmlFormatter } from "remark-preview";

const md = `
# Welcome to my blog

Here is a very cool [website](example.com) I found on dogs, cats, squirrels, llamas and polar bears.
`;

remark()
  .use(
    preview(
      htmlFormatter({
        length: 70,
      })
    )
  )
  .process(md, function (err, file) {
    console.log(file.data.fm.preview);
    // <h1>Welcome to my blog</h1> <p>Here is a very cool <a href="example.com">website</a> I found on dogs, cats, ...</p>
  });

Formatters

textFormatter

preview(textFormatter(options));

Option	Type	Default	Description
options.length	number	300	Max number of characters before truncating
options.ellipsis	boolean	true	Adds an ellipsis when truncating
options.headings	boolean	true	Includes headings in the preview content
options.maxBlocks	number		Max number of block elements to include

htmlFormatter

preview(htmlFormatter(options));

Option	Type	Default	Description
options.length	number	300	Max number of characters before truncating
options.maxBlocks	number		Max number of block elements to include

It uses truncate-html for truncation, so it can receive all of its options as well

custom formatter

If you wish, you can make your own formatter as well:

import remark from "remark";
import { visit } from "unist-util-visit";

remark().use(
  preview({
    truncate(text) {
      return text.slice(0, 100);
    },
    parse(tree) {
      // see https://github.com/syntax-tree/unist to learn how to parse a remark node tree
      let text = "";

      visit(tree, "text", (node) => {
        text += node.value;
      });

      return text;
    },
  })
);

API

preview

preview(formatter, options);

Option	Type	Default	Description
formatter	object		The formatter to use to parse and truncate the preview contents
options.attribute	string	"preview"	The frontmatter attribute to store the preview under