以角度更改代码镜像的高度和宽度

Question

我正在使用带有最新 ngx-codemirror 的 angular 7。

<ngx-codemirror [(ngModel)]="sql_input"  [options]="{lineNumbers: true,theme: 'material',mode: 'markdown'}"></ngx-codemirror>

最终的外观如下所示，这对我来说太大了。只是想知道如何将其调整为在高度和宽度上更小。

Answer 1

您可以尝试在 componentwithcodemirror.css 中添加以仅调整文本编辑器的大小

:host() ::ng-deep .CodeMirror{
height:250px
}

Answer 2

您可以将组件添加到包装器/容器元素中。

<div class="container">
  <ngx-codemirror
    [(ngModel)]="sql_input"
    [options]="{ lineNumbers: true, theme: 'material', mode: 'markdown' }"
  ></ngx-codemirror>
</div>

然后为容器设置所需的宽度和高度。

.container {
  width: 500px;
  height: 500px;
}