unified

Project: luk707/rehype-truncate

Package: rehype-truncate@1.2.2

  1. Rehype truncation
  1. 65%
  2. MIT
  3. 5
  1. 401 B
  2. 7.4k

    npm <luk707>

    rehype-truncate

    npm i rehype-truncate

    Example

    Rehype truncate is a plugin for rehype that lets you truncate a hast.

    import unified from "unified";
import html from "rehype-parse";
import rehypeTruncate from "rehype-truncate";
import stringify from "rehype-stringify";

const document = `
  <html>
    <head></head>
    <body>
      <h1>Hello, World.</h1>
      <p>This is an example document to test html truncation.</p>
    </body>
  </html>
`;

const processedDocument = unified()
  .use(html)
  .use(rehypeTruncate, { maxChars: 50 })
  .use(stringify)
  .processSync(document).contents;

console.log(processedDocument);

    This results in the following:

    <html>
  <head></head>
  <body>
    <h1>Hello, World.</h1>
    <p>This is an example…</p>
  </body>
</html>

    Ignoring tags

    You can configure rehype-truncate to ignore content inside certain tag names by using the ignoreTags options.

    import unified from "unified";
import html from "rehype-parse";
import rehypeTruncate from "rehype-truncate";
import stringify from "rehype-stringify";

const document = `
  <html>
    <head></head>
    <body>
      <h1>Hello, World.</h1>
      <p>This is an example document to test html truncation.</p>
      <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
      </ul>
      <p>This example has a list that should get ignored by the truncation character count.</p>
    </body>
  </html>
`;

const processedDocument = unified()
  .use(html)
  .use(rehypeTruncate, { maxChars: 120, ignoreTags: ["ul"] })
  .use(stringify)
  .processSync(document).contents;

console.log(processedDocument);

    This results in the following:

    <html>
  <head></head>
  <body>
    <h1>Hello, World.</h1>
    <p>This is an example document to test html truncation.</p>
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
      <li>List item 4</li>
    </ul>
    <p>This example has a lis…</p>
  </body>
</html>

    Options

    NameTypeDescription
    disableboolean?Disable truncation and return the document as is.
    ellipsesstring?Specify a custom ellipses string (default "…").
    ignoreTagsstring[]?Ignore contents of certain tag names.
    maxCharsnumberThe number of characters to truncate.