Do previews using mathjax in TinyMCE's native preview plugin - tinymce

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>'