是否可以在 Ace Editor 中获得 JetBrains 风格的调试时间行提示？

Question

我目前在我的浏览器中嵌入了 ace 编辑器。当我在浏览器应用程序中编写运行代码时，我想使用行提示。 ace 是否提供任何此类功能，或者建议在行尾添加和删除评论？请注意，在这些提示中我只想要一个字符。我也考虑过在我的应用程序中使用装订线，但行号对我来说也很重要

这是我的应用程序的图片

我想让~F出现在绿线上，~D出现在蓝线上。这是一个 RISC ISA 执行，但我认为这不重要。

Answer 1

有两种方法

连接到分词器以添加额外的分词

// update lines
editor.session.bgTokenizer.lines[0].push({type: "comment", value: "  // ~D "})

// hook into $tokenizeRow to add tokens after text is changed too
if (!editor.session.bgTokenizer.$tokenizeRow_orig)
     editor.session.bgTokenizer.$tokenizeRow_orig = editor.session.bgTokenizer.$tokenizeRow
editor.session.bgTokenizer.$tokenizeRow = function(row) {
    var tokens = editor.session.bgTokenizer.$tokenizeRow_orig(row)
    tokens.push({type: "comment", value: "  // ~D " + row})
    return tokens 
}

// redraw editor
editor.renderer.updateFull()

添加渲染监听器并向编辑器添加 dom 个元素

var dom = require("ace/lib/dom")
var annotations = {5: {text: "foo"}, 25: {text: "bar"}}
editor.renderer.on("afterRender", function() {
    editor.renderer.$textLayer.$lines.cells.forEach(function(cell) {
        if (annotations[cell.row]) {
            if (!annotations[cell.row].element)
                annotations[cell.row].element = dom.buildDom(["span", {style: "color:red"}, annotations[cell.row].text])
            cell.element.append(annotations[cell.row].element)
        }

    })
})
editor.renderer.updateText()

var value = Array(100).fill(0).map((x,i)=>i+3).join(" ~ \n")
function isPrime(num) {
  var max = Math.sqrt(num) + 1
  for (var i = 2; i < max; i++) 
    if (num%i == 0) return false
  return true
}
var editor = ace.edit("editor", {
    value
})


var annotations = {}

editor.on("change", updateAnnotations)

function updateAnnotations() {
  clearAnnotations()
  editor.session.doc.getAllLines().forEach(function(line, lineNumber) {
    var num = parseInt(line)
    if (isPrime(num)) {
      if (isPrime(num - 2) || isPrime(num + 2)) text = " is a twin prime"
      else text = " is a prime"
      annotations[lineNumber] = {text}
    }
  })
}

function clearAnnotations() {
  for (var i in annotations) {
    if (annotations[i]?.element)
      annotations[i].element.remove()
  }
  annotations = {}
}

var dom = ace.require("ace/lib/dom")
function renderAnnotations() {
    editor.renderer.$textLayer.$lines.cells.forEach(function(cell) {
        if (annotations[cell.row]) {
            if (!annotations[cell.row].element)
                annotations[cell.row].element = dom.buildDom(["span", {style: "color:red"}, annotations[cell.row].text])
            cell.element.append(annotations[cell.row].element)
        }

    })
}

editor.renderer.on("afterRender", renderAnnotations)

updateAnnotations()
editor.renderer.updateText()

<script src=https://ajaxorg.github.io/ace-builds/src/ace.js></script>

<div id="editor" style="height: 200px"></div>

是否可以在 Ace Editor 中获得 JetBrains 风格的调试时间行提示？

Is it possible to get JetBrains-style debug-time line hints in Ace Editor?

javascript

ace-editor