@jcayzac/shiki-transformer-autolinks NPM

`@jcayzac/shiki-transformer-autolinks`

Shiki transformer that turns URLs into real links.

Motivation

When you are editing code in an IDE, URLs are often clickable. Whether it's a link to reference documentation in a code comment or a link to an image passed as the src attribute of an HTML <img> element, you may want to visit the link.

Wouldn't it be nice if code rendered by Shiki also had clickable URLs? This is what this transformer enables.

Features

Anything that looks like a URL starting with https:// is turned into a clickable link. If the URL ends with punctuation, the punctuation is not part of the generated link.
For Markdown markup, the transformer also looks for a title. This means that the link generated for e.g. [Some title](https://example.com) has a title attribute set to Some title.
The generated links are keyboard-navigable, and use target="_blank" rel="nofollow noreferrer".
They're easy to style: just target code :any-link in your CSS!

Installation

# pnpm
pnpm add @jcayzac/shiki-transformer-autolinks

# bun
bunx add @jcayzac/shiki-transformer-autolinks

# npm
npx add @jcayzac/shiki-transformer-autolinks

# yarn
yarn add @jcayzac/shiki-transformer-autolinks

# deno
deno add npm:@jcayzac/shiki-transformer-autolinks