unified#Pluggable TypeScript Examples

The following examples show how to use unified#Pluggable. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: code-title.ts From thvu-blog with MIT License

6 votes

export default function remarkCodeTitles(): Pluggable {
  return (tree: any) =>
    visit(tree, "code", (node, index) => {
      const nodeLang = node.lang || "";
      let language = "";
      let title = "";

      if (nodeLang.includes(":")) {
        language = nodeLang.slice(0, nodeLang.search(":"));
        title = nodeLang.slice(nodeLang.search(":") + 1, nodeLang.length);
      }

      if (!title) {
        return;
      }

      const className = "remark-code-title";

      const titleNode = {
        type: "mdxJsxFlowElement",
        name: "div",
        attributes: [{ type: "mdxJsxAttribute", name: "className", value: className }],
        children: [{ type: "text", value: title }],
        data: { _xdmExplicitJsx: true },
      };

      tree.children.splice(index, 0, titleNode);
      node.lang = language;
    });
}

Example #2

Source File: img-to-jsx.ts From thvu-blog with MIT License

6 votes

export default function remarkImgToJsx(): Pluggable {
  return (tree) => {
    visit(
      //@ts-expect-error
      tree,
      // only visit p tags that contain an img element
      (node: any) =>
        node.type === "paragraph" && node.children.some((n: any) => n.type === "image"),
      (node: any) => {
        const imageNode = node.children.find((n: any) => n.type === "image");

        // only local files
        if (fs.existsSync(`${process.cwd()}/public${imageNode.url}`)) {
          const dimensions = sizeOf(`${process.cwd()}/public${imageNode.url}`);

          // Convert original node to next/image
          (imageNode.type = "mdxJsxFlowElement"),
            (imageNode.name = "Image"),
            (imageNode.attributes = [
              { type: "mdxJsxAttribute", name: "alt", value: imageNode.alt },
              { type: "mdxJsxAttribute", name: "src", value: imageNode.url },
              { type: "mdxJsxAttribute", name: "width", value: dimensions.width },
              { type: "mdxJsxAttribute", name: "height", value: dimensions.height },
            ]);

          // Change node type from p to div to avoid nesting error
          node.type = "div";
          node.children = [imageNode];
        }
      }
    );
  };
}

Example #3

Source File: toc-headings.ts From thvu-blog with MIT License

6 votes

export default function remarkTocHeadings(options: any): Pluggable {
  return (tree: any) =>
    visit(tree, "heading", (node) => {
      const textContent = toString(node);
      options.exportRef.push({
        value: textContent,
        url: "#" + GitHubSlugger.slug(textContent),
        depth: (node as any).depth,
      });
    });
}