ace 编辑器中标记的自定义样式

Question

是否可以为单个标记设置自定义样式？我正在尝试将边框颜色设置为我添加的每个标记的自定义颜色，而不是使用一个 class。这些颜色是我无法提前知道的，我需要在程序运行时设置它们。这就是为什么我不能创建一打 classes 并将它们用于此目的。

Answer 1

您可以采用以下一种方法：https://jsfiddle.net/sheriffderek/wkwzprfh/

标记

<ul class="marker-type-list">

  <li class='marker-type'>
    <button class='js-create-marker' data-color='red'>Create red marker</button>
  </li>

  <li class='marker-type'>
    <button class='js-create-marker' data-color='green'>Create green marker</button>
  </li>

  <li class='marker-type'>
    <button class='js-create-marker' data-color='blue'>Create blue marker</button>
  </li>

</ul>

<ul class='marker-list'><!-- X --></ul>

脚本

$('.js-create-marker').on('click', function() {
    var color = $(this).data('color');
    console.log(color);
  $('.marker-list').append('<li class="marker ' + color + '">marker</li>');
});

样式

.marker.red {
  color: red;
}

.marker.green {
  color: green;
}

.marker.blue {
  color: blue;
}

Answer 2

您可以使用类似于 cloud9 在此处使用的动态标记 https://github.com/c9/core/blob/2d05ddeb7c0c1f6f3b35e305f60d1ba4f39f0294/plugins/c9.ide.collab/author_layer.js#L41 https://github.com/c9/core/blob/2d05ddeb7c0c1f6f3b35e305f60d1ba4f39f0294/plugins/c9.ide.collab/author_layer.js#L98

ace 编辑器中标记的自定义样式

Custom style for markers in ace editor

css

ace-editor

标记

脚本

样式