I just spent one hour on this problem and I can't seem to find a solution.
I'm loading MathJax without configuration so that I configure it myself:
<script data-cfasync="false" type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js">
</script>
and here's my configuration. It fails to not render what is in <div class="comment">
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
jax: ["input/TeX","input/MathML","input/AsciiMath","output/CommonHTML"],
extensions: ["tex2jax.js","mml2jax.js","asciimath2jax.js","MathMenu.js","MathZoom.js","AssistiveMML.js", "a11y/accessibility-menu.js"],
TeX: {
extensions: ["AMSmath.js","AMSsymbols.js","noErrors.js","noUndefined.js"]
},
tex2jax: {
inlineMath: [['$','$'], ['\\(','\\)']],
ignoreClass: "comment"
}
});
</script>
Looks like I found the answer. In addition to tex2jax ignoring this class, asciimath2jax also has to ignore this class.
Mathjax is configuration hell.
MathJax.Hub.Config({
jax: ["input/TeX","input/MathML","input/AsciiMath","output/CommonHTML"],
extensions: ["tex2jax.js","mml2jax.js","asciimath2jax.js","MathMenu.js","MathZoom.js","AssistiveMML.js", "a11y/accessibility-menu.js"],
TeX: {
extensions: ["AMSmath.js","AMSsymbols.js","noErrors.js","noUndefined.js"]
},
asciimath2jax: {
ignoreClass: "comment"
},
tex2jax: {
inlineMath: [['$','$'], ['\\(','\\)']],
ignoreClass: "comment"
}
});
Related
I have multiple entrypoints in my project which have different chunks (for example a vendor chunk). Now the issue is that my entrypoints don't work without implicitly importing the vendor chunk and the runtime file.
What I have to do
<script defer="defer" src="runtime.js"></script>
<script defer="defer" src="399.js"></script>
<script defer="defer" src="standalone.js"></script>
What I want to do
<script defer="defer" src="standalone.js"></script>
How can I make it so by just importing standalone.js it automatically imports runtime.js and 399.js without having to implicitly do this in the html file. Can this be done?
Config
module.exports = {
entry: {
standalone: path.resolve(__dirname, '../src/index.standalone.tsx')
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
output: {
path: path.resolve(__dirname, '..', './build')
},
optimization: {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all'
}
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '..', './public/index.standalone.html')
})
]
};
I'm trying to make an HTML page from LaTEX document that recently achieve it, I used the following mathjax, script configuration, after the head tag:
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
extensions: ["tex2jax.js"],
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
processEscapes: true
},
"HTML-CSS": { fonts: ["TeX"] }
});
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
"HTML-CSS": {
styles: {".MathJax": {color: "#FF0000 ! important"}}
}
});
MathJax.Hub.Queue(
["resetEquationNumbers",MathJax.InputJax.TeX],
["PreProcess",MathJax.Hub],
["Reprocess",MathJax.Hub]
);
</script>
When I try to write the following equation:
\[
\det A=|A|=\left\{
\begin{array}{ll}
-\textrm{fixation d'une \textcolor{red}{ligne:}} i=\color{red}{p} \Rightarrow |A|=(-1)^{\color{red}{p}+j}\Delta_{\color{red}{p}j}\\
-\textrm{fixation d'une colonne: } j=\color{red}{p} \Rightarrow |A|=(-1)^{\color{red}{p}+i}\Delta_{i\color{red}{p}}
\end{array}
\right.
\]
The command textcolor{red} doesn't work. What can I do it with MathJax to configure it in order to get a colorful text in equation?
This is the result of my compilation:
As per the documentation, MathJax does does not focus on textmode and only allows the following within its text-mode macros (\text{} etc): $ for re-entering math mode, \ref and \eqref.
So there is no way to get anything like \textcolor inside \text to work.
However, you can wrap \color around \text to color the text and thus you could define a custom macro \textwithcolor{red}{some text mode}, e.g., by using $\require{color}\newcommand{\textwithColor}[2]{\color{#1}{\text{#2}}} \textwithColor{red}{halleo}$.
You would still need to drop out of text mode to use it.
FWIW, there is an open issue for MathJax v3 to reconsider macros within text mode.
I intend to develop an angularJS client where I will use angular components. This will lead to multiple .js/.css files.
In order to avoid manually referencing each newly added js/css file I intend to use a grunt-include-source task.
The problem is that, after configuring the Gruntfile.js, the „grunt includeSource” task runs, returning „Done, without errors.” status but no update is made in the index.html file.
My project structure is the one presented in the attached picture (I use WebStorm as IDE).
My index.html file is the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RavenApp</title>
<!-- include: "type": "css", "files": "*.css" -->
</head>
<body>
<!-- bower:js -->
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-route/angular-route.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="../bower_components/angular-mocks/angular-mocks.js"></script>
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/underscore/underscore.js"></script>
<!-- endbower -->
<!-- include: "type": "js", "files": "*.js" -->
</body>
</html>
My Gruntfile.js is the following:
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-wiredep');
grunt.loadNpmTasks('grunt-include-source');
grunt.initConfig({
wiredep: {
target: {
src: 'app/index.html'
}
},
includeSource: {
options: {
basePath: 'app',
templates: {
html: {
js: '<script src="{filePath}"></script>',
css: '<link rel="stylesheet" type="text/css" href="{filePath}" />'
}
},
app: {
files: {
'app/index.html': 'app/index.html'
}
}
}
}
});
};
Could anyone indicate me what I have done wrong?
Thank you.
We don't need to write templates key under includeSource key:
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-wiredep');
grunt.loadNpmTasks('grunt-include-source');
grunt.initConfig({
wiredep: {
target: {
src: 'app/index.html'
}
},
includeSource: {
options: {
basePath: 'app',
app: {
files: {
'app/index.html': 'app/index.html'
}
}
}
}
});
};
HTML code is enough for including js and css:
<!-- include: "type": "css", "files": "*.css" -->
<!-- include: "type": "js", "files": "*.js" -->
I have a task to cdnize my files:
gulp.task('makeCdn', function () {
gulp.src(['./Views/SharedTemplates/*.cshtml'])
.pipe(cdnizer({
relativeRoot: './wwwroot/lib',
allowMin: true,
files: [
{
cdn: "google:angular"
},
{
cdn: "google:jquery"
},
{
cdn: "cdnjs:select2"
},
{
cdn: "cdnjs:twitter-bootstrap",
package: "bootstrap"
}
]
}))
.pipe(gulp.dest('./Views/Shared/'));
});
It nicely converts the js references, e.g. from:
<script src="../../wwwroot/lib/select2/select2.js"></script>
to:
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
BUT - it leaves the css links untouched:
<link rel="stylesheet" href="../../wwwroot/lib/select2/select2.css" />
.
And an additional question, why it's making such conversion from:
<script src="../../wwwroot/lib/angular/angular.js"></script>
<script src="../../wwwroot/lib/angular-resource/angular-resource.js"></script>
to:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
I checked many instructions on how to set LaTeX in blogspot. I went to "add a gadget", "Configure HTML/JavaScript", and How to use LaTeX on blogspot?.
Then I posted this code:
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js">
MathJax.Hub.Config({
extensions: ["tex2jax.js","TeX/AMSmath.js","TeX/AMSsymbols.js"],
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
},
"HTML-CSS": { availableFonts: ["TeX"] }
});
</script>
But nothing happened successfully.
What would be a screenshot of the process?
Try removing the extra comma after the displayMath delimiters. These extra commas often confuse Internet Explorer, so if you are using Internet Explorer as your browser, that might be the issue.