Improved mathjax process: add the theorem environments and beautify HTML code preview #187
Comments
|
I need guys to help me on complete this kind of functions. |
|
@vanabel Thank you for sharing it. This could become an awesome extension. I think that mathjax never included the amsthm package because this is something a text editor should provide. Adding something like this to this editor seems logical to me. I think you have one This is more like the styling latex has: |
|
This part is useless: userCustom.onPagedownConfigure = function(editor) {
editor.hooks.chain("onPreviewRefresh", function() {
MathJax.Hub.Queue(["resetEquationNumbers", MathJax.InputJax.TeX]);
});
};You define userCustom.onAsyncPreview = function(callback) {
MathJax.Hub.Queue(["resetEquationNumbers", MathJax.InputJax.TeX]);
callback();
}; |
|
This is my revision. I've removed the I've also removed If you don't want the content of userCustom.onPagedownConfigure = function (editor) {
var thmCounter = { num: 0 };
var excsCounter = { num: 0 };
var environmentMap = {
thm: { title: "Theorem" ,counter: thmCounter },
lem: { title: "Lemma" ,counter: thmCounter },
cor: { title: "Corollary" ,counter: thmCounter },
prop: { title: "Property" ,counter: thmCounter },
defn: { title: "Definition" ,counter: thmCounter },
rem: { title: "Remark" ,counter: thmCounter },
prob: { title: "Problem" ,counter: excsCounter },
excs: { title: "Exercise" ,counter: excsCounter },
examp: { title: "Example" ,counter: excsCounter },
proof: { title: "Proof" }
};
var converter = editor.getConverter();
// Save the preConversion callbacks stack
var preConversion = converter.hooks.preConversion;
converter.hooks.preConversion = function (text) {
// Change \begin...\end to /begin.../end to avoid MathJax processing
text = text.replace(/\\begin{(\w+)}([\s\S]*?)\\end{\1}/g, function (wholeMatch, m1, m2) {
if(!environmentMap[m1]) return wholeMatch;
// At this stage we need to keep the same number of characters for accurate section parsing
return '/begin{' + m1 + '}' + m2 + '/end{' + m1 + '}';
});
// Transform \title and \section into markdown title to take benefit of partial rendering
text = text.replace(/\\(\w+){([^\r\n}]+)}/g, function (wholeMatch, m1, m2) {
// At this stage we need to keep the same number of characters for accurate section parsing
if (m1 == 'section') {
// \section{} has to be replaced by 10 chars
return '\n### ' + m2 + '\n';
}
if (m1 == 'subsection') {
// \subsection{} has to be replaced by 13 chars
return '\n#### ' + m2 + '\n';
}
if (m1 == 'subsubsection') {
// \subsubsection{} has to be replaced by 16 chars
return '\n##### ' + m2 + '\n';
}
if (m1 == 'title') {
// \title{} has to be replaced by 8 chars
return '\n## ' + m2 + '\n';
}
return wholeMatch;
});
// We are replacing the preConversion stack, call the other preConversion callbacks from the old stack
return preConversion(text);
};
converter.hooks.chain("preBlockGamut", function (text, blockGamutHookCallback) {
text = text.replace(/\\ref{(\w+):(\d+)}/g, function (wholeMatch, m1, m2) {
if(!environmentMap[m1]) return wholeMatch;
return '<a class="latex_ref" href="#' + m1 + ':' + m2 + '">' + environmentMap[m1].title + ' ' + m2 + '</a>';
});
text = text.replace(/\\(author|date){([\s\S]*?)}/g, '<div class="latex_$1">$2</div>');
return text.replace(/\/begin{(\w+)}([\s\S]*?)\/end{\1}/g, function (wholeMatch, m1, m2) {
if(!environmentMap[m1]) return wholeMatch;
var result = '<div class="latex_' + m1 + '"><span class="latex_title"></span>' + blockGamutHookCallback(m2);
if (m1 == "proof") {
result += '<span class="latex_proofend" style="float:right">$■$</span>';
}
return result + '</div>';
});
});
var previewContentsElt = document.getElementById('preview-contents');
editor.hooks.chain('onPreviewRefresh', function() {
thmCounter.num = 0;
excsCounter.num = 0;
_.each(previewContentsElt.querySelectorAll('[class^="latex_"]'), function(elt) {
var key = elt.className.match(/^latex_(\S+)/)[1];
var environment = environmentMap[key];
if(!environment) return;
var title = environment.title;
if(environment.counter) {
environment.counter.num++;
title += ' ' + environment.counter.num;
elt.id = key + ':' + environment.counter.num;
}
elt.querySelector('.latex_title').innerHTML = title + '.';
});
});
};
userCustom.onReady = function () {
var style = [
'.latex_thm, .latex_lem, .latex_cor, .latex_defn, .latex_prop, .latex_rem {',
' font-style:italic;',
' display: block;',
' margin:15px 0;',
'}',
'.latex_prob, .latex_examp, .latex_excs, .latex_proof {',
' font-style:normal;',
' margin: 10px 0;',
' display: block;',
'}',
'.latex_title {',
' float:left;',
' font-weight:bold;',
' padding-right: 10px;',
'}',
'.latex_proofend {',
' float:right;',
'}',
].join('\n');
$("head").append($('<style type="text/css">').html(style));
}; |
|
Just reposted. I had to reimplement the 2 counters logic. |
|
Two points: 1. The rather than |
NOTE: I've updated my code about half an hour ago. |
|
@benweet 👍 |
Closed
fyuniv
referenced
this issue
in XiangyunHuang/ElegantBookdown
Mar 30, 2020
…hui/rmarkdown-cookbook/ * 有个大胆的想法，后续定理、证明类的 block 都类似改头换面一下
|
@vanabel Great extension! Any plan to port this to MathJax v3? Thanks. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I have add the following code as an extension of mathjax.
You can add the following code to
UserCustom extensionto obtain the following function:You can make the output HTML code almost the same as it should be in a
TeXcode, this is quite useful when you use stackedit as a mid-step (as an WYSIWYG editor) , but finally you want to obtain atexcode. add the following toButton HTML codeThe text was updated successfully, but these errors were encountered: