How can I add underline squiggles at specific character positions to CodeMirror?
I know the start and end column and line numbers of what I want to highlight, but I can't figure out how to actually add the highlights.
This tutorial shows how to highlight the whole line, but I only want to put red squiggles under where the error actually occurs.
Here's what I've got: 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>
I tried using editor.addOverlay
but seems we can't get the line number inside the token
method, which I need to know where the error is.
The easiest way to accomplish this is with markText.
Here's an example:
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,
}));
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With