css - CodeMirror Line-Break 不添加行号 - Angular

Question

我正在使用来自 ngx-codemirror 的代码镜像。我想在它适合父级的宽度时拆分线。我找到了一些解决方案来拆分类似的东西，

lineWrapping: true

和风格

.CodeMirror-wrap pre {
  word-break: break-word;
}

使用它我能够拆分行，但我也需要显示行号。刚刚拆分的行不显示行号。这是指向我的问题的 stackblitz 链接:code-mirror-line-break-issue

截图:

请帮我解决这个问题。

Answer 1

使用 Code Mirror 选项这是不可行的，因为这有点违反直觉，很少(曾经？)想要。

就像我在评论中所说的那样，假设 2 个人在电话/网络聊天中讨论一段代码/json。如果他们有不同的窗口/屏幕尺寸，当一个人向另一个人提到行号时，他们将不会看到相同的东西

解决方案

作为 hack，您可以创建自己的代表行号的元素并将它们放在默认行号上。

这是 stackblitz demo

注意:这是一个非常基本的示例。如果您更改代码镜像设置(字体大小、间距等)，您可能需要调整 css 或根据这些设置进行更多计算。

component.html

<div class='codeMirrorContainer'>
  <ngx-codemirror
      #codeMirror
      [options]="codeMirrorOptions"
      [(ngModel)]="codeObj"
    ></ngx-codemirror>

<ul class='lineContainer' [style.top.px]="-topPosition">
  <li [style.width.px]='lineWidth' *ngFor="let line of lines">{{line}}</li>
</ul>
</div>

组件.css

li
{
  height: 19px;
  list-style: none;
}

.codeMirrorContainer
{
  position:relative;
  overflow: hidden;
}

.lineContainer
{
  position:absolute;
  top:0;
  left:0;
  margin: 0;
    padding: 5px 0 0 0;
  text-align: center;
  
}

::ng-deep .CodeMirror-linenumber
{
  visibility: hidden; /* Hides default line numbers */
}

component.ts

export class AppComponent
{


  @ViewChild('codeMirror') codeMirrorCmpt: CodemirrorComponent;

  private lineHeight: number;
  public lineWidth;

  public topPosition: number;
  public lines = [];

  codeMirrorOptions: any = ....;
  codeObj :any = ...;

  constructor(private cdr: ChangeDetectorRef)
  {
  }



  ngAfterViewInit()
  {
    this.codeMirrorCmpt.codeMirror.on('refresh', () => this.refreshLines());
    this.codeMirrorCmpt.codeMirror.on('scroll', () => this.refreshLines());
    setTimeout(() => this.refreshLines(), 500)

  }


  refreshLines()
  {
    let editor = this.codeMirrorCmpt.codeMirror;
    let height = editor.doc.height;
    this.lineHeight = editor.display.cachedTextHeight ? editor.display.cachedTextHeight : this.lineHeight;
    if (!this.lineHeight)
    {
      return;
    }
    let nbLines = Math.round(height / this.lineHeight);
    this.lines = Array(nbLines).fill(0).map((v, idx) => idx + 1);
    this.lineWidth = editor.display.lineNumWidth;
    this.topPosition = document.querySelector('.CodeMirror-scroll').scrollTop;
    this.cdr.detectChanges();

  }


}