jquery - 使用highlight.js 在可编辑 标记中的光标位置？在您编写代码时突出显示代码 "on the go"？

Question

我对所有这些东西都很陌生，目前我正在尝试在编写代码时突出显示代码。我使用的是highlight.js，它工作得很好，并且在我(重新)加载网站时设置所有代码的样式。

当我编写新代码并且尚未保存时，我的问题就出现了 - 那些熟悉该库的人知道我在说什么(我读了几次文档，但没有找到任何关于 live 的内容)突出显示？)

所以我在其中的每个 keyup 事件上替换了我的标签。这工作正常并突出显示，问题是我的光标总是跳到 .如果您想继续编写代码并且光标总是跳到开头，那么这对用户来说是非常不利的。

我找到了一些关于如何在文本区域中查找光标位置的解决方案，但这对我不起作用。我需要在 keyup 事件发生之前知道光标位置，当它发生时，将调用替换函数，并且我需要将光标放置在相同的精确位置。

有什么办法吗？有人能给我建议吗？

/**
 * inits highlight.js upon changing the code
 */
$(document).on('keyup', '.js-grid__code-val code', function () {
    $('.js-grid__code-val code').each(function (i, block) {
        hljs.highlightBlock(block);
    });
});

<div class="grid__code-val js-grid__code-val">
  <pre>
    <code class="hljs" contenteditable=""></code>
  </pre>
</div>

Answer 1

我遇到了同样的问题，this solution using rangy为我工作。

Download rangy并导入到您的项目中:

<script src="rangy/rangy-core.min.js"></script>
<script src="rangy/rangy-textrange.min.js"></script>
<script src="rangy/rangy-selectionsaverestore.min.js"></script>

<div class="grid__code-val js-grid__code-val">
    <pre>
        <code class="hljs" contenteditable=""></code>
    </pre>
</div>

<script>
     function highlightBlock(el) {
            let savedSel = rangy.saveSelection();
            hljs.highlightBlock(el);
            rangy.restoreSelection(savedSel);
    }
</script>

/**
 * inits highlight.js upon changing the code
 */
$(document).on('keyup', '.js-grid__code-val code', function () {
    $('.js-grid__code-val code').each(function (i, block) {
        highlightBlock(block);
    });
});