在 page 1有一个代码可以执行类似页面 page 2 的操作。我把这段代码放在 blogger 中并且它起作用了。
这是上述代码:
<!-- 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, "<").replace(/>/g, ">");
$('#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:我是blogger的普通用户，对编程语言不熟悉。
最佳答案
他们的关键是
input = $('#input').val().replace(/</g, "<").replace(/>/g, ">");
它获取输入字段的值并转义 HTML 标记(从而防止您使用 <br> 等换行符。)
您可以将换行符替换为 <br>
例如，
input = $('#input').val().replace(/</g, "<").replace(/>/g, ">").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, "<").replace(/>/g, ">").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>关于javascript - 在博客上的 mathjax 预览中显示新行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40241385/