title: Code Mirror overlay applied
body: <p>Can I apply a Code Mirror overlay outside the definition of a mode? 
  The code below works but seems redundant and slow. I'm defining a mode for each editor/viewer on a page which could be zero to many. How can this be optimized?</p>
  
  <p>Ideally, I would like to define the mode once and then apply the overlay as needed.</p>
  
  <p>I have not been able to find an answer if I can. I want to define a mode (it highlights a search term <a href="https://stackoverflow.com/questions/15979135/is-it-possible-to-highlight-a-search-pattern-when-codemirror-loads">(see this question)</a>) and then I want to apply that mode to many editors/viewers on a page. Each editor/viewer has a different language and is set on the DOM element (e.g <code>&lt;pre class="sourcecode" language="javascript"&gt;code&lt;/pr&gt;</code>).</p>
  
  <p>I think the solution would be something dealing with <code>return CodeMirror.overlayMode(CodeMirror.getMode(config, mode),searchOverlay, true);</code> but I've been unable to get it to work. </p>
  
  <pre><code>$('.sourcecode').each( function() {
          var value = $(this).text(),
              search = (typeof keyword === 'undefined') ? false : true,
              mode =  $(this).attr('language'),
              pre = $(this).get(0),
              line = ($(this).attr('firstLineNumber') == undefined) ? 1 : parseInt($(this).attr('firstLineNumber'), 10);
  
          // CodeMirror search highlighing
  
          // this seems redundent, slow, and messy
          if (search) {
              CodeMirror.defineMode("highlightSearch", function(config, parserConfig) {
                var searchOverlay = {
                  token: function(stream, state) {
                      if (stream.match(keyword)) {
                          return "highlightSearch";
                      }
  
                      while (stream.next() != null &amp;&amp; !stream.match(keyword, false)) {}
                      return null;
                  }
                };
                return CodeMirror.overlayMode(CodeMirror.getMode(config, mode),searchOverlay, true);
              });
          }
  
          var viewer = CodeMirror(function(elt) {
              pre.parentNode.replaceChild(elt, pre);
          }, {
              value: value,
              lineNumbers: true,
              firstLineNumber: line,
              matchBrackets: true,
              lineWrapping: true,
              readOnly: true,
              mode: (search) ? 'highlightSearch' : mode,
          });
      });
  </code></pre>
  
  <p>Thank you for any help.</p>