{"id":28089362,"url":"https://github.com/luckrya/markdown-it-link-to-card","last_synced_at":"2025-07-13T19:41:45.505Z","repository":{"id":62157507,"uuid":"552880581","full_name":"luckrya/markdown-it-link-to-card","owner":"luckrya","description":"🔗 A markdown-it plugin that converts links to cards. Preview simple URL information more intuitively","archived":false,"fork":false,"pushed_at":"2024-02-19T15:27:10.000Z","size":45,"stargazers_count":19,"open_issues_count":3,"forks_count":2,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-04-22T11:55:34.240Z","etag":null,"topics":["link-to-card","markdown","markdown-it","markdown-it-plugin","vitepress","vitepress-blog","vitepress-theme"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/luckrya.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-10-17T11:24:28.000Z","updated_at":"2025-04-16T13:42:10.000Z","dependencies_parsed_at":"2023-01-25T19:30:17.528Z","dependency_job_id":null,"html_url":"https://github.com/luckrya/markdown-it-link-to-card","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luckrya%2Fmarkdown-it-link-to-card","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luckrya%2Fmarkdown-it-link-to-card/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luckrya%2Fmarkdown-it-link-to-card/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luckrya%2Fmarkdown-it-link-to-card/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/luckrya","download_url":"https://codeload.github.com/luckrya/markdown-it-link-to-card/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253948349,"owners_count":21988953,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["link-to-card","markdown","markdown-it","markdown-it-plugin","vitepress","vitepress-blog","vitepress-theme"],"created_at":"2025-05-13T12:57:37.038Z","updated_at":"2025-05-13T12:57:37.468Z","avatar_url":"https://github.com/luckrya.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @luckrya/markdown-it-link-to-card\n\n\u003cp align=\"left\"\u003e\n\u003cimg src=\"https://img.shields.io/npm/v/@luckrya/markdown-it-link-to-card\" alt=\"NPM Version\" /\u003e\n\u003cimg src=\"https://img.shields.io/npm/l/@luckrya/markdown-it-link-to-card\" alt=\"License\"\u003e\n\u003cimg src=\"https://img.shields.io/npm/dm/@luckrya/markdown-it-link-to-card.svg\" alt=\"NPM Downloads\" /\u003e\n\u003cp/\u003e\n\nA [markdown-it](https://github.com/markdown-it/markdown-it) plugin for turning page links into link cards (which contain brief information about the link).\n\n- Extract links with special flags (eg. `[text](@:url)`) and convert them into card information display.\n- Support for custom renderers to support rendering into anything you want.\n- Support injecting class names for cards to support custom styles.\n\n## Install\n\n```sh\nnpm i -D @luckrya/markdown-it-link-to-card\n```\n\n## Usage\n\n```ts\nimport MarkdownIt from \"markdown-it\";\nimport { linkToCardPlugin } from \"@luckrya/markdown-it-link-to-card\";\nimport type { LinkToCardPluginOptions } from \"@luckrya/markdown-it-link-to-card\";\n\nconst md = MarkdownIt({ html: true }).use\u003cLinkToCardPluginOptions\u003e(\n  linkToCardPlugin,\n  {\n    // options\n    size: \"small\",\n  }\n);\n\nconst rendered = md.render(`\n\n# Home\n\n...\n\n### Reference\n\n  - [github](https://github.com)\n  - [bing](https://cn.bing.com/)\n  - [知乎 - 发现页](https://www.zhihu.com/explore)\n  - [markdown-it-link-to-card](https://github.com/luckrya/markdown-it-link-to-card)\n\n\u003cbr /\u003e\n\n  - [github](@:https://github.com)\n  - [bing](@:https://cn.bing.com)\n  - [知乎 - 发现页](@:https://www.zhihu.com/explore)\n  - [markdown-it-link-to-card](@:https://github.com/luckrya/markdown-it-link-to-card)\n\n`);\n```\n\n**Use in vitepress:**\n\n```ts\n// docs/.vitepress/config.ts\n\nimport { defineConfig } from \"vitepress\";\nimport { linkToCardPlugin } from \"@luckrya/markdown-it-link-to-card\";\nimport type { LinkToCardPluginOptions } from \"@luckrya/markdown-it-link-to-card\";\n\nexport default defineConfig({\n  // ...\n\n  themeConfig: {\n    nav: [{ text: \"Home\", link: \"/index\" }],\n  },\n\n  markdown: {\n    config: (md) =\u003e {\n      md.use\u003cLinkToCardPluginOptions\u003e(linkToCardPlugin, {\n        // options\n        size: \"small\",\n      });\n    },\n  },\n\n  // ...\n});\n\n// docs/index.md\n// Let's say your home page content is:\n`\n# Home\n\n...\n\n### Reference\n\n  - [github](https://github.com)\n  - [bing](https://cn.bing.com/)\n  - [知乎 - 发现页](https://www.zhihu.com/explore)\n  - [markdown-it-link-to-card](https://github.com/luckrya/markdown-it-link-to-card)\n\n\u003cbr /\u003e\n\n  - [github](@:https://github.com)\n  - [bing](@:https://cn.bing.com)\n  - [知乎 - 发现页](@:https://www.zhihu.com/explore)\n  - [markdown-it-link-to-card](@:https://github.com/luckrya/markdown-it-link-to-card)\n\n`;\n```\n\n**_Rendering results:_**\n\n![Rendering results](https://cdn.nlark.com/yuque/0/2022/png/414384/1667208979236-2f4a8098-eaf7-4c21-886d-90e76e040fb5.png)\n\n## Options\n\n### tag\n\n- Type: `string`\n- Default: `@`\n- Details:\n\n  Identifier, e.g. `[xxx](@:https://github.com)`\n\n  \u003e Note that a regular expression will be constructed internally to separate characters. If the value provided by tag is a special symbol of the regular expression, be sure to escape it manually.\n  \u003e\n  \u003e e.g. `\\\\$` =\u003e `[xxx]($:https://github.com)`\n\n### Size\n\n- Type: `'small' | 'large'`\n- Default: `'small'`\n- Details: Card size, only valid in inline style mode.\n\n### target\n\n- Type: `'_self' | '_blank' | '_top' | '_parent'`\n- Default: `'_blank'`\n- Details: Link jump behavior. [more detail](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)\n\n### classPrefix\n\n- Type: `string | undefined`\n- Default: `undefined`\n- Details: Card DOM class name prefix. If this option is set, the inline style will not be injected, but the relevant class name will be injected directly. e.g. the setting value is `'my-docs'` will get the following structure\n\n  ```html\n  \u003cspan class=\"my-docs__container\"\u003e\n    \u003cimg class=\"my-docs__img\" src=\"$logo\" /\u003e\n    \u003cspan class=\"my-docs__texts\"\u003e\n      \u003cspan class=\"my-docs__texts--title\"\u003e$title\u003c/span\u003e\n      \u003cspan class=\"my-docs__texts--desc\"\u003e$description\u003c/span\u003e\n    \u003c/span\u003e\n  \u003c/span\u003e\n  ```\n\n### showTitle\n\n- Type: `boolean`\n- Default: true\n- Details: Whether to display the link title. Note that this will be displayed as a tooltip, with the displayed value extracted from `[link title]()`. [more detail](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title)\n\n### render\n\n- Type: `undefined | CardDomRender`\n\n  ```ts\n  type CardDomRender = (\n    data: {\n      logo?: string;\n      title?: string;\n      description?: string;\n    },\n    options: {\n      href: string;\n      linkTitle: string;\n      showTitle: boolean;\n      target: \"_self\" | \"_blank\" | \"_top\" | \"_parent\";\n      size: \"small\" | \"large\";\n      classPrefix?: string;\n    }\n  ) =\u003e string;\n  ```\n\n- Default: `undefined`\n- Details: Custom Rendering DOM Fragments.\n\n## Q/A\n\n### How to get url metadata?\n\nSynchronized remote request. why? \"All complex parsers are sync by nature.\".\nAs the number of card links you write increases, the loading will not become very slow, because it does caching internally.\n\n### Does the plugin set up the cache? And how?\n\nYes, it's set. It will cache all the parsed metadata in the form of local cache instead of in memory!\nA special file (`.linkcardrc`) will be created in the working directory of the current execution to store this metadata.\n\n\u003e It is not recommended that this file be ignored by Git！\n\n## API\n\n```ts\nimport { generateCard } from \"@luckrya/markdown-it-link-to-card\";\n\ngenerateCard(\"https://github.com\", {\n  linkTitle: \"Github Home\",\n  showTitle: true,\n  size: \"small\",\n}).then(({ dom }) =\u003e {\n  // card dom fragment\n  console.log(dom);\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluckrya%2Fmarkdown-it-link-to-card","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fluckrya%2Fmarkdown-it-link-to-card","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluckrya%2Fmarkdown-it-link-to-card/lists"}