使用highlight.js的可编辑<code>标签中的光标位置？在编写代码时“在旅途中”突出显示代码？答案

【问题标题】：Cursor position in an editable <code> tag using highlight.js? Highlighting code "on the go" as you write it?使用highlight.js的可编辑<code>标签中的光标位置？在编写代码时“在旅途中”突出显示代码？
【发布时间】：2017-10-15 06:45:44
【问题描述】：

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

当我编写新代码并且它还没有保存时，我的问题就出现了——那些熟悉库的人都知道我在说什么（我阅读了几次文档，但我没有找到关于 live 的任何信息突出显示？）

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

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

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

/**
 * 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>

【问题讨论】：

标签： jquery highlight contenteditable live highlight.js

【解决方案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);
    });
});

【讨论】：