I am trying to learn how to display math equations with MathJax. I tweaked this code from codepen and this works fine:
`<!DOCTYPE html>
<head>
<script src='https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML'></script>
<style>
p {
font-size: 22px;
}
</style>
</head><body>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: { inlineMath: [['$', '$']] },
elements: ['math']
});
</script>
<p id="math">
Find the value of:
$\Huge{\frac {3.41 \times 10^3}{1.80 \times 10^2}}$
and enter the answer within the box.
</p>
`
However, when I add one more paragraph and enter math in there, it does not display as math. It just displays like text. Any suggestions? Thank you.
Include your next paragraph id in the elements: ['math'] array in your MathJax config.
Related
I am using MathJax to display some equations in an HTML document. What I want to do is explained in the following snippet:
<!DOCTYPE html>
<html>
<head>
<title>Math in HTML</title>
<meta charset="utf-8">
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
},
svg: {
fontCache: 'global'
}
};
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-mml-chtml.js"></script>
</head>
<body>
<h1>Mathematic equations</h1>
<p>I cannot select this equation:
$$\intop_0^1f(x)dx=\pi$$
nor this one $x^2 + 3x - 2 = \zeta$.
</p>
<p>I would like that when someone copy-pastes the previous paragraph he/she would get:
<code>I cannot select this equation:
$$\intop_0^1f(x)dx=\pi$$
nor this one $x^2 + 3x - 2 = \zeta$.</code>
</body>
</html>
Basically I would like to make the math selectable and when copied into the clipboard to get the Latex code. Is this possible?
I am using Mathjax to display equations in an HTML. This is my code:
<!DOCTYPE html>
<html>
<head>
<title>Math in HTML</title>
<meta charset="utf-8">
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
},
svg: {
fontCache: 'global'
}
};
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-mml-chtml.js"></script>
</head>
<body>
<h1>Mathematic equations</h1>
<p>I cannot select this equation:
$$\intop_0^1f(x)dx=\pi$$
nor this one $x^2 + 3x - 2 = \zeta$.
</p>
</body>
</html>
The problem is that I cannot select the equations. Previously I was using this in the header:
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true
}
});
</script>
which produces "selectable equations" but raises a deprecation warning. (I tried to insert another snippet with this working example but StackOverflow complained it was too much code.)
I cannot find out how to convert the equations into "selectable".
You are correct that MathJax output can't be copied directly from the page in version 3. Version 3 uses CSS with content properties in order to insert the characters into the page, and content text is not selectable in the page.
In general, copying MathJax output would only be reliable with the simplest of expressions (nothing involving super- or subscripts, fractions, roots, arrays, multi-character stretchy delimiters, accents, etc.), so this was never a supported feature for MathJax.
On the other hand, it would be possible for MathJax to insert the characters directly rather than use content CSS, and an extension to implement that would be possible. Example code for doing that is available in the MathJax User's Forum.
I just recently learned angular.js (and i use the word "learned" loosely), and I am trying to make a basic website and have gotten stuck on form validation. I realized that the double bracket notation I learned from "Shaping up with angular.js" isn't registering on the webpage that I have. I've been hacking at this all day and you'll probably see more than a few issues with my code (feel free to comment).
The code piece I am talking about is this:
<div class="divvy" ng-repeat="slider in main.sliders">
<h3>
{{slider.name}} costs {{slider.cost | currency}}
</h3>
</div>
I will include the entire code, but for reference, the class "divvy" is just a convoluted way to make the div centered on the screen.
My header reads as this:
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Didact+Gothic|Ek+Mukta|Montserrat" rel="stylesheet">
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="//code.angularjs.org/snapshot/angular.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
And the script.js file is rather simple, because I haven't really done anything with it yet besides debugging why this isn't working.
(function(){
var app = angular.module("myModule",[]);
app.controller('MainController',function(){
this.products= sliders;
});
var sliders= [
{name: "Charles",
cost: "4.20"
},
{
name:"Alfred",
cost:"30"
},
{
name:"Something that costs 10 bucks",
cost:"10.1"
}
]
})()
Please help me out. I think that something else I was trying to fix made it so that I couldn't use angular properly anymore (there is a button in there that is meant to edit text (also a debugging attempt) and it used to work but no longer does after some ctrl+z made me lose my place).
Additionally, if you have extra time, there is a background picture which I spent a lot of time figuring out how to center and make it "zoom-proof", but I would like to edit it dynamically (background changes with slides or fadechanges) but the background img is stuck in style.css html{}... And I don't know how to edit that using "myStyle" or even use ng-myStyle in the first place. Thank you. The full code is at plunker, here: https://plnkr.co/edit/H4uhcU
It should be,
<div class="divvy" ng-repeat="slider in main.products">
DEMO
var app = angular.module("myModule",[]);
app.controller('MainController',function(){
var sliders= [
{name: "Charles",
cost: "4.20"
},
{
name:"Alfred",
cost:"30"
},
{
name:"Something that costs 10 bucks",
cost:"10.1"
}];
this.products= sliders;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app= "myModule" ng-controller="MainController as main">
<div class="divvy" ng-repeat="slider in main.products">
<h3>
{{slider.name}} costs {{slider.cost | currency}}
</h3>
</div>
I am very new to making web pages and to this website.
I managed to make a system to add tags; however, I have no idea how to style it. I tried doing:
input[type=text] { border-radius:5px;}
But this does not work. Here is my entire code:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="select2/select2.js"></script>
<script>
$(function(){
$('#select').select2({
// specify tags
tags: ["Value 1", "Value2"],
maximumSelectionSize: 3
});
});
</script>
<link rel="stylesheet" href="select2/select2.css">
<style>
border-radius:20px;
</style>
</head>
<body>
<input id="select" style="width:300px" placeholder="Select Categories">
</body>
</html>
That is my first problem.
My second problem is that maximumSelectionSize: 3 does not work well: if you write three tags, it reminds you of the limit and doesn't allow more. However when you delete them and try to enter new ones, it still shows that you have written 3 tags.
(I apologize if these questions has been repeated before.. I tried searching for them but I couldn't find anything.)
Thank you for your time!
You will need to alter the select2.css style to increase the border radius
Amend the following style selector with your desired border-radius: .select2-container-multi .select2-choice {border-radius:20px;}
For the second issue, alter your select2 function to match the following and change the input element to a div element in your html and delete the "placeholder" attribute from the tag. Here is the code sample:
<script>
$(document).ready(function(){
$('#select').select2({
tags: ["Value1", "Value2", "Value3", "Value4", "Value5"],
placeholder: "Select Categories",
maximumSelectionSize: 3
});
});
</script>
<div id="select" style="width:300px"></div>
I'm so confused about this. I've searched for tutorials but can't find any that make much sense to me, how do I set a CSS class for MathJax output? I just want to make the font big. The current include is:
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
At the bottom of my page. Renders TEX fine, but I'd like to set some CSS on it!
Ideally I'd like to pass a CSS class name to it.
Have you tried setting the scale option in your output processor? See the manual. You can set the configuration options either in a file or inline; this page covers the process.
Basically, you include a short snippet of JavaScript in your page, or in a file you include. Example:
<script type="text/javascript">
MathJax.Hub.Config({
extensions: ["tex2jax.js"],
"HTML-CSS": { scale: 100}
});
</script>
Also, you can simply surround the thing in a div with a CSS class applied. View the source on this page.
<div style="font-size: 500%;">
\[
g\frac{d^2u}{dx^2} + L\sin u = 0
\]
</div>
The equation will simply inherit the font size.
Update:
As I have learned now, do not use CSS to style TeX in mathjax, it could lead to display problems. See here: https://github.com/mathjax/MathJax/issues/925
Solution is to use Javascript with the Config block:
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
"HTML-CSS": { scale: 200, linebreaks: { automatic: true } },
SVG: { linebreaks: { automatic:true } },
displayAlign: "left" });
</script>
Obsolete:
I am loading MathJax dynamically with JQuery's getScript(), only in case there are $$ on the page. In this case the solution above does not work.
The workaround is to set the CSS after the loading took place:
$(".MathJax").css("font-size","150%");
Instead of the font size in % you can also use px or em.
If this does not work, use !important for your CSS styles. For instance:
.MathJax, .MathJax_Display {
text-align: left !important;
font-size: 130% !important;
}