I am reading this book where there are MathJax formulas. I am taking notes in an Ipython notebook. It is not convenient to take note from passages with Math formula. Is there an easy way to copy text with equations as a Tex command (which is render-able on Ipython)?
Update
TL;DR
Right click on a formula > Math Settings > Math Renderer > MathML
Create a bookmarklet from: javascript:(function() { var inline = document.getElementsByClassName("MathJax_MathML"); for (var i = 0; i < inline.length; i++) { var math = inline[i]; math.innerHTML = '<span>$</span>' + math.innerHTML + '<span>$</span>'; } })()
Run the bookmarklet on a page by pressing it
Enjoy easier copy & pasting!
Long version
This Github issue has a fix for the problem. It didn't work well for this page so I changed it a bit as above. It is not a general solution, but you can tweak it depending on the specifics of a page. If you are more eager, you can elaborate on it and make a browser extension for everyone to appreciate it :).
Old Answer
I tried couple of methods on this example:
Method 1:
Change the settings to render as MathML by: Right click on the formula > Math Settings > Math Renderer > MathML
Open the page source e.g. Ctrl + U on Chrome or Right click and press 'View Source'.
Find the piece of text you are looking for. It should be displayed in the right format:
bla bla $a \ne 0$ bla bla \(ax^2 + bx + c = 0\) bla bla
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
Method 2:
Do step 1 from previous method. The example page will be rendered with formulas but without the formula-enclosing characters.
Add single or double dollar signs around TeX commands to get the format as in step 3 of the previous method.
The best would be to combine the two method; i.e. getting the right format directly in the page. Let us know if you found a way to do it.
And thanks to #nam and #PeterKrautzberger for their hints :)
Here is my extension to #Thoran's answer with bookmarklet that can auto change renderer to MathML and display MathJax formulas source inline:
javascript: (function() { MathJax.Hub.setRenderer("NativeMML"); MathJax.Hub.Queue(["Rerender", MathJax.Hub]); MathJax.Hub.Queue(function () { var inline = document.getElementsByClassName("MathJax_MathML"); for (var i = 0; i < inline.length; i++) { var math = inline[i]; math.innerHTML = '$' + math.innerHTML + '$'; } }); })()
And here is PlainSource version:
javascript: (function() { MathJax.Hub.setRenderer("PlainSource"); MathJax.Hub.Queue(["Rerender", MathJax.Hub]); MathJax.Hub.Queue(function () { var inline = document.getElementsByClassName("MathJax_PlainSource"); for (var i = 0; i < inline.length; i++) { var math = inline[i]; math.innerHTML = '$' + math.innerHTML + '$'; } }); })()
Related
I have created a chrome extension to allow users to right-click in a textbox, and insert special characters. This works on many sites such as StackOverflow, but does not work on sites such as Facebook. This is because Facebook is not using a standard text box form control. Instead for each line in a text message, it seems to be using a div > div > span > span construct. Is there a way to create a Chrome extension to target page components such as this?
An portion of my Chrome extension code looks like this:
main.js:
chrome.contextMenus.create({
title: "\u038F",
contexts:["editable"],
onclick: function(info, tab){
chrome.tabs.sendMessage(tab.id, {action: "insertCharacter", character: '\u038F'});
}
});
content.js
chrome.extension.onMessage.addListener(function(request, sender, sendResponse){
var objField = document.activeElement;
if (request.action == "insertCharacter"){
insertAtCursor(objField, request.character);
}
});
function insertAtCursor(sField, sValue){
if (sField.selectionStart || sField.selectionStart == '0'){
var nStart = sField.selectionStart;
var nEnd = sField.selectionEnd;
sField.value = sField.value.substring(0, nStart) + sValue + sField.value.substring(nEnd, sField.value.length);
sField.selectionStart = nStart + sValue.length;
sField.selectionEnd = nStart + sValue.length;
}
else {
sField.value += sValue;
}
}
Is there a more general purpose way I can do this to handle various situations on different sites? If not, is there a way to specifically target Facebook as most of the time myself (and likely others) are going to be using my extension on Facebook. (Of course having it work for email sites such as GMail would be a benefit as well).
In case it helps someone else, this is what I modified my code to based on wOxxOm's suggestion:
chrome.extension.onMessage.addListener(function(request, sender, sendResponse){
if (request.action == "insertCharacter"){
insertAtCursor(request.character);
}
});
function insertAtCursor(sValue){
document.execCommand("insertText", false, sValue);
}
It's much more compact than my original approach and insertText handles the selection aspect automatically.
I am uses TinyMCE 4 where I have inserted source content as link
Sample Link
After inserting above content in the TinyMCE, if I click on the preview button of TinyMCE then anchor tag is coming in the form of link but it's not clickable.
Can anyone guide how anchor we can make it as clickable?
I have followed below links(by adding default_link_target: "_blank"):
https://community.tinymce.com/communityQuestion?id=90661000000MrWjAAK
&
How to open hyperlink in new window under tinymce text editor?
but none seems to be worked.
but none seems to be worked.
The preview plugin has code that specifically stops links from being clickable. If you look at the JavaScript code for the plugin you will see something like this:
var preventClicksOnLinksScript = (
'<script>' +
'document.addEventListener && document.addEventListener("click", function(e) {' +
'for (var elm = e.target; elm; elm = elm.parentNode) {' +
'if (elm.nodeName === "A") {' +
'e.preventDefault();' +
'}' +
'}' +
'}, false);' +
'</script> '
);
This code is there specifically to address an issue that could cause a link in preview to unintentionally remove the editor instance.
If you click a link in the preview pane that has a target=_top you will end up blowing away the editor and replacing it with the content of that link - likely not what you want.
I know it's an old thread but maybe it will help someone out there. If you want the links to open in a new window in tinymce prevew plugin remove this script:
<script>document.addEventListener && document.addEventListener("click", function(e) {for (var elm = e.target; elm; elm = elm.parentNode) {if (elm.nodeName === "A") {e.preventDefault();}}}, false);</script>
and place this one instead:
<script>function externalLinks() { for(var c = document.getElementsByTagName("a"), a = 0;a < c.length;a++) { var b = c[a]; b.getAttribute("href") && b.href.hostname !== location.hostname && (b.target = "_blank") } } ; externalLinks();<\/script>
Enjoy!
We're aware of that amazing trick which allows users to highlight a link. But, you must repeat it for each link. for example: a href="https://www.yahoo.com" Onclick="window.open(this.href); return false" onmouseout="this.style.color = '#0000ff';" onmouseover="this.style.color = '#e3FF85';" align="justify">Yahoo. But, I would like this code to apply to every link on the page. I've explored 2 possible methods. One is to use STYLE TYPE and CLASS= methods. Another possibility is using STYLE H1 /H1 (similar to W3 schools). But, I haven't even come close to getting a universal application.
1. You can try this:
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; ++i)
{
links[i].onmouseenter = function() {links[i].style.color = '#e3FF85';};
links[i].onmouseout= function() {links[i]..style.color = '#0000ff';};
}
You get the list of all links using getElementsByTagName('a') ('a' is tag name for links), and you can do anything you want with them.
2. You can also try it with jquery:
var allLinks = $('a');
allLinks.mouseenter(function() { $(this).css('color', '#e3FF85'); });
allLinks.mouseout(function() { $(this).css('color', '#0000ff'); })
3. If you just care about changing style (like color or background) when mouse is over your link, you can do it from CSS:
a:hover
{
color: #123456;
}
I am using PhantomJS to create screenshots from arbitrary URLs. Before the screenshot is taken, I want to manipulate the page DOM to remove all drop-down menus, as PhantomJS renders them incorrectly in the top left-hand corner of the page (a known Phantom issue.)
I have a simple DOM script to do this with:
var selects = document.getElementsByTagName('select');
for (var i=0; i < selects.length; i++) {
document.getElementsByTagName('select')[i].style.visibility="hidden";
}
This has been tested and works fine as stand-alone Javascript. It doesn't however work inside the PhantomJS code I am using to collect the screenshots (last part shown):
page.open(address, function (status) {
if (status !== 'success') {
console.log('Unable to load the address!');
} else {
window.setTimeout(function () {
var selects = document.getElementsByTagName('select');
for (var i=0; i < selects.length; i++) {
document.getElementsByTagName('select')[i].style.visibility="hidden";
}
page.render(output);
phantom.exit();
}, 200);
}
});
Some pages are still rendering with a select box in the wrong place. I'd appreciate help either solving the original PhantomJS rendering bug or hiding the drop-down menus in the DOM. Thanks.
Run it in the right context, i.e. inside the page with page.evaluate. There are many examples included with PhantomJS which demonstrate this, e.g. useragent.js.
This code doesn't work?
I used your cached selects variable in the for loop instead of re-selecting the elements from the DOM to improve performance.
var selects = document.getElementsByTagName('select');
for (var i=0; i < selects.length; i++) {
selects[i].style.visibility="hidden";
}
I am using the jQuery inline editing plugin Jeditable. Thankfully, Jeditable provides a plugin capability for extending the out of the box inline editing it provides.
I am hoping to not reinvent the wheel-- as such does a PageDown plugin already exist for Jeditable? If one does my Google-fu is not turning up any results.
I never found a ready to go Jeditable PageDown plugin so I wrote my own. The below example is too specific to be used without modification, but should provide a decent enough outline for anyone endeavoring to accomplish a similar task.
Code to add a "markdown" input type to Jeditable:
var converter = Markdown.getSanitizingConverter();
$.editable.addInputType('markdown', {
element: function(settings, original) {
var editorId = original.id.substring(original.id.lastIndexOf("-"));
var input = $('<textarea />');
input.attr('id', 'wmd-input' + editorId);
var panel = $('<div class="wmd-panel" />');
panel.append('<div id="wmd-button-bar' + editorId + '" />');
panel.append(input);
panel.append('<div id="wmd-preview' + editorId + '" />');
$(this).append(panel);
return (input);
},
plugin: function(settings, original) {
var editorId = original.id.substring(original.id.lastIndexOf("-"));
var editor = new Markdown.Editor(converter, editorId);
editor.run();
}
});
The above code goes through a bunch of gyrations concerning the elements id, because in my case I can have several editors on a single page. See the PageDown documentation about Markdown.Editor for more details.
Once I've added the "markdown" input type to Jeditable it's just a matter of utilizing it with this code:
$('.editable-element-area').editable('http://jsfiddle.net/echo/jsonp/', {
onblur: 'submit',
type: 'markdown',
indicator: 'Saving...',
loadurl: 'http://jsfiddle.net/echo/jsonp/', // retrieve existing markdown
callback: function(value, settings) {
$(this).html(converter.makeHtml(value)); // render updated markdown
}
});
I want my users to see the markdown as HTML when they aren't editing it so I have to make use of the callback and loadurl Jeditable parameters. The load url retrieves the text to edit in markdown format, while the callback converts the new text back to html.