Kmath里MathJax和markdown整合
具体见 http://kmath.cn
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="New.aspx.cs" Inherits="math.article.New" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="../javascript/jquery3.1.min.js"></script>
<script src="../javascript/mathjax_config.js"></script>
<script src="../javascript/marked/marked3.0.0.js"></script>
<script src="../javascript/mathJax/es5/tex-chtml-full.js"></script>
<link href="new2.css" rel="stylesheet" />
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<style>
.subnav-content9 div{ background-color:#000000; color:#ffffff; }
</style>
<div class="math-menu" data-editorid="editor">
<div class="sub-math-menu">
<span class="subnavbtn9">希腊字母 <span class="drop"></span> </span>
<div class="subnav-content9">
<div>小写字母</div>
<a class="add" data-math="\alpha">@\alpha@</a><a class="add" data-math="\beta">@\beta@</a><a class="add" data-math="\gamma">@\gamma@</a><a class="add" data-math="\delta">@\delta@</a><a class="add" data-math="\epsilon">@\epsilon@</a><a class="add" data-math="\varepsilon">@\varepsilon@</a><a class="add" data-math="\zeta">@\zeta@</a><a class="add" data-math="\eta">@\eta@</a><a class="add" data-math="\theta">@\theta@</a><a class="add" data-math="\vartheta">@\vartheta@</a><a class="add" data-math="\iota">@\iota@</a><a class="add" data-math="\kappa">@\kappa@</a><a class="add" data-math="\lambda">@\lambda@</a><a class="add" data-math="\mu">@\mu@</a><a class="add" data-math="\nu">@\nu@</a><a class="add" data-math="o">@o@</a><a class="add" data-math="\pi">@\pi@</a><a class="add" data-math="\rho">@\rho@</a><a class="add" data-math="\varrho">@\varrho@</a><a class="add" data-math="\sigma">@\sigma@</a><a class="add" data-math="\varsigma">@\varsigma@</a><a class="add" data-math="\tau">@\tau@</a><a class="add" data-math="\upsilon">@\upsilon@</a><a class="add" data-math="\phi">@\phi@</a><a class="add" data-math="\varphi">@\varphi@</a><a class="add" data-math="\chi">@\chi@</a><a class="add" data-math="\psi">@\psi@</a><a class="add" data-math="\omega">@\omega@</a><a class="add" data-math=" \xi">@ \xi@</a><a class="add" data-math="\varpi">@\varpi@</a>
<div style="clear:both"></div>
<div>大写字母</div>
<a class="add" data-math="\Gamma">@\Gamma@</a><a class="add" data-math="\Delta">@\Delta@</a><a class="add" data-math="\Theta">@\Theta@</a><a class="add" data-math="\Lambda">@\Lambda@</a><a class="add" data-math="O">@O@</a><a class="add" data-math="\Pi">@\Pi@</a><a class="add" data-math="\Sigma">@\Sigma@</a><a class="add" data-math="\Upsilon">@\Upsilon@</a><a class="add" data-math="\Phi">@\Phi@</a><a class="add" data-math="\Psi">@\Psi@</a><a class="add" data-math="\Omega">@\Omega@</a>
</div>
</div>
<div class="sub-math-menu">
<span class="subnavbtn9">运算符 <span class="drop"></span> </span>
<div class="subnav-content9">
<a class="add" data-math="\times">@\times@</a><a class="add" data-math="\div">@\div@</a><a class="add" data-math="\cdot">@\cdot@</a><a class="add" data-math="\pm">@\pm@</a><a class="add" data-math="\mp">@\mp@</a><a class="add" data-math="\ast">@\ast@</a><a class="add" data-math="\star">@\star@</a><a class="add" data-math="\circ">@\circ@</a><a class="add" data-math="\bullet">@\bullet@</a><a class="add" data-math="\oplus">@\oplus@</a><a class="add" data-math="\ominus">@\ominus@</a><a class="add" data-math="\oslash">@\oslash@</a><a class="add" data-math="\otimes">@\otimes@</a><a class="add" data-math="\odot">@\odot@</a><a class="add" data-math="\dagger">@\dagger@</a><a class="add" data-math="\ddagger">@\ddagger@</a><a class="add" data-math="\vee">@\vee@</a><a class="add" data-math="\wedge">@\wedge@</a><a class="add" data-math="\cap">@\cap@</a><a class="add" data-math="\cup">@\cup@</a><a class="add" data-math="\aleph">@\aleph@</a><a class="add" data-math="\Re">@\Re@</a><a class="add" data-math="\Im">@\Im@</a><a class="add" data-math="\top">@\top@</a><a class="add" data-math="\bot">@\bot@</a><a class="add" data-math="\infty">@\infty@</a><a class="add" data-math="\partial">@\partial@</a><a class="add" data-math="\forall">@\forall@</a><a class="add" data-math="\exists">@\exists@</a><a class="add" data-math="\neg">@\neg@</a><a class="add" data-math="\angle">@\angle@</a><a class="add" data-math="\triangle">@\triangle@</a><a class="add" data-math="\diamond">@\diamond@</a>
</div>
</div>
<div class="sub-math-menu">
<span class="subnavbtn9">不等式 <span class="drop"></span> </span>
<div class="subnav-content9">
<a class="add" data-math="\geq">@\geq@</a><a class="add" data-math="\prec">@\prec@</a><a class="add" data-math="\succ">@\succ@</a><a class="add" data-math="\preceq">@\preceq@</a><a class="add" data-math="\succeq">@\succeq@</a><a class="add" data-math="\gg">@\gg@</a><a class="add" data-math="\equiv">@\equiv@</a><a class="add" data-math="\sim">@\sim@</a><a class="add" data-math="\simeq">@\simeq@</a><a class="add" data-math="\asymp">@\asymp@</a><a class="add" data-math="\approx">@\approx@</a><a class="add" data-math="\ne">@\ne@</a><a class="add" data-math="\subset">@\subset@</a><a class="add" data-math="\supset">@\supset@</a><a class="add" data-math="\subseteq">@\subseteq@</a><a class="add" data-math="\supseteq">@\supseteq@</a><a class="add" data-math="\in">@\in@</a><a class="add" data-math="\ni">@\ni@</a><a class="add" data-math="\notin">@\notin@</a>
</div>
</div>
<div class="sub-math-menu">
<span class="subnavbtn9">微积分 <span class="drop"></span> </span>
<div class="subnav-content9">
<a class="add" data-math="x_{a}">@x_{a}@</a><a class="add" data-math="x^{b}">@x^{b}@</a><a class="add" data-math="x_{a}^{b}">@x_{a}^{b}@</a><a class="add" data-math="\bar{x}">@\bar{x}@</a><a class="add" data-math="\tilde{x}">@\tilde{x}@</a><a class="add" data-math="\frac{a}{b}">@\frac{a}{b}@</a><a class="add" data-math="\sqrt{x}">@\sqrt{x}@</a><a class="add" data-math="\sqrt[n]{x}">@\sqrt[n]{x}@</a><a class="add" data-math="\bigcap_{a}^{b}">@\bigcap_{a}^{b}@</a><a class="add" data-math="\bigcup_{a}^{b}">@\bigcup_{a}^{b}@</a><a class="add" data-math="\prod_{a}^{b}">@\prod_{a}^{b}@</a><a class="add" data-math="\coprod_{a}^{b}">@\coprod_{a}^{b}@</a><a class="add" data-math="\left( x \right)">@\left( x \right)@</a><a class="add" data-math="\left[ x \right]">@\left[ x \right]@</a><a class="add" data-math="\left \{ x \right \}">@\left \{ x \right \}@</a><a class="add" data-math="\left| x \right|">@\left| x \right|@</a><a class="add" data-math="\int_{a}^{b}">@\int_{a}^{b}@</a><a class="add" data-math="\oint_{a}^{b}">@\oint_{a}^{b}@</a><a class="add" data-math="\sum_{a}^{b}{x}">@\sum_{a}^{b}{x}@</a><a class="add" data-math="\lim_{a \rightarrow b}{x}">@\lim_{a \rightarrow b}{x}@</a><a class="add" data-math=" \begin{pmatrix}a&b\\c&d\\ \end{pmatrix}">@ \begin{pmatrix}a&b\\c&d\\ \end{pmatrix}@</a><a class="add" data-math=" \begin{bmatrix}a&b\\c&d\\ \end{bmatrix}">@ \begin{bmatrix}a&b\\c&d\\ \end{bmatrix}@</a><a class="add" data-math="\begin{Bmatrix}a&b\\c&d\\ \end{Bmatrix}">@\begin{Bmatrix}a&b\\c&d\\ \end{Bmatrix}@</a><a class="add" data-math="\begin{vmatrix}a&b\\c&d\\ \end{vmatrix}">@\begin{vmatrix}a&b\\c&d\\ \end{vmatrix}@</a>
</div>
</div>
<div class="sub-math-menu">
<span class="subnavbtn9">箭头 <span class="drop"></span> </span>
<div class="subnav-content9">
<a class="add" data-math="\leftarrow">@\leftarrow@</a><a class="add" data-math="\rightarrow">@\rightarrow@</a><a class="add" data-math="\leftrightarrow">@\leftrightarrow@</a><a class="add" data-math="\Leftarrow">@\Leftarrow@</a><a class="add" data-math="\Rightarrow">@\Rightarrow@</a><a class="add" data-math="\Leftrightarrow">@\Leftrightarrow@</a><a class="add" data-math="\uparrow">@\uparrow@</a><a class="add" data-math="\downarrow">@\downarrow@</a><a class="add" data-math="\updownarrow">@\updownarrow@</a><a class="add" data-math="\Uparrow">@\Uparrow@</a><a class="add" data-math="\Downarrow">@\Downarrow@</a><a class="add" data-math="\Updownarrow">@\Updownarrow@</a>
</div>
</div>
<div class="sub-math-menu">
<span class="subnavbtn9">常用公式 <span class="drop"></span> </span>
<div class="subnav-content9">
<div>二次根式</div>
<a class="add" data-math="x = {-b \pm \sqrt{b^2-4ac} \over 2a}">@x = {-b \pm \sqrt{b^2-4ac} \over 2a}@</a>
<div style="clear:both"></div>
<div>等比求和</div>
<a class="add" data-math="S_{n}=\begin{cases}a,\left( 1-q^{n}\right) ,q\neq 1\\ na_{1},q=1\end{cases}">@S_{n}=\begin{cases}a,\left( 1-q^{n}\right) ,q\neq 1\\ na_{1},q=1\end{cases}@</a>
<div style="clear:both"></div>
<div>偏分方程</div>
<a class="add" data-math="\frac{\partial f}{\partial y}(x,y) = x + 2y">@\frac{\partial f}{\partial y}(x,y) = x + 2y@</a>
<div style="clear:both"></div>
<div>正态分布</div>
<a class="add" data-math="\frac1{\sigma\sqrt{2\pi}} \exp \left(-\frac{\left(x-\mu\right)^2}{2\sigma^2} \right)">@\frac1{\sigma\sqrt{2\pi}} \exp \left(-\frac{\left(x-\mu\right)^2}{2\sigma^2} \right)@</a>
</div>
</div>
<a href="###" onclick="openSx()" >手写公式</a>
</div>
<div style="display:flex">
<div style="width:50%">
<textarea name="txt_question" style="width:500px; height:600px; " id="txt_question">
设 $x_{1} \alpha_{1}+x_{2} \alpha_{2}+x_{3} \alpha_{3}+x_{4} \alpha_{4}=\beta$, 按分量写出, 则有
$$
\left\{\begin{array}{l}
x_{1}+x_{2}+x_{3}+x_{4}=1 \\
x_{2}-x_{3} \alpha_{3}+2 x_{4}=1 \\
2 x_{1}+3 x_{2}+(a+2) x_{3}+4 x_{4}=b+3 \\
3 x_{1}+5 x_{2}+x_{3}+(a+8) x_{4}=5
\end{array}\right.
$$
对方程组的增广矩阵作初等行变换:
第一行分别乘以有 $(-2) 、(-3)$ 加到第三行和第四行上, 再第二行乘以 $(-1) 、(-2)$ 加到第三 行和第四行上, 有
</textarea>
</div>
<div style="width:50%; background-color:#f2f2f2">
<iframe id=preview frameborder="0"
width="100%" src="Preview.aspx" style="height:400px;"
scrolling="no" >
</iframe>
</div>
</div>
</div>
<script>
$("#txt_question").on("keyup", function () {
setTimeout(updatePreview, 500);
});
function updatePreview() {
var data = $("#txt_question").val();
//H3
data = data.replace(/^(#{1,6})(.*)(?:\n+|$)/ig, function ($1, $2, $3) {
return '<h' + $2.length + '>' + $3 + '</h' + $2.length + '>';
});
//Bold
data = data.replace(/(\*\*)([^]*?)(\*\*)/ig, function ($1, $2, $3) {
return "<strong>" + $3 + "</strong>"
});
// data = t.replace(/</g, "<");
// data = data.replace(/>/g, ">");
data = data.replace(/\n/g, "<br>");
var result = data.replace(/\$\$[^]*?\$\$/ig, function ($1, $2) {
// var t = $1.replace(/<br>/ig, "");
var t = $1;
t = t.replace(/</g, "<");
t = t.replace(/>/g, ">");
t = t.replace(/\n/g, "<br>");
return t;
});
preview.contentWindow.document.getElementById('math').innerHTML = data;
preview.contentWindow.doing();
}
setTimeout(updatePreview, 500);
</script>
</form>
</body>
</html>
