Logo
Overview

Styled links and badges

Ankitz007 Ankitz007
Aug 28, 2025
2 min read
syntax

Use the :link directive from remark-directive-sugar to add links with avatars or favicons for GitHub, npm, or custom URLs. Customize via the link option in plugins/index.ts and style under /* :link */ in src/styles/markdown.css.

Example 1: :link[Stephanie Lin]{#@lin-stephanie} links to the GitHub profile of the project maintainer, Stephanie Lin.

Example 2: :link[Vite]{id=@vitejs} links to the GitHub profile of the Vite organization.

Example 3: :link{#@lin-stephanie tab=repositories} links directly to the repositories tab of the GitHub user, like lin-stephanie. For GitHub users, valid tab options: 'repositories','projects', 'packages', 'stars', 'sponsoring', 'sponsors'.

Example 4: :link{#@vitejs tab=org-people} links directly to the people section of a GitHub organization, like vitejs. For GitHub organizations, valid tab options: 'org-repositories', 'org-projects', 'org-packages', 'org-sponsoring', and 'org-people'.

Example 5: :link[Astro]{#withastro/astro} or :link[Astro]{id=withastro/astro} creates a link to Astro repo.

Example 6: :link{#remark-directive-sugar} links to the npm homepage of the remark-directive-sugar.

Example 7: :link{id=remark-directive-sugar tab=dependencies} links to the dependencies section of the remark-directive-sugar on npm. For npm package, valid tab options: 'readme', 'code', 'dependencies', 'dependents', and 'versions'.

Example 8: :link{id=https://developer.mozilla.org/en-US/docs/Web/JavaScript} creates an external link to the developer.mozilla.org/en-US/docs/Web....

Example 9: :link[Google]{id=https://www.google.com/} creates an external link to the Google.

Customization

Example 10: :link[Vite]{id=@vitejs url=https://vite.dev/} creates a Vite to https://vite.dev/ instead of https://github.com/vitejs by using the url.

Example 11: :link[Vite]{id=@vitejs img=https://vitejs.dev/logo.svg} creates a Vite that displays a custom logo by using the img.

Example 12: :link{id=lin-stephanie/astro-antfustyle-theme class=github} creates a lin-stephanie/astro-antfustyle-theme with class=github (or .github) to override the default style of a GitHub repository.

Example 13: :link[Google]{id=https://www.google.com/ class=rounded} creates a Google with class=rounded (or .rounded) to override the default style of a custom URL.

Example 14: :link[Google]{id=https://www.google.com/ class=square} creates a Google with class=square (or .square) to override the default style of a custom URL.

Example 15: :link[send a little encouragement my way]{id=https://github.com/sponsors/lin-stephanie img=https://github.githubassets.com/assets/mona-e50f14d05e4b.png} fully customizes a link.

Badges

Use the :badge directive from remark-directive-sugar to display small pieces of information, such as status or category.

The theme provides the following three predefined badges. You can customize them via the badge option in plugins/index.ts and style them under /* :badge */ in src/styles/markdown.css.

  • badge-n: NEW
  • badge-a: ARTICLE
  • badge-v: VIDEO

Additionally, you can direct use :badge[text]{attrs} for easy visual customization of badges. For example: :badge[ISSUE]{style="background-color: #bef264"} will display as ISSUE. If no color is specified, the default appearance will look like This.