I cannot get it to work and I'm not sure what I'm doing wrong.
I've downloaded MathJax.js, created an html file and linked it to the js file appropriately. I even copied and pasted from a previously answered question on here and just changed the link from a vpn (the vpn didn't work either, but the question and response were over three years old) to the js file on my machine.
Here's what I have in my html:
<html>
<head>
<title>MathJax</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({"HTML-CSS": { preferredFont: "TeX", availableFonts: ["STIX","TeX"] },
tex2jax: { inlineMath: [ ["$", "$"], ["\\\\(","\\\\)"] ], displayMath: [ ["$$","$$"], ["\\[", "\\]"] ], processEscapes: true, ignoreClass: "tex2jax_ignore|dno" },
TeX: { noUndefined: { attributes: { mathcolor: "red", mathbackground: "#FFEEEE", mathsize: "90%" } } },
messageStyle: "none"
});
</script>
<script type="text/javascript" src="MathJax.js"></script>
<script type="text/javascript" src="latest.js"></script>
</head>
<body>
The definition of the Euler-Mascheroni constant is
\gamma=\lim_{n\to\infty}\left(\sum_{k=1}^n\frac1k-ln(n)\right)
</body>
</html>
I would greatly appreciate any assistance.
There are a few problems.
If you don't specify a so-called combined configuration file, you need to specify all necessary components yourself. In particular, input, output and in your case the TeX pre-processor to find TeX markup in the page
If you use TeX input, you need to wrap input in the delimiters of your choice.
For example
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
jax: ["input/TeX", "output/HTML-CSS"],
extensions: ["tex2jax.js"],
"HTML-CSS": { preferredFont: "TeX", availableFonts: ["STIX","TeX"] },
tex2jax: { inlineMath: [ ["$", "$"], ["\\(","\\)"] ], displayMath: [ ["$$","$$"], ["\\[", "\\]"] ], processEscapes: true, ignoreClass: "tex2jax_ignore|dno" },
TeX: { noUndefined: { attributes: { mathcolor: "red", mathbackground: "#FFEEEE", mathsize: "90%" } } },
messageStyle: "none"
});
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js"></script>
The definition of the Euler-Mascheroni constant is
$\gamma=\lim_{n\to\infty}\left(\sum_{k=1}^n\frac1k-ln(n)\right) $
Caveat. I don't know what latest.js should do and you seem to be using a local installation so be sure to check the docs for that, http://docs.mathjax.org/en/latest/installation.html.
Here is a file I constructed from the documentation examples
<html>
<head>
<!-- See http://docs.mathjax.org/en/latest/web/start.html#using-mathjax-from-a-content-delivery-network-cdn -->
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-mml-chtml.js">
</script>
</head>
<body>
<p>
From the overview docs, in MathML: Let's consider <math><mi>a</mi><mo>≠</mo><mn>0</mn></math>.
</p>
<p>
With \(\LaTeX\) input:
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</p>
</body>
</html>
Related
I am writing a blog post on blogspot. Here is my MathJax configuration in the theme's html file.
<script defer='defer' id='MathJax-script' src='https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-svg.js' type='text/javascript'/>
<script>
window.MathJax = {
tex: {
loader: {load: ['[tex]/ams']},
inlineMath: [ ['$','$'],['\\(','\\)'] ],
displayMath: [ ['$$','$$'], ['\\[','\\]'] ],
processEscapes: true,
processEnvironments: true,
processRefs: true,
packages: {
'[+]': ['ams']
},
},
};
</script>
And here is my attempt at using the amsmath align environment.
...
By linearity of expectation
\begin{align}
\mathbb{E}[I_r] & \leq |I_{r-1}|+\sum_{u\in \overline{I_{r-1}}\setminus \{v_{r-1}\}}{\mathbb{E}[X_{u,r}]}+1\\
& \leq |I_{r-1}| + c_2k(|\overline{I_{r-1}}|-1)|I_{r-1}|/n^2+1\\
& \leq |I_{r-1}|\cdot(1+c_2k/n) + 1\\
\end{align}
...
However, when previewing my page, it just renders the text literally, without MathJax processing. How can I fix this?
This works perfectly. Hope it works for you.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
MathJax = {
tex: {
inlineMath: [
['$', '$'],
['\\(', '\\)']
]
},
svg: {
fontCache: 'global'
}
};
</script>
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-chtml.js">
</script>
</head>
<body>
<div class="math">
\begin{align}
\mathbb{E}[I_r] & \leq |I_{r-1}|+\sum_{u\in \overline{I_{r-1}}\setminus \{v_{r-1}\}}{\mathbb{E}[X_{u,r}]}+1\\
& \leq |I_{r-1}| + c_2k(|\overline{I_{r-1}}|-1)|I_{r-1}|/n^2+1\\
& \leq |I_{r-1}|\cdot(1+c_2k/n) + 1\\
\end{align}
</div>
</body>
<script>
const
math = document.querySelector('.math')
MathJax.typeset();
</script>
</html>
This source worked in html file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kakao JavaScript SDK</title>
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<script>
// SDK를 초기화 합니다. 사용할 앱의 JavaScript 키를 설정해 주세요.
Kakao.init('JAVASCRIPT_KEY');
// SDK 초기화 여부를 판단합니다.
console.log(Kakao.isInitialized());
</script>
</head>
<body></body>
</html>
So I thought the next source will work on Nuxt.js.
But it showed just
'ReferenceError
Kakao is not defined' in these source
in nuxt.config.js
// Global page headers (https://go.nuxtjs.dev/config-head)
head: {
title: 'P-Cloud OCR',
meta: [
{ 'http-equiv': 'X-UA-Compatible', content: 'IE=Edge' },
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
script: [
{ src: 'https://developers.kakao.com/sdk/js/kakao.js'},
]
}, ```
in pages/login.vue
<script>
export default {
...
}
Kakao.init('JAVASCRIPT_KEY');
console.log('Kakao.isInitialized() >>', Kakao.isInitialized());
</script>
Why is this source not working?
There are basically 2 approaches you can do:
1. Load the library directly in your layout/page/component
head () {
if (window.Kakao) {
this.afterKakaoLoaded()
return
}
return {
script: [
{
hid: 'kakao',
src: 'https://developers.kakao.com/sdk/js/kakao.js',
callback: () => {
this.afterKakaoLoaded()
}
}
]
}
},
methods: {
afterKakaoLoaded () {
window.Kakao.init('...')
}
}
2. Load the library within a plugin
Josh Deltener wrote a great article about how to achieve that: https://deltener.com/blog/nuxt-third-party-code-is-poison/
In nuxt you can overwrite the default .nuxt/views/app.template.html.
You need to create app.html file at the root of the project. Then put the below code inside this file:
app.html
<!DOCTYPE html>
<html lang="en" {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>
Then you can follow the traditional way that you mentioned in question:
<!DOCTYPE html>
<html lang="en" {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<script>
// SDK를 초기화 합니다. 사용할 앱의 JavaScript 키를 설정해 주세요.
Kakao.init('JAVASCRIPT_KEY');
// SDK 초기화 여부를 판단합니다.
console.log(Kakao.isInitialized());
</script>
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>
But be aware that in this method, all pages in your application load this script.
I wanna make my tags have space, live ketchup v2 but for now it's generating two tags ketchup and v2.
I took the simple example of making tags or search for existed
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" />
</head>
<body>
<select class="form-control select2" multiple="multiple" style="width: 100%;"></select>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
<script>
$('.select2').select2({
data: ["Piano", "Flute", "Guitar", "Drums", "Photography"],
tags: true,
maximumSelectionLength: 10,
tokenSeparators: [',', ' '],
placeholder: "Select or type keywords",
//minimumInputLength: 1,
//ajax: {
// url: "you url to data",
// dataType: 'json',
// quietMillis: 250,
// data: function (term, page) {
// return {
// q: term, // search term
// };
// },
// results: function (data, page) {
// return { results: data.items };
// },
// cache: true
// }
});
</script>
</body>
</html>
So, I want to do only with enter create a tag, not with space or something like that.
Change your code like this and check.
tokenSeparators: [',']
This will allow only enter key or comma to create a tag.
I have dropbox:
<div id='jqxDropDownList'></div>
and js:
var source = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Café Bombón",
"Café au lait"];
// Create a jqxDropDownList
$("#jqxDropDownList").jqxDropDownList({
source: source,
selectedIndex: 3,
theme: 'energyblue',
checkboxes:true
});
And this Iframe:
<iframe></iframe>
Here if fiddler.
My question is how to put dropbox inside Iframe?
You need to point your iframe to a src, so your code needs to be in another page, as it were:
https://jsfiddle.net/Lp0qgsjd/ contains <iframe src="https://jsfiddle.net/CLB86/320/show"></iframe> and http://jsfiddle.net/CLB86/320/ has your code:
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css"/>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css"/>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id='jqxDropDownList'></div>
and js:
var source = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Café Bombón",
"Café au lait"];
// Create a jqxDropDownList
$("#jqxDropDownList").jqxDropDownList({
source: source,
selectedIndex: 3,
theme: 'energyblue',
checkboxes:true
});
I'm totaly net to javascript and ExtJS. So maybe someone can help me.
I want to display ExtJS made form on Web page when I call javascript method.
The code is:
.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Car Wiki</title>
<link rel="stylesheet" type="text/css" href="extJSLib\extjs-4.1.1\resources\css\ext-all.css">
<script type="text/javascript" src = "extJSLib\extjs-4.1.1\ext-all-dev.js"></script>
<link rel ="stylesheet" type="text/css" href="mainPageStyle.css">
<script type = "text/javascript" src="mainPageScript.js"></script>
</head>
<body>
<div class="mainForm" >
<div id="mainPanel">
<script>mainModule.testMethos();</script>
</div>
</div>
</body>
</html>
mainPageScript.js
(function(exports){
exports.testMethos = function()
{
var formPanel = Ext.create('Ext.form.Panel',{
title: 'Search Form',
width:300,
height:200,
layout: 'anchor',
defaults:
{
anchor:'80%'
},
renterTo: document.body,
items:[
{
xtype: 'textfield',
fieldLabel: 'Car Name',
name: 'carName',
labelAlign: 'top',
cls: 'field-margin',
flex:1
},
{
xtype: 'textfield',
fieldLabel: 'Car Model',
name:'carModel',
labelAlign:'top',
cls:'field-margin',
flex: 1
}
]
});
};
} )(this.mainModule = {});
where is my mistake? (do not say, that in my genetic code :D)
First mistake is your use of Ext.onReady as this is an event which gets fired when the framework has finished loading.
Trying to use it within a function call like you have makes no sense, so just remove this altogether and just keep your form code.
Alternatively, you can still use Ext.onReady but it should be used in the main script block of your html file, that and your form code should be moved there.
I have got your form to display using this approach, you can see this working here
Fiddle above