加载Codemirror时是否可以突出显示搜索模式

本文介绍了加载Codemirror时是否可以突出显示搜索模式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在页面加载时，codemirror是否可以突出显示与模式匹配的代码（例如，如果我使用搜索插件）？因此，我可以使用？search = my_pattern加载页面，并将该模式传递给codemirror。

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.

这是示例代码和jsfiddle。您可以使用CTRL + F来使用搜索插件。

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>

推荐答案

我想出了如何使用 overlay.js /mustache.html rel = noreferrer>代码镜像：覆盖解析器演示。

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>

这篇关于加载Codemirror时是否可以突出显示搜索模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！