如何使用Flask-PageDown迁移MathJax?

时间:2016-09-28 13:04:15

标签: javascript python html markdown mathjax

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

我的问题是:如何,完全,使用Flask-PageDown迁移MathJax?通过“迁移”,我的意思是在Flask-PageDown的预览字段中通过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>

0 个答案:

没有答案