external-link-icon

@vuepress/plugin-external-link-icon

This plugin will add an icon to the external link in your markdown content, i.e. open in new window

This plugin has been integrated into the default theme.

Usage

npm i -D @vuepress/plugin-external-link-icon@next

import { externalLinkIconPlugin } from '@vuepress/plugin-external-link-icon'

export default {
  plugins: [
    externalLinkIconPlugin({
      // options
    }),
  ],
}

Options

locales

  • Type: Record<string, { openInNewWindow: string }>

  • Details:

    The a11y text of the external link icon in different locales.

    If this option is not specified, it will fallback to default text.

  • Example:

export default {
  plugins: [
    externalLinkIconPlugin({
      locales: {
        '/': {
          openInNewWindow: 'open in new window',
        },
        '/zh/': {
          openInNewWindow: '在新窗口打开',
        },
      },
    }),
  ],
}

Frontmatter

externalLinkIcon

  • Type: boolean

  • Details:

    Whether to append an external link icon to external links in current page.

Styles

You can customize the style of the external link icon via CSS variables:

:root {
  --external-link-icon-color: #aaa;
}

Components

ExternalLinkIcon

  • Details:

    This plugin will register a <ExternalLinkIcon /> component globally, and you can use it without any props.

TIP

This component is mainly used for theme development. You don't need to use it directly in most cases.