remark-preview v1.0.3

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));

htmlFormatter

preview(htmlFormatter(options));

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);