I want to use 'LaTeX' syntax (MathJax) in my blog - javascript

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.

Related

ESLint simple-import-sort Groupings

I am trying to use the eslint-plugin-simple-import-sort library to sort my imports. I am trying to get my imports to look like this:
import firstAction from 'actions/firstAction';
import secondAction from 'actions/secondAction'
import firstActionTypes from 'actions/firstAction/types'
My .eslintrc.json file looks like this (omitted for clarity):
"plugins": ["react", "simple-import-sort"]
...
"overrides": [
{
"files": ["*.js", "*.jsx"],
"rules": {
"simple-import-sort/imports": [
"error",
{
"groups": [
["^(actions)(/.*|$)"],
["^(reducers)(/.*|$)"]
]
}
]
}
}
]
And I simply just do not know the correct Regex pattern to get the imports to sort how I need, with the appropriate whitespace. Each [] in the groups array does separate with whitespace automatically, so I really just need the Regex pattern to make the actions/*/types imports come after the actions/* imports.
Thanks in advance!
I actually figured out a way to do it which does what I need:
...
"overrides": [
{
"files": ["*.js", "*.jsx"],
"rules": {
"simple-import-sort/imports": [
"error",
{
"groups": [
["^(actions)(/.*|$)"],
["^(actions)(/.*)(types)"],
["^(reducers)(/.*|$)"]
]
}
]
}
}
]
Sorry for the premature question post, mods can delete if needed, or leave it if it helps the community.
Thanks!

Error after using "<style lang="scss" scoped>"

am using some code from github and got Errror after using
Any tip ? Am quite new into js and vue ... got problems with modules all the time.
I Tried
npm uninstall webpack
and then
npm install webpack#^4.0.0 --save-dev
It's still not working :( tried even other versions... Thx for help .. btw this is my first post :D sorry if something is wrong
Error: Rule can only have one resource source (provided resource and test + include + exclude) in {
"exclude": [
null
],
"use": [
{
"loader": "C:\\Users\\kopem\\Desktop\\práce\\VueJs\\project-01\\node_modules\\cache-loader\\dist\\cjs.js",
"options": {
"cacheDirectory": "C:\\Users\\kopem\\Desktop\\práce\\VueJs\\project-01\\node_modules\\.cache\\babel-loader",
"cacheIdentifier": "50b893d9"
},
"ident": "clonedRuleSet-38.use[0]"
},
{
"loader": "C:\\Users\\kopem\\Desktop\\práce\\VueJs\\project-01\\node_modules\\babel-loader\\lib\\index.js",
"options": "undefined",
"ident": "undefined"
}
]
}
Error: Rule can only have one resource source (provided resource and test + include + exclude) in {
"exclude": [
null
],
"use": [
{
"loader": "C:\\Users\\kopem\\Desktop\\práce\\VueJs\\project-01\\node_modules\\cache-loader\\dist\\cjs.js",
"options": {
"cacheDirectory": "C:\\Users\\kopem\\Desktop\\práce\\VueJs\\project-01\\node_modules\\.cache\\babel-loader",
"cacheIdentifier": "50b893d9"
},
"ident": "clonedRuleSet-38.use[0]"
},
{
"loader": "C:\\Users\\kopem\\Desktop\\práce\\VueJs\\project-01\\node_modules\\babel-loader\\lib\\index.js",
"options": "undefined",
"ident": "undefined"
}
]
}
at checkResourceSource (C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\#vue\cli-service\node_modules\webpack\lib\RuleSet.js:167:11)
at Function.normalizeRule (C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\#vue\cli-service\node_modules\webpack\lib\RuleSet.js:198:4)
at C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\#vue\cli-service\node_modules\webpack\lib\RuleSet.js:110:20
at Array.map (<anonymous>)
at Function.normalizeRules (C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\#vue\cli-service\node_modules\webpack\lib\RuleSet.js:109:17)
at new RuleSet (C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\#vue\cli-service\node_modules\webpack\lib\RuleSet.js:104:24)
at new NormalModuleFactory (C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\#vue\cli-service\node_modules\webpack\lib\NormalModuleFactory.js:115:18)
at Compiler.createNormalModuleFactory (C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\#vue\cli-service\node_modules\webpack\lib\Compiler.js:636:31)
at Compiler.newCompilationParams (C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\#vue\cli-service\node_modules\webpack\lib\Compiler.js:653:30)
at Compiler.compile (C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\#vue\cli-service\node_modules\webpack\lib\Compiler.js:661:23)
at C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\#vue\cli-service\node_modules\webpack\lib\Watching.js:77:18
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:24:1)
at AsyncSeriesHook.lazyCompileHook (C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\tapable\lib\Hook.js:154:20)
at Watching._go (C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\#vue\cli-service\node_modules\webpack\lib\Watching.js:41:32)
at C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\#vue\cli-service\node_modules\webpack\lib\Watching.js:33:9
at Compiler.readRecords (C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\#vue\cli-service\node_modules\webpack\lib\Compiler.js:529:11)
In vue.js you can declare global or local styles. You should and can use the <style>-tag in vue.js like this:
<style>
/* global styles */
</style>
Styles in this tag, would be valid global in your vue.js app.
<style scoped>
/* local styles */
</style>
Styles in this tag, would only be valid in the component, where you declared this <style scoped>-tag.
For more information, just read this documentation: Scoped CSS

How can configure MathJax to recognize textrm{} in equation when using textcolor?

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.

render latex with mathjax in only one div

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"
}
});

Is there a way to build a Dojo module that includes a single file from the package location?

I have the following build profile for a small app:
var profile = (function(){
var copyOnly = function(filename, mid){
/* ..snip.. */
};
return {
basePath: "../../src",
releaseDir: "../dist",
releaseName: "lib",
action: "release",
packages: [
'dojo',
'dijit',
//'dojox',
'amd',
{
name: 'lodash',
location: 'lodash',
trees: [
[".", ".", /(\/\.)|(~$)|(vendor|test)/]
]
},
{
name: 'd3',
location: 'd3',
main: 'd3.min',
trees: [
[".", ".", /(\/\.)|(~$)|(src|lib|test)/]
]
},
{ name: 'app', location: 'app' }
],
layers: {
"dojo/dojo": {
include: [ "dojo/dojo", "amd/d3","amd/gmaps",
"app/main", "app/run" ],
customBase: true,
boot: true
}
},
resourceTags: {
/* ..snip.. */
}
};
})();
The problem is this: all I need is the lodash.min.js file to be processed by the Dojo build system. Unfortunately, when you include a package definition in your profile, the build system looks at all files in the relevant directory using an implicit trees value. You can overwrite it (as I have done here) and add some ignore directives, but this is ugly and leaves you open to missing something of. What I'd like to do is affirmatively indicate precisely which file(s) that I'm interested in processing for my build process.
Does Dojo allow you to do this? The documentation is a little scant in this area, but if you can help me find a resource that explains this more clearly, that would be great!
As of 1.9 at least, I believe this can be done:
// ... snip ...
{
name:'lodash',
location:'lodash',
trees:[],
dirs:[],
files:[
["lodash.min.js"]
]
},
This explicitly lists the files, while also squashing implicit tree and directory discovery.
My belief here is based on a cursory review of util/build/discover.js -- but as I read the documentation files only should be supported.

Categories