Search code examples
codemirror

Is it possible to highlight a search pattern when codemirror loads


Is there a way for codemirror to highlight the code matching a pattern (like if I use the search addon) when the page load? So I could load the page with ?search=my_pattern and pass the pattern to codemirror.

Here's a sample code and a jsfiddle. You can use CTRL+F to use the search addon.

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


Solution

  • I figured out how to do it using overlay.js by looking at the 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/