如何用CodeMirror強調錯誤？

如何將特定字符位置的下劃線小節添加到CodeMirror？如何用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，但似乎我們can't get the line number的token方法中，我需要知道哪裏出錯。

來源

2016-12-31 mpen

做到這一點，最簡單的方法是用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, 
}));

來源

2016-12-31 05:30:02 mpen

如何用CodeMirror強調錯誤？

回答

相關問題