I am using katex to render math.
https://github.com/Khan/KaTeX
Generally, to get this to work I link to the files katex.min.js and katex.min.css from a cdn, which is one of the ways the directions suggest.
I wrap what needs to be rendered in tags and give all the same class. For example:
<span class='math'>\begin{bmatrix}a & b \\c & d\end{bmatrix}</span>
And inside a script tag I apply the following:
var math = document.getElementsByClassName('math');
for (var i = 0; i < math.length; i++) {
katex.render(math[i].innerHTML, math[i]);
}
So, my implementation works but there is a problem in what katex returns. The output of the above gives me:
This exact same question is asked here:
https://github.com/j13z/reveal.js-math-katex-plugin/issues/2
But I can't understand any of it.
The solution is to use element.textContent, not element.innerHTML.
If I use a form like what follows, the matrix will be rendered properly.
var math = document.getElementsByClassName('math');
for (var i = 0; i < math.length; i++) {
katex.render(math[i].textContent, math[i]); // <--element.textContent
}
A solution that works for me is the following (it is more of a hack rather than a fix):
<script type="text/javascript">
//first we define a function
function replaceAmp(str,replaceWhat,replaceTo){
replaceWhat = replaceWhat.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
var re = new RegExp(replaceWhat, 'g');
return str.replace(re,replaceTo);
}
//next we use this function to replace all occurences of 'amp;' with ""
var katexText = $(this).html();
var html = katex.renderToString(String.raw``+katexText+``, {
throwOnError: false
});
//hack to fix amp; error
var amp = '<span class="mord mathdefault">a</span><span class="mord mathdefault">m</span><span class="mord mathdefault">p</span><span class="mpunct">;</span>';
var html = replaceAmp(html, amp, "");
</script>
function convert(input) {
var input = input.replace(/amp;/g, '&'); //Find all 'amp;' and replace with '&'
input=input.replace(/&&/g, '&'); //Find all '&&' and replace with '&'. For leveling 10&x+ &3&y+&125&z = 34232
var html = katex.renderToString(input, {
throwOnError: false});
return html
}
Which version are you using?
Edit the src/utils.js and comment line number 51 to 55 after updated run in terminal npm run build command.
Related
I spent so much time on a very simple thing and had to post here on StackOverflow
I want to get all inner text except the script/style tags
$doc = new DOMDocument;
$doc->preserveWhiteSpace = false;
$html = <<<EOD
<div>
<script>var main=0</script>
<div>
<p>my</p>
<script>var inner=0</script>
</div>
<p>text</p>
only
</div>
EOD;
$doc->loadHTML($html);
$xpath = new DOMXPath($doc);
echo $entries = $xpath->query('//*[not(self::script)]')->item(0)->nodeValue;
gives me
var main=0 my var inner=0 text only
and also tried
$entries = $xpath->query('//*[not(self::script)]');
foreach ($entries as $entry) {
if ($entry->tagName == 'style' || $entry->tagName == 'script') {
continue;
}
echo preg_replace('/\s\s+/', ' ', $entry->nodeValue);
}
gives me
var main=0 my var inner=0 text only var main=0 my var inner=0 text only var main=0 my var inner=0 text only my var inner=0mytext
I tried several xpaths but it doesn't work
my desired output is my text only
I am a Scrapy developer and I do that easily in Scrapy, but having a bad time with PHP today
Unfortunately, PHP doesn't support xpath 2.0 (and, IIRC, neither does Scrapy), so the name() method which would have made it easy, isn't available...
The closest thing I can think of is the following, which should get you close enough (note that, because there is no <style> tag in your $html, I only focused on <script>):
$entries = $xpath->query('//*[not(./text()/parent::script)]/text()');
foreach ($entries as $entry) {
echo trim($entry->textContent) . " ";
}
Output:
my text only
I'm trying to write a simple example to show docshell swapping from one iframe to another.
I wrote this, can run from scratchpad with environment browser:
var doc = gBrowser.contentDocument;
var iframeA = doc.createElement('iframe');
iframeA.setAttribute('id', 'a');
iframeA.setAttribute('src', 'http://www.bing.com');
doc.documentElement.appendChild(iframeA);
var iframeB = doc.createElement('iframe');
iframeB.setAttribute('id', 'b');
iframeB.setAttribute('src', 'data:text/html,swap to here');
doc.documentElement.appendChild(iframeB);
doc.defaultView.setTimeout(function() {
var srcFrame = iframeA;
var targetFrame = iframeB;
doc.defaultView.alert('will swap now');
srcFrame.QueryInterface(Ci.nsIFrameLoaderOwner).swapFrameLoaders(targetFrame)
doc.defaultView.alert('swap done');
}, 5000)
However this throws this error when it tries to swap:
/*
TypeError: Argument 1 of HTMLIFrameElement.swapFrameLoaders does not implement interface XULElement. Scratchpad/1:17
*/
Any ideas on how to fix?
Thanks
Thanks to #mook and #mossop from irc #extdev for the help.
The reason it didnt work was because:
pretty sure it needs to be a
Looks like gBrowser.contentDocument might be a html page? You must be using XUL elements
No idea if it even works in content either - I think it doesn't
and the things to be swapped must either both be type=content or neither can be, or something like that (translation: the type attribute of both source and target must be the same. so if one is content-primary the other must be content-primary as well)
This works:
var doc = document; //gBrowser.contentDocument;
var iframeA = doc.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'browser');
iframeA.setAttribute('id', 'a');
iframeA.setAttribute('src', 'http://www.bing.com');
iframeA.setAttribute('style', 'height:100px;');
doc.documentElement.appendChild(iframeA);
var iframeB = doc.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'browser');
iframeB.setAttribute('id', 'b');
iframeB.setAttribute('src', 'data:text/html,swap to here');
iframeB.setAttribute('style', 'height:100px;');
doc.documentElement.appendChild(iframeB);
doc.defaultView.setTimeout(function() {
var srcFrame = iframeA;
var targetFrame = iframeB;
doc.defaultView.alert('will swap now');
srcFrame.QueryInterface(Ci.nsIFrameLoaderOwner).swapFrameLoaders(targetFrame)
doc.defaultView.alert('swap done');
}, 5000)
so in other words even if you made iframe with xul namespace it would not swap if you put it in an html document. like this example here:
var xulDoc = document;
var doc = gBrowser.contentDocument;
var iframeA = xulDoc.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'iframe');
iframeA.setAttribute('id', 'a');
iframeA.setAttribute('src', 'http://www.bing.com');
iframeA.setAttribute('type', 'content');
iframeA.setAttribute('style', 'height:100px;width:100px;');
doc.documentElement.appendChild(iframeA);
var iframeB = xulDoc.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'iframe');
iframeB.setAttribute('id', 'b');
iframeB.setAttribute('src', 'data:text/html,swap to here');
iframeB.setAttribute('type', 'content');
iframeB.setAttribute('style', 'height:100px;width:100px;');
doc.documentElement.appendChild(iframeB);
doc.defaultView.setTimeout(function() {
var srcFrame = iframeA;
var targetFrame = iframeB;
doc.defaultView.alert('will swap now');
srcFrame.QueryInterface(Ci.nsIFrameLoaderOwner).swapFrameLoaders(targetFrame)
doc.defaultView.alert('swap done');
}, 5000)
It throws:
NS_ERROR_NOT_IMPLEMENTED: Scratchpad/2:21
this line is the swapFrameLoaders line
so its recommended to not use iframe with xul namespace as if you do you wont get the DOMContentLoaded and some other events http://forums.mozillazine.org/viewtopic.php?f=19&t=2809781&hilit=iframe+html+namespace
so its recommended to use element
Ok here it goes, I'm making a JScirpt for a page so you can press a keyboardbutton to move to the next page. The page URL looks like this; http://example.org/12345 , so what i want my script to do is increase the number by 1 each time you press the button. I think most of the code is right but it wont do anything
function GoThere() {
var url = window.location.pathname;
var ew = 'url'+1
url = eq.replace(location.hostname, location.hostname+ew);
window.location = url;
}
Would be grateful if someone could take a look and try to explain what I have done wrong
//EniM
check that url is an int, and take the quotes off. Might use some cleanup, but:
// strip out the /
var curint = window.location.pathname.replace(/\D/g,'');
// convert string to int
curint = parseInt( curint, 10 );
var nextint = curint + 1;
window.location = 'http://example.org/' + nextint;
Check out the Console in Chrome. You can run JS line by line... just type a function or var and it will print the result. Or set break points under Sources.
i believe your problem relies in this line
var ew = 'url'+1
it should be
var ew = parseInt(url)+1;
i wanna ask how to change title in
name
so i want to make link name copy to title automatic
so if i make this code
title link
to
title link
how to do that in php or javascript
i know some in php
but need to make all words in link at database or make for every link variable $
can some one help me in that?
I'd suggest:
function textToTitle(elem, attr) {
if (!elem || !attr) {
// if function's called without an element/node,
// or without a string (an attribute such as 'title',
// 'data-customAttribute', etc...) then returns false and quits
return false;
}
else {
// if elem is a node use that node, otherwise assume it's a
// a string containing the id of an element, search for that element
// and use that
elem = elem.nodeType == 1 ? elem : document.getElementById(elem);
// gets the text of the element (innerText for IE)
var text = elem.textContent || elem.innerText;
// sets the attribute
elem.setAttribute(attr, text);
}
}
var link = document.getElementsByTagName('a');
for (var i = 0, len = link.length; i < len; i++) {
textToTitle(link[i], 'title');
}
JS Fiddle demo.
And since it seems traditional to offer a concise jQuery option:
$('a').attr('title', function() { return $(this).text(); });
JS Fiddle demo.
If you don't want to use a library:
var allLinks = document.getElementsByTagName('a');
for(var i = 0; i < allLinks.length; i++){
allLinks[i].title = allLinks[i].innerHTML;
}
Since you wanted to do all this to one element on the page, consider using something like this:
var allLinks = document.getElementById('myelement').getElementsByTagName('a'); // gets all the link elements out of #myelement
for ( int i = 0; i < allLinks.length; i++ ){
allLinks[i].title = allLinks[i].innerHTML;
}
Actually, this is roughly the same as before but we are changing the input elements.
Or, assuming you use jQuery, you could do something like this:
$('a').each(function(){ // runs through each link element on the page
$(this).attr('title', $(this).html()); // and changes the title to the text within itself ($(this).html())
});
In JQuery you can change an attribute by knowing the current tag and using the .attr() feature. Something like $('a').attr('title', 'new_title'); http://api.jquery.com/attr/
Is it possible to filter numbers from the variable.
I can show you one example here from the link http://jsfiddle.net/sweetmaanu/82r5v/6/
I need to get only numbers from the alert message
Simply replace the box string out of it.
DEMO
for (var i = 0; i < order.length; i++) {
order[i] = order[i].replace('box', '');
}
So instead of box1, box2, box3, box4 you want to see 1,2,3,4
You can use a regular expression like this:
var order = $("#boxes").sortable("toArray") + "";
alert(order.replace(/[^0-9,]/g, ''));
I also had to append an empty string to order because it wasn't being recognized as a string object even though the jQuery documentation says it should be when you call sortable("toArray").
change var order = $("#boxes").sortable("toArray");
to var order = $("#boxes").sortable("toArray").join(',').replace(/[a-zA-Z]/gi, "");
Demo: http://jsfiddle.net/82r5v/13/
// Remove all non-digits from the string
'box1'.replace(/\D/g, ''); // => '1'
// Same, but try to make the string a number
Number('box1'.replace(/\D/g, '')); // => 1
// Shorthand for making an object a number (+o is the same as Number(o))
+'box1'.replace(/\D/g, ''); // => 1
// parseInt(s) works if the number is at the beginning
parseInt('1box'); // => 1
// but not if it occurs later
parseInt('box1'); // => NaN
Maybe using regular expressions something like this:
`alert(order.join(',').match(/\d/g));`
To return the array as numbers.
(\d matches all digits, g signifies a global match wildcard)
One way to do it by using regular expressions - http://jsfiddle.net/holodoc/82r5v/14/
$(document).ready(function() {
var arrValuesForOrder = ["2", "1", "3", "4"];
var ul = $("#boxes"),
items = $("#boxes li.con");
for (var i = arrValuesForOrder[arrValuesForOrder.length - 1]; i >= 0; i--) {
// arrValuesForOrder[i] element to move
// i = index to move element at
ul.prepend(items.get(arrValuesForOrder[i] - 1));
}
$("#boxes").sortable({
handle : '.drag',
update: function() {
var order = $("#boxes").sortable("toArray");
var sorted = [];
$.each(order, function(index, value){
sorted.push(value.match(/box(\d+)/)[1]);
})
alert(sorted);
}
});
});