How to refresh codemirror when it's parent div style becomes display block?

Make sure you also call refresh when switching to the tab that contains the editor.

Try this :

// Refresh CodeMirror
$('.CodeMirror').each(function(i, el){
    el.CodeMirror.refresh();
});

You can use autorefresh addon:

display/autorefresh.js

This addon can be useful when initializing an editor in a hidden DOM node, in cases where it is difficult to call refresh when the editor becomes visible. It defines an option autoRefresh which you can set to true to ensure that, if the editor wasn't visible on initialization, it will be refreshed the first time it becomes visible. This is done by polling every 250 milliseconds (you can pass a value like {delay: 500} as the option value to configure this). Note that this addon will only refresh the editor once when it first becomes visible, and won't take care of further restyling and resizing.

You just need to add JS library and set autoRefresh to true:

var editor = CodeMirror.fromTextArea(document.getElementById($this.attr('id')), {
    lineNumbers: true,
    mode: text/html,
    enterMode: "keep",
    tabMode: "shift",
    autoRefresh: true
});