定制美化ThingsBoard中的部件库中的Card，HTML,Markdwon部件

<!-- 定制Card部件的HTML模板 -->
<div class="tb-card">
  <div class="tb-card-header">
    <span class="tb-card-title">{{ title.value }}</span>
    <button class="tb-card-header-button" (click)="toggle()">
      <mat-icon>{{ isCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>
    </button>
  </div>
  <div [@collapse]="isCollapsed ? 'collapsed' : 'expanded'" class="tb-card-body">
    <!-- 这里放置Card部件的内容 -->
    <ng-content></ng-content>
  </div>
</div>
 
<!-- 定制HTML部件的HTML模板 -->
<div class="tb-html-content" [innerHTML]="htmlContent | safeHtml"></div>
 
<!-- 定制Markdown部件的HTML模板 -->
<div class="tb-markdown-content" [innerHTML]="markdownContent | marked"></div>

在这个例子中，我们定制了Card、HTML和Markdown部件的HTML模板。Card部件包含一个可折叠的区域，HTML部件用于显示提供的HTML内容，而Markdown部件用于将Markdown转换为HTML。这些模板使用了Angular的数据绑定和指令，以及ThingsBoard特定的CSS类。注意，[innerHTML]和管道（pipes）safeHtml和marked用于安全地渲染HTML和Markdown，防止XSS攻击。