unified

Project: luk707/rehype-truncate

Package: rehype-truncate@1.2.2

  1. Rehype truncation

    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.