2016-10-25 7 views
0

page 1には、page 2のようなコードを実行しています。私はこのコードをブロガーに入れ、それはうまくいった。ブロガーのmathjaxプレビューで新しい行を表示

はここで言われているコード:私たちはラインをスキップする場合

<!-- 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:私はブロガーのシンプルなユーザーです。私はプログラミング言語に精通していません。

  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
+0

注:cdn.mathjaxを.orgの寿命が近づいている場合は、https://www.mathjax.orgを参照してください。/cdn-shutting-down /移行のヒント。 –

答えて

1

彼らキーラインは、入力フィールドの値を取得し、使用してからあなたを防ぐため、(HTMLタグをエスケープ

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

です改行の場合は<br>

あなただけ<br>

例えば、

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>

関連する問題