external-link-icon

@vuepress/plugin-external-link-icon

This plugin will add a 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
const { externalLinkIconPlugin } = require('@vuepress/plugin-external-link-icon')

module.exports = {
  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:

module.exports = {
  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.