Question

在 page 1中，有一个代码可以执行第page 2页之类的操作。我把这段代码放在博主中并且有效。

以下是上述代码：

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

但是，如果我们跳过一行，则不会在预览区域中查看。我希望新的线条显示在预览区域中，就像在page 3中一样。是否有一些代码可以添加到此代码中以获得此结果？

PS：我是博主的简单用户，我不熟悉编程语言。

Answer 1

他们的关键是

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

获取输入字段的值并转义HTML标记（从而阻止您使用例如<br>进行换行。）

您只需用<br> s

替换换行符即可

如，

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

或者作为一个片段：

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

在博客上显示mathjax预览中的新行

1 个答案: