CodeMirrorでエラーに下線を付けるには？

Question

CodeMirrorに特定の文字の位置に下線を付けるにはどうすればよいですか？

私はハイライトしたいものの開始と終了の列と行番号を知っていますが、実際にハイライトを追加する方法はわかりません。

This tutorialは、行全体をハイライト表示する方法を示していますが、エラーが実際に発生する場所の下に赤い波打ちを入れたいだけです。

ここで私が持っているものです：jsbin

CodeMirror.fromTextArea(document.getElementById('grammar'), { 
 
    lineNumbers: true, 
 
    mode: 'pegjs', 
 
})

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.22.0/codemirror.min.css" integrity="sha384-Emjcn3QHkP2VdU4RooUiFc08IB3MxUhOIKysa338K0FaWAVuskkkLe7eNkXso/YH" crossorigin="anonymous"> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.3/lodash.min.js" integrity="sha384-jsG12NEMqgAmlKLBiSdTZPy1CbxTUU2AykyyLMKaLCAIvk1bAmNXGkZ5pnJHmO/l" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.22.0/codemirror.min.js" integrity="sha384-hoB2ZofsVhMdfGMWAUv7PlNjtUTmqLg4WLPWTZCOFl7H/Jig3OnOutQdW7if3B0q" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.22.0/mode/clike/clike.min.js" integrity="sha384-8+bTF1tFTP2p6v5mvLYGHHXlsP1vvv2VZ1G9m7ItQ0h9cmnSkLjMu1MU0awC2Vnp" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.22.0/mode/pegjs/pegjs.min.js" integrity="sha384-ydJmJY1nFH/5/OUYmAXyo+B/XKfnymKtFz+GaYG+84yf2sWTKwnErWnSxoZc+ob7" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.22.0/mode/javascript/javascript.min.js" integrity="sha384-g7R5zn/n5KHtJr96K6OEZz4n/MzoKFsr9ncytZcrGoGw+xO1L1JtqjNg/zxLFEIP" crossorigin="anonymous"></script> 
 
</head> 
 

 

 
    <textarea id="grammar">how can I highlight only "this" word?</textarea>

---

を私はeditor.addOverlayを使用してみましたが、私はエラーがどこにあるか知っている必要がありtoken方法、内部で我々can't get the line numberようです。

Answer 1

これを達成する最も簡単な方法はmarkTextです。ここで

は例です：

CodeMirror.fromTextArea(document.getElementById('grammar'), { 
    lineNumbers: true, 
    mode: 'pegjs', 
}).on('change', _.throttle(editor => { 
    fetch('/grammar', { 
     method: 'POST', 
     body: editor.getValue(), 
    }).then(res => { 
     let contentType = res.headers.get('Content-Type'); 

     if(/^application\/json(;|$)/.test(contentType)) { 
      res.json().then(data => { 
       clearMarks(); 

       if(data.error) { 
        let loc = data.error.location; 

        let from = {line: loc.start.line-1, ch: loc.start.column-1 - (loc.start.offset === loc.end.offset)}; 
        let to = {line: loc.end.line-1, ch: loc.end.column-1}; 

        errorMarks.push(editor.markText(from, to, {className: 'syntax-error', title: data.error.message})); 
       } 
      }) 
     } else { 
      clearMarks(); 
     } 
    }); 
}, 333, { 
    leading: false, 
    trailing: true, 
}));