정책

나중에, 블로그는 Qiita와 같이 마크다운으로 걸게 하고 싶다-라고 생각하고 있으므로, 우선은 표시를 마크다운에 대응시키고 싶습니다.

ngx-markdown 을 사용합니다.

설치

npm install ngx-markdown --save

angular.json 수정

marked.js의 경로를 지정합니다.

강조 표시를 위해 prism.js/css 경로도 설정하십시오.

angular.json

{
  ・・・
  "projects": {
    "my-blog": {
      ・・・
      "architect": {
        "build": {
          ・・・
          "options": {
            ・・・
            "styles": [
              "node_modules/prismjs/themes/prism-okaidia.css",
              ・・・
            ],
            "scripts": [
              "node_modules/marked/lib/marked.js",
              "node_modules/prismjs/prism.js"
            ]

MarkdownModule 가져오기

src/app/app.module.ts

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

@NgModule({
  ・・・
  imports: [
    ・・・
    MarkdownModule.forRoot(),

마크다운 형식의 문자열 출력

보기만 하면 markDown 지시어를 지정합니다.

ngPreserveWhitespaces에서 줄 바꿈을 사용합니다.

src/app/blogs/detail/detail.component.html

<div *ngIf="detail" class="blog-detail">
    <div class="title-area">
        <h1>{{detail.title}}</h1>
        <span class="date">作成日：{{detail.created_at | date: 'yyyy/MM/dd HH:mm'}}</span>
    </div>
    <div class="contents-area">
        <div markdown ngPreserveWhitespaces>
            {{contents}}
        </div>    
    </div>
</div>

컴포넌트 측에서 \n와 <br>를 줄 바꿈 코드로 변환합니다.

src/app/blogs/detail/detail.component.ts

  get contents() {
    return this.detail.contents.replace(/(\\n|\<br>)/g, '\n');
  }

Firestore에 데이터 등록

Firestore에는 개행을 등록할 수 없으므로 \n 로 등록합니다

Angular에서 \n와 <br>를 줄 바꿈 코드로 변환합니다.

# マークダウンに対応しました\n\n## リスト\n\n- リスト１\n- リスト２\n\n## テーブル\n\n|列１|列２|\n|---|---|\n|値１|値２|\n\n## コード\n\n```test.txt\nコード\n```\n\n## 引用\n\n> test\n\n

이런 느낌이 들었습니다.

요약

다음에는 반응형 대응하여 다양한 화면 폭으로 좋은 느낌으로 보이게 하고 싶습니다.

(추기)
Angular9와 Firebase로 블로그를 만들어 보는 7(Qiita의 투고 이력을 표시한다)

Reference

이 문제에 관하여(Angular9와 Firebase에서 블로그를 만들어 보는 6), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/teracy164/items/6167cf1dea9225d8bd09

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다