Do previews using mathjax in TinyMCE's native preview plugin

Question

How to make TinyMCE able to use MathJax in its native preview plugin? TinyMCE editor in the frontend interface is being set in function.php file using a similar code to this

function editor_settings($args = array()){
return array(
'textarea_name' => 'post_content',
'tinymce'       => array(
                        'plugins' => "preview",
                        'toolbar' => "redo undo bold italic preview",
                        'setup'   => "function(ed){
                                               ed.onChange.add(function(ed, l) {
                                                  var content = ed.getContent();
                                                  if(ed.isDirty() || content === '' ){
                                                     ed.save();
                                                     jQuery(ed.getElement()).blur(); // trigger change event for textarea
                                                  }
                                               }"
));
}

And I'm using CDN copy of MathJax and my configuration code for MathJax is the following:

<script type="text/x-mathjax-config">
                  MathJax.Hub.Config({
                    tex2jax: {
                      inlineMath: [ ['$','$'],["\\(","\\)"] ],
                      displayMath: [['$$','$$'], ["\\[","\\]"] ],
                      processEscapes: true
                    },
                    "HTML-CSS": { 
                                    matchFontHeight: false,
                                    availableFonts: ["TeX"],
                                    webFont: 'Latin-Modern',
                                    preferredFont: 'Latin-Modern',
                                    scale: 100,
                    },
                    CommonHTML: { 
                                    matchFontHeight: false
                    },
                    SVG: {
                                    matchFontHeight: false
                    }
                  });
</script>

Answer 1

I was able to solve the problem. The modification is done in the plugin's file "plugin.min.js" that could be found following this path /wp-includes/js/tinymce/plugins/preview/ You need to look for

e += '<link type="text/css" rel="stylesheet" href="' + f(c.documentBaseURI.toAbsolute(a)) + '">'

and insert these two lines to load and configure MathJax

e += '<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>'
e += '<script type="text/x-mathjax-config"> MathJax.Hub.Config({ "HTML-CSS": { matchFontHeight: false, availableFonts: ["TeX"], webFont: \'Latin-Modern\', preferredFont: \'Latin-Modern\', scale: 100, }, CommonHTML: { matchFontHeight: false }, SVG: { matchFontHeight: false } }); </script>'