如何启用或禁用高亮匹配标签

Question

在编辑器中，正在 select 编辑匹配的开始或结束标签。查看文档我找到了方法 jumpToMatching(Object select) 但我没有看到禁用或启用此功能的方法。

Answer 1

始终启用匹配标签和括号的突出显示，应该可以添加选项以在此处不突出显示 https://github.com/ajaxorg/ace/blob/master/lib/ace/editor.js#L535。

Answer 2

这是一种手动禁用它然后再次启用它的方法：

function toggleMatchingTagStyle() {
    if (editor.$highlightTagPending == true) {
        editor.$highlightTagPending = false;
        editor.$highlightPending = false;
    }
    else {
        session.removeMarker(session.$tagHighlight);
        session.$tagHighlight = null;
        session.removeMarker(session.$bracketHighlight);
        session.$bracketHighlight = null;
        editor.$highlightTagPending = true;
        editor.$highlightPending = true;
    }
}

这里有一个粗略的补丁，我认为可以 editor.js 启用或禁用此功能：

旧样式 getter setter 函数

this.setHighlightMatchingTags = function(shouldHighlight) {
    this.setOption("highlightMatchingTags", shouldHighlight);
};

this.getHighlightMatchingTags = function() {
    return this.getOption("highlightMatchingTags");
};

this.setHighlightMatchingBrackets = function(shouldHighlight) {
    this.setOption("highlightMatchingBrackets", shouldHighlight);
};

this.getHighlightMatchingBrackets = function() {
    return this.getOption("highlightMatchingBrackets");
};

用于 editor.js#L2624 中的 setOption() 添加

highlightMatchingTags: {
    set: function(shouldHighlight) {this.$onSelectionChange();},
    initialValue: true
},
highlightMatchingBrackets: {
    set: function(shouldHighlight) {this.$onSelectionChange();},
    initialValue: true
},

更改此（第 505 行）：

this.$highlightBrackets = function() {

为此：

this.$highlightBrackets = function() {
    if (!this.$highlightMatchingBrackets) return;

更改此（第 534 行）：

this.$highlightTags = function() {

为此：

this.$highlightTags = function() {
    if (!this.$highlightMatchingTags) return;

Answer 3

我建议用 CSS 隐藏它。唯一的缺点是这将全局禁用所有括号突出显示，而不仅仅是 HTML 标签。

.ace_editor .ace_marker-layer .ace_bracket { display: none }

查看下面的工作演示：

var editor = ace.edit("editor");
editor.setTheme("ace/theme/dreamweaver");
editor.getSession().setMode("ace/mode/html");

#editor {
  position: absolute !important;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
#editor .ace_marker-layer .ace_bracket { display: none }

<script src="https://cdn.jsdelivr.net/g/ace@1.2.3(min/ace.js+min/mode-html.js+min/theme-dreamweaver.js)" type="text/javascript"></script>
<div id="editor">&lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 &lt;head>
  &lt;style type="text/css" media="screen">
   html, body {
    height: 100%;
   }
  &lt;/style>
 &lt;/head>
&lt;/html></div>

如何启用或禁用高亮匹配标签

How to enable or disable highlight matching tag

ace-editor