ProgrammingFrontendAngular

[Angular] Markdown 사용 방법

,

Markdown 이란

마크다운은 일반 텍스트 기반의 경량 마크업 언어다. 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이다. HTML과 리치 텍스트(RTF) 등 서식 문서로 쉽게 변환되기 때문에 응용 소프트웨어와 함께 배포되는 README 파일이나 온라인 게시물 등에 많이 사용된다. 위키백과

Angular에서 ngx-markdown 패키지를 사용하여 Markdown 기능을 구현하는 방법에 대해 알아보겠습니다.

설치

ngx-markdown 패키지를 설치합니다.

1
$ npm install ngx-markdown --save

설정

angular.json 파일에서 다음의 내용을 추가합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  ...
  "architect": {
    "build": {
      "options": {
        ...
        "scripts": [
          "node_modules/marked/marked.min.js"
        ]
        ...
      }
    }
  }
  ...
}

예제

MarkdownModule을 import 합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from 'app/app-routing.module';

import { MarkdownModule } from 'ngx-markdown-editor';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, MarkdownModule.forRoot()],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

markdown 태그를 사용하여 작성합니다.

1
2
3
4
5
6
7
<!-- app.component.html -->

<div class="row">
  <div class="col-12">
    <markdown [data]="markdownText"></markdown>
  </div>
</div>

markdownText에 임시로 데이터를 입력합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  public markdownText: string;

  constructor() {
    this.markdownText = `# Test`;
  }

  ngOnInit(): void {}
}

아래 참고 사이트에서 자세하게 설명이 되어있습니다. 참고하여 구현하시면 됩니다.

참고

Share