external-links.mdx

title	description	i18nReady	type
외부 링크에 아이콘 추가	Markdown 파일의 외부 링크에 아이콘을 추가하기 위해 rehype 플러그인을 설치하는 방법을 알아보세요.	true	recipe

import { Steps } from '@astrojs/starlight/components'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

rehype 플러그인을 사용하면 외부 사이트를 가리키는 Markdown 파일의 링크를 식별하고 수정할 수 있습니다. 이 예시에서는 방문자가 사이트를 떠난다는 것을 알 수 있도록 각 외부 링크 끝에 아이콘을 추가합니다.

전제 조건

• 콘텐츠 페이지에 Markdown을 사용하는 Astro 프로젝트가 필요합니다.

레시피

1. `rehype-external-links` 플러그인을 설치합니다.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm install rehype-external-links
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm add rehype-external-links
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn add rehype-external-links
  ```
  </Fragment>
</PackageManagerTabs>

2. 플러그인을 astro.config.mjs 파일로 가져옵니다.

   content 속성이 포함된 옵션 객체와 함께 rehypeExternalLinks를 rehypePlugins 배열에 전달합니다. 링크 끝에 일반 텍스트를 추가하려면 이 속성의 type을 text로 설정하세요. 대신 링크 끝에 HTML을 추가하려면 type 속성을 raw로 설정하세요.

   // ...
   import rehypeExternalLinks from 'rehype-external-links';
   
   export default defineConfig({
     // ...
     markdown: {
       rehypePlugins: [
         [
           rehypeExternalLinks,
           {
             content: { type: 'text', value: ' 🔗' }
           }
         ],
       ]
     },
   });

   :::note content 속성의 값은 접근성 트리에 표시되지 않습니다. 따라서 아이콘에만 의존하기보다는 링크가 주변 콘텐츠 외부에 있다는 점을 분명히 하는 것이 가장 좋습니다. :::

자료

• rehype-external-links