I want to programatically modify the color of variables. I have attempted with this
<p> \(\overline{<font color="#0000EE" id="test_A">A</font>+B}+\overline{B}\)</p>
But it will just break the syntax. I can't break the equation into multiple equations due to it being nested within an overline.
Any tips on adding an identifier to a mathjax variable so I can refer to it within javascript?
Write css class rules instead, then \class{yourClass}{yourVariable} :
.yourClass{
color:#0000EE;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_CHTML-full"></script>
<p> \(\overline{\class{yourClass}{A}+B}+\overline{B}\)</p>
You now have an 'identifier' for your variable, once it's processed, you can easyly change color with javascript
var button = document.querySelector('button');
button.addEventListener('click',changeColor);
function changeColor(){
document.querySelector('.yourClass').style.color='red';
}
.yourClass{
color:#0000EE;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_CHTML-full"></script>
<p> \(\overline{\class{yourClass}{A}+B}+\overline{B}\)</p>
<button>click</button>
Related
Does any one know how to force browser to display MathML code instead of equation?
PS: Rendering MathML to view as plain text gives the TeX output.
For example,
The axis on which the point (0,4) lie, is _____
Should be displayed as:
The axis on which the point <math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mo stretchy="false">(</mo><mn>0</mn><mo>,</mo><mn>4</mn><mo stretchy="false">)</mo></mrow><annotation encoding="application/x-tex">(0, 4)</annotation></semantics></math> lie, is _____
In most common configs, if your ouput is not directly mathML, mathjax stores mathml informations in the attribute data-mathml of a span tag wich wraps the mathJax element
This is what is displayed in the popup when you right click on a mathJax element : show math as -> MathMl Code
If your goal is to grab equations from html in mathml format, you can create a script which parse your document and get all data-mathml attributes.
There is many ways to achieve that, this is just an example you may have to adapt:
function grabMathMl(){
var spanMathMl = document.querySelectorAll(".MathJax");
let results = [];
let i = 0, ln = spanMathMl.length;
for ( i; i < ln; ++i){
if ( spanMathMl[i].hasAttribute("data-mathml") ){
results.push(spanMathMl[i].dataset.mathml);
// if you really want to replace content
spanMathMl[i].innerHTML = "<textarea>"+spanMathMl[i].dataset.mathml+"</textarea>";
}
}
return results;
}
// put this fonction in the mathJax queue for you have to wait until mathJax process is done
MathJax.Hub.Queue(function(){
let equations = grabMathMl();
//console.log (equations.toString());// your equations in mathml
});
<script>
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.3/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<div>$$\left|\int_a^b fg\right| \leq \left(\int_a^b
f^2\right)^{1/2}\left(\int_a^b g^2\right)^{1/2}.$$</div>
<div>
\begin{equation} x+1\over\sqrt{1-x^2} \end{equation}
</div>
Then in word, this link should interest you
https://superuser.com/questions/340650/type-math-formulas-in-microsoft-word-the-latex-way#802093
Is there a way in Less to expand the contents of a variable to a string?
My specific use case:
#thecolor: #3B98D5
.theclass {
...
}
.theclass:before {
content: "#3B98D5"; // How do I use #thecolor here instead?
}
Then in HTML:
<div class="theclass">
#3B98D5 <!-- What I want in the end -->
</div>
The use case is to create a static page that shows a set of colors, where I would like the color code in the HTML, but only ever specify it in the Less.
So in the end I want it to be a HTML text node. Is this possible at all?
Just enclose the variable within double quotes and use variable interpolation (Format: #{var-name}).
#thecolor: #3B98D5;
.theclass:before {
content: "#{thecolor}";
}
The variable needs to be enclosed within quotes because otherwise the content property will not take it as a string and display. When you use "#theccolor", Less compiler just treats it as a normal string (and not as a variable which is present within quotes needing to be evaluated). The "#{theclass}" is the format for using variable interpolation which lets the compiler know that the value inside quotes is a variable which needs to be evaluated.
.theclass:before {
content: "#3B98D5";
}
.theclasswrong:before {
content: #3B98D5;
}
<div class='theclass'>- Correct Output</div>
<div class='theclasswrong'> - Will not give output without quotes</div>
I am creating an application where the site menu would be dynamically loaded from JSON file. Each menu may correspond to an action that would be defined inside the ng-click directive. This would look something like this
<li ng-repeat="menuItem in menuContainer.menus" class="{{menuItem.cssClass}}">
<a href="{{menuItem.url}}" ng-click="{{menuItem.clickAction}}">
<i class="{{menuItem.iconClass}}"></i>{{menuItem.name}}
<span class="badge">{{menuItem.subMenus.length}}</span>
</a>`enter code here`
<li>
Now the problem is ng-click does not recognize the clickAction as a function, I believe this is due to linking process. I want to know is there any way to evaluate a string to method. I tried do $eval but it executes the function on load.
How do I do this?
Define methods not as strings, but as functions and replace ng-click="{{menuItem.clickAction}}" to ng-click="menuItem.clickAction()". Another way to define function on $scope, like:
$scope.executeString = function(body){
eval(body);
};
and replace your ng-click to ng-click="executeString(menuItem.clickAction)". Anyway, use eval is antipattern;)
Remember, that ng-click and other directives, like that, takes angular expression as parameter. And if body of you expression is a = b + c than angular convert it in javascript like $scope.a = $scope.b + $scope.c
How to change the font color of Hello alone in "Hello World" using javascript/some other method?
I tried the following code,
var s= session.getCommonUserName()
s.fontcolor("green")
"Hello"+" "+ s.toUpperCase()
where i tried to change just the color of the username alone. But it failed.
I wouldn't bother to send down unformatted HTML to the client and then let the client do the JavaScript work. You create a computed field and give it the data type HTML (that keeps HTML you create intact) and use SSJS. So no JS needs to execute at the client side:
var cu = session.getCommonUserName();
return "Hello"+" <span style=\"color : green\">"+ cu.toUpperCase()+"</span>";
Don't forget to cross your t, dot your i and finish a statement with a semicolon :-)
If you want to do it with client java script, then you must do something like this:
dojo.style("html_element_id", "color", "green");
So in your case you can have have something like:
<p><span id="span1">Hello</span> World.</p>
Or you can do it directly if you don't need to change it with CJS:
<p><span style="color:green">Hello</span> World</p>
one way to do it is to wrap your 'hello' in a html span and then change the color of that span.
<span id='myspan'>hello</span> world
javascript code:
document.getElementById('myspan').style.color='green';
Went old school on this one...
Say you want to put your formatted text in a div
<div id="test">
</div>
Then you need the following javascript to do so:
div = document.getElementById("test");
hello = document.createElement("span");
hello.innerHTML = "Hello"
hello.style.color = "green";
div.appendChild(hello);
div.appendChild(document.createTextNode(" world!"));
Is there a better way to capitalize the first character of a string in Jade than this?
for list in project.lists
- list.name = list.name.charAt(0).toUpperCase() + list.name.slice(1);
li #{list.name}
Doing this every time I want to capitalize a variable is ugly, is there any way in Jade that I can define a custom function that I have available in every template like:
for list in project.lists
li #{ucfirst(list.name)}
Thanks in advance!
The contents of #{} are executed as standard JS, so you can pass in helper functions for use with things like that. You haven't specified, but assuming you are using Jade along with Express, you can do something like this:
app.locals.ucfirst = function(value){
return value.charAt(0).toUpperCase() + value.slice(1);
};
That will expose a function called ucfirst within the Jade template. You could also pass it in as part of locals every time you render, but if you are using Express it will do it automatically.
If you're willing to resort to CSS, you can create a class that capitalizes the first letter of every word within the target element.
CSS
.caps {
text-transform: capitalize;
}
Jade
div.caps
each foo in ['one', 'two', 'three']
span #{foo}
Resulting HTML
<div class="caps"><span>one</span><span>two</span><span>three</span>
Resulting view
One Two Three
If you are using pug with gulp, this can be helpful:
mixin ucfirst(text)
- text = text.charAt(0).toUpperCase() + text.slice(1);
.
#{text}
Simply call this as any other mixin:
li
+ucfirst(list.name)