CODEWITHSUNDEEP
javascripthtmlbloggermathjax
Pedro
Pedro

Reputation: 113

Showing new lines in mathjax preview on blogger

In page 1 there is a code to do something like page page 2. I put this code in blogger and it worked.

Here is the said code:

<!-- this document is fully based on MathJax-jquery.html by kurokigen. -->
<html>
<head>
<title>Live Preview of MathJax Type Setting</title>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ["\\(","\\)"]] } });
</script>
<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$(function() {
  function makePreview() {
    input = $('#input').val().replace(/</g, "&lt;").replace(/>/g, "&gt;");
    $('#preview').html(input);
    MathJax.Hub.Queue(["Typeset",MathJax.Hub,"preview"]);
  }
  $('body').keyup(function(){makePreview()});
  $('body').bind('updated',function(){makePreview()});
  makePreview();
});
</script>
</head>
<body>

<h1>Live Preview of MathJax Type Setting</h1>

<h2>Input</h2>

<p>Examples: <code>$\varphi_i$</code>, <code>\(\dfrac12\)</code>, <code>\[\sum_{n=1}^\infty x^n\]</code>, etc</p>

<p><textarea id="input" name="body" cols="80" rows="8">\[ \zeta(s) = \sum_{n=1}^\infty\frac{1}{n^s} \]</textarea></p>

<h2>Preview Area</h2>

<div id="preview"></div>

<script type="text/javascript"><!--
var fhp_c_pc = navigator.userAgent.toLowerCase();
var fhp_ie = ((fhp_c_pc.indexOf("msie") != -1) && (fhp_c_pc.indexOf("opera") == -1));
var fhp_cs, fhp_wt, fhp_dm;
if (fhp_ie) {
        fhp_cs = document.charset;
}else{
        fhp_cs = document.characterSet;
}
fhp_dm = encodeURI(document.location);
fhp_wt = "";
fhp_wt = '<' + 'script src="http://web.fc2.com/header.php?cs=' + fhp_cs + '&dm=' + fhp_dm + '" charset="UTF-8"><' + '/script>';
fhp_wt += '<' + 'script src="http://web.fc2.com/footer/footer.php?cs=' + fhp_cs + '&dm=' + fhp_dm + '"><' + '/script>';
document.write(fhp_wt);
//--></script>
</body>
</html>

However, if we skip a line, it is not viewed in the preview area. I'd like that the new lines were displayed in the preview area, like in page 3. Is there some code that can be added to this code to get this result?

PS: I'm a simple user of blogger and I'm not familiar with programing language.

  1. https://gist.github.com/gnrr/2607159
  2. https://cdn.mathjax.org/mathjax/latest/test/sample-dynamic-2.html
  3. http://www.math.union.edu/~dpvc/transfer/mathjax/sample-incremental.html

Upvotes: 1

Views: 167

Answers (1)

Peter Krautzberger
Peter Krautzberger

Reputation: 5285

They key line is 

input = $('#input').val().replace(/</g, "&lt;").replace(/>/g, "&gt;");

Which gets the value of the input field and escapes HTML tags (thus preventing you from using e.g. <br> for linebreaks.)

You could just replace newlines with <br>s

E.g.,

input = $('#input').val().replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\n/g,"<br>");

Or as a snippet:

<!-- this document is fully based on MathJax-jquery.html by kurokigen. -->
<html>
<head>
<title>Live Preview of MathJax Type Setting</title>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ["\\(","\\)"]] } });
</script>
<script type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$(function() {
  function makePreview() {
    input = $('#input').val().replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\n/g,"<br>");
    $('#preview').html(input);
    MathJax.Hub.Queue(["Typeset",MathJax.Hub,"preview"]);
  }
  $('body').keyup(function(){makePreview()});
  $('body').bind('updated',function(){makePreview()});
  makePreview();
});
</script>
</head>
<body>

<h1>Live Preview of MathJax Type Setting</h1>

<h2>Input</h2>

<p>Examples: <code>$\varphi_i$</code>, <code>\(\dfrac12\)</code>, <code>\[\sum_{n=1}^\infty x^n\]</code>, etc</p>

<p><textarea id="input" name="body" cols="80" rows="8">\[ \zeta(s) = \sum_{n=1}^\infty\frac{1}{n^s} \]</textarea></p>

<h2>Preview Area</h2>

<div id="preview"></div>

<script type="text/javascript"><!--

//--></script>
</body>
</html>

Upvotes: 1

Related Questions