auto detect added class in highlight.js for dynamically added elements

i am using highlight.js 9 and added it like the following

 <script src="highlight/highlight.pack.js"></script>

i am using ckeditor which adds highlight.js class on the fly.I need to append content in a div.When i append it i want highlight.js will detect which language class is used by editor and apply styles automatically when i append it to my page .How to achieve this?

say i am have the following content in my editor:

<pre>
<code class="language-css"><pre> <code>hljs.configure({useBR: true}); $('div.code').each(function(i, e) {hljs.highlightBlock(e)});</code></pre></code>

which results in the following styling:

when i will append it my page i want the exact same styling as i am seeing on the editor .How to do that.

a image of div id='content' currently it shows no styling :

solved it.I had to use the following code inside onclick event handler:

 $('pre code').each(function(i, block) {
                    hljs.highlightBlock(block);
                 });

full code:

CKEDITOR.replace( 'editor1'); var content=$("#content"); function lol(event){

          var el=CKEDITOR.instances.editor1.getData();
          alert(el);
          var html=$.parseHTML(el);

                content.append(html);


            $('pre code').each(function(i, block) {
            hljs.highlightBlock(block);
         });

     }