是否有可能在代碼鏡像加載時突出顯示搜索模式

當頁面加載時，有沒有辦法讓codemirror突出顯示與模式匹配的代碼（如果我使用搜索插件）？所以我可以用？search = my_pattern加載頁面並將該模式傳遞給codemirror。是否有可能在代碼鏡像加載時突出顯示搜索模式

下面是一個示例代碼和jsfiddle。您可以使用CTRL + F來使用搜索插件。

<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> 
     <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/codemirror.css" /> 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/codemirror.min.js"></script> 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/search.js"></script> 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/searchcursor.js"></script> 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/match-highlighter.js"></script> 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/python.js"></script> 
    </head> 
    <body> 
     <textarea id="myTextArea">print "hello world"</textarea> 
     <script> 
     var myTextArea = document.getElementById('myTextArea'); 
     var myCodeMirror = CodeMirror.fromTextArea(myTextArea, { 
      'mode': 'python', 
      'lineNumbers': true 
     }); 
     </script> 
    </body> 
</html>

http://jsfiddle.net/ErxMb/

來源

2013-04-12 brunoqc

我想出如何使用overlay.js通過查看CodeMirror: Overlay Parser Demo它做。

<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> 
     <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/codemirror.css" /> 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/codemirror.min.js"></script> 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/search.js"></script> 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/searchcursor.js"></script> 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/overlay.min.js"></script> 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/match-highlighter.js"></script> 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/python.js"></script> 
    </head> 
    <style type="text/css"> 
     .cm-highlightSearch {background: yellow;} 
    </style> 
    <body> 
     <textarea id="myTextArea">print "hello world"</textarea> 
     <script> 
     var keyword = 'hello'; 

     CodeMirror.defineMode("highlightSearch", function(config, parserConfig) { 
      var searchOverlay = { 
      token: function(stream, state) { 
       if (stream.match(keyword)) { 
        return "highlightSearch"; 
       } 

       while (stream.next() != null && !stream.match(keyword, false)) {} 
       return null; 
      } 
      }; 
      return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || "python"), searchOverlay); 
     }); 

     var myTextArea = document.getElementById('myTextArea'); 
     var myCodeMirror = CodeMirror.fromTextArea(myTextArea, { 
      'mode': 'highlightSearch', 
      'lineNumbers': true 
     }); 
     </script> 
    </body> 
</html>

http://jsfiddle.net/HkjY7/

來源

2013-04-15 18:30:34 brunoqc

是否有可能在代碼鏡像加載時突出顯示搜索模式

回答

相關問題