如何用FlaskPageDown迁移MathJax?

2024-05-12 23:45:09 发布

您现在位置:Python中文网/ 问答频道 /正文

我在自己的网站上尝试使用MathJax时看到了this question。唯一的答案建议使用名为python-markdown-math的扩展。然而,他们的document对我来说不是很全面。另外,似乎python-markdown-math在服务器端进行渲染,而我需要客户端渲染。你知道吗

我的问题是:如何用Flask PageDown迁移MathJax?所谓“迁移”,我的意思是在Flask PageDown的preview字段中用Mathjax及时呈现符号。This是一个显示我想要得到什么的示例。你知道吗

以下是我尝试过的(fiddle version):

f = function() { if (typeof flask_pagedown_converter === "undefined") flask_pagedown_converter = Markdown.getSanitizingConverter().makeHtml; var textarea = document.getElementById("flask-pagedown-body"); var preview = document.getElementById("flask-pagedown-body-preview"); textarea.onkeyup = function() { preview.innerHTML = flask_pagedown_converter(textarea.value); } textarea.onkeyup.call(textarea); } if (document.readyState === 'complete') f(); else if (window.addEventListener) window.addEventListener("load", f, false); else if (window.attachEvent) window.attachEvent("onload", f); else f(); var textarea = document.getElementById("flask-pagedown-body"); function update_mathjax() { var head = document.getElementsByTagName("head")[0], script; script = document.createElement("script"); script.type = "text/x-mathjax-config"; script[(window.opera ? "innerHTML" : "text")] = "MathJax.Hub.Config({\n" + " tex2jax: { inlineMath: [['$','$'], ['\\\\(','\\\\)']] }\n" + "});"; head.appendChild(script); script = document.createElement("script"); script.type = "text/javascript"; script.src = "http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"; head.appendChild(script); }; textarea.addEventListener("onkeyup", update_mathjax, false);
<head>
  <title>
    Test
  </title>
  <!-- Bootstrap -->
  <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

  <div class="flask-pagedown">
    <textarea class="form-control flask-pagedown-input" id="flask-pagedown-body" name="body" required></textarea>
  </div>
  <div class="flask-pagedown-preview" id="flask-pagedown-body-preview"></div>

  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Converter.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Sanitizer.min.js"></script>
</body>

Tags: textsrcflaskjsscriptbodycloudflarewindow