如何在Ace编辑器Angular项目中突出显示特定行?

时间:2018-08-04 09:38:20

标签: angular typescript ace-editor

我无法在ace编辑器中突出显示特定行。 我没有找到相同的包装。

app.component.css

.myMarker {
  position:absolute;
  background:rgba(100,200,100,0.5);
  z-index:20
}

app.component.html

<ace-editor #editor [text]="text" style="min-height: 200px; width:100%; overflow: auto;"></ace-editor>

app.component.ts

import { Component } from '@angular/core';
import{ViewChild} from '@angular/core'
import 'brace/theme/merbivore';
import 'brace/mode/golang';
import 'brace/ext/language_tools';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})


export class AppComponent {
    @ViewChild('editor') editor;
    text: string = " func main() {\n{\na := []float64{2, 3, 5, 7, 11, 13}\nmean := stat.Mean(a, nil)\nfmt.Println(mean)\n}";

    ngAfterViewInit() {

        this.editor.setTheme("merbivore");
        this.editor.setMode("golang");
        this.editor.getEditor().setOptions({
          enableLiveAutocompletion: true,
          enableBasicAutocompletion: true,
          enableSnippets: true,
        });
       var ace = require('brace');
    var Range = ace.acequire('ace/range').Range;
this.editor.getEditor().session.addMarker(new Range(2, 0, 0, 1), 'myMarker', 'fullLine', true);
        }
    }

1 个答案:

答案 0 :(得分:0)

您可以将go linter编译为与https://dmitri.shuralyov.com/blog/24类似的javascript,并创建一个工作程序文件(我建议在ace存储库中打开问题,要求帮助工作程序部分https://github.com/ajaxorg/ace) , 或者,您也可以在服务器上运行linter。