angular markdown ngx-markdown

ngx-markdown은 Angular 애플리케이션에서 Markdown을 렌더링하기 위한 라이브러리입니다. 이 라이브러리를 사용하면 Angular 프로젝트에서 Markdown 문서를 쉽게 표시하고 서식을 적용할 수 있습니다.

ngx-markdown을 사용하려면 다음 단계를 따르세요.

1. ngx-markdown 설치:
   먼저 ngx-markdown 라이브러리를 Angular 프로젝트에 설치합니다. 터미널에서 프로젝트 루트 디렉토리로 이동한 후 다음 명령을 실행합니다.

   npm install ngx-markdown --save

2. Angular 모듈에 ngx-markdown 모듈 추가:
   다음으로, Angular 애플리케이션의 모듈에 ngx-markdown 모듈을 추가해야 합니다. 이를 위해 app.module.ts와 같은 모듈 파일을 열고 다음과 같이 MarkdownModule을 가져오고 imports 배열에 추가합니다.

   import { MarkdownModule } from 'ngx-markdown';
   
   @NgModule({
     declarations: [/* ... */],
     imports: [
       // 다른 모듈들을 추가하고,
       MarkdownModule.forRoot(),
     ],
     bootstrap: [/* ... */]
   })
   export class AppModule { }

3. Markdown 파일 표시:
   이제 Angular 컴포넌트에서 Markdown 파일을 표시할 수 있습니다. 예를 들어, 컴포넌트 템플릿에서 Markdown 파일을 표시하려면 다음과 같이 작성합니다.

   <markdown [data]="# Hello, ngx-markdown!"></markdown>

   [data] 속성에 표시하려는 Markdown 내용을 넣습니다.

4. Markdown 파일 렌더링 옵션 설정 (선택 사항):
   ngx-markdown은 다양한 옵션을 제공하여 Markdown을 렌더링할 때 스타일링 및 구성을 조정할 수 있습니다. 이러한 옵션은 MarkdownModule.forRoot()를 호출할 때 설정할 수 있습니다. 예를 들어, 다음과 같이 markedOptions 옵션을 추가하여 스타일을 지정할 수 있습니다.

   import { MarkdownModule } from 'ngx-markdown';
   
   @NgModule({
     declarations: [/* ... */],
     imports: [
       // 다른 모듈들을 추가하고,
       MarkdownModule.forRoot({
         markedOptions: {
           provide: MarkedOptions,
           useValue: {
             gfm: true, // GitHub 스타일 마크다운
             breaks: true // 줄 바꿈 처리
           },
         },
       }),
     ],
     bootstrap: [/* ... */]
   })
   export class AppModule { }

5. Markdown 파일 표시 및 스타일링:
   이제 Angular 컴포넌트에서 Markdown 파일을 사용하여 콘텐츠를 표시하고 필요한 스타일링을 적용할 수 있습니다.

이렇게하면 Angular 애플리케이션에서 Markdown을 표시하고 렌더링하는 기본적인 방법입니다. 필요에 따라 추가적인 옵션과 스타일을 적용하여 Markdown 콘텐츠를 더욱 개선할 수 있습니다.