前端展示一个可以编辑 Markdown 的区域:方法1

import { marked } from 'marked';

 markdownContent: string = ''; // 存储用户输入的 Markdown 内容
 renderedHtml: any = ''; // 存储 Markdown 转换后的 HTML
    
updateHtml() {
    this.renderedHtml = marked(this.markdownContent);
  }

  <div class="markdown-editor">
                    <textarea  [(ngModel)]="markdownContent" (input)="updateHtml()" placeholder="Enter Markdown content here"></textarea>
                    <div class="preview" [innerHTML]="renderedHtml"></div>
                  </div>

.markdown-editor {
  display: flex;
  gap: 20px;
}

textarea {
  width: 50%;
  height: 400px;
  padding: 10px;
  font-size: 16px;
}

.preview {
  width: 50%;
  height: 400px;
  padding: 10px;
  border: 1px solid #ccc;
  overflow-y: auto;
}