title: JQuery Highlight Inner Text of Div, OnClick
body: <p>I'm trying to auto-highlight the text of a <code>&lt;pre&gt;</code> so that it's easier to copy... Here's what I've been working with:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery( document ).ready( function() {
    $( 'pre' ).click( function() {
      $( this ).select();
      
      var doc = document
      , text = $( this )
      , range, selection;
  
      if( doc.body.createTextRange ) {
        range = document.body.createTextRange();
        range.moveToElementText( text );
        range.select();
      } else if( window.getSelection ) {
        selection = window.getSelection();        
        range = document.createRange();
        range.selectNodeContents( text );
        selection.removeAllRanges();
        selection.addRange( range );
      }
    } );
  } );</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>pre {cursor:pointer;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;pre&gt;This is Text&lt;/pre&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The posts I've searched all refer to "highlighting" as a background color but I want to <em>actually</em> highlight it so the user can copy it easily. How can I modify the JS above so that when the user clicks on the text it highlights it?</p>