I want to use MathJax in a ClojureScript program to typeset some math in
a DOM element, not the whole page (which works), just this one particular DOM element. (It's the live preview pane of a Markdown editor that also formats math in the Latex format.)
According to this documentation page on the MathJax site, you can use something
like this in JavaScript.
MathJax.Hub.Queue(["Typeset", MathJax.Hub, latex-node]);
I've been using trial and error and have not gotten it right. Something like this:
(defn typeset-latex
[latex-node]
(.Queue js/MathJax.Hub ["TypeSet" (.-Hub js/MathJax) latex-node]))
compiles and does not produce any errors when run, but does not yield any output either.
Using the js* macro to try to reproduce the method on the documentation page:
(js* "MathJax.Hub.Queue([\"TypeSet\", MathJax.Hub, \"mde-preview-id\"]);")
produces an error message in the browser stating that "Error: Can't make callback from given data".
ALSO: Assuming I can get the syntax right to get typesetting working in figwheel, any guidance on how to setup the externs file for use with an optimized build would be appreciated.
You're close. I think you just need to make the Clojure vector into a JavaScript list. You can use the #js reader macro:
(defn typeset-latex
[latex-node]
(.Queue js/MathJax.Hub #js ["Typeset" (.-Hub js/MathJax) latex-node]))
Here is a line of code in one of my own projects that's equivalent, though it uses slightly different syntax.
Update: change TypeSet to Typeset.
I don't know about MathJax, but this template CLJS project has examples of 3 different ways of performing native JS interop from ClojureScript:
https://github.com/cloojure/cljs-template
Looking at the MathJax example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>MathJax example</title>
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=TeX-MML-AM_CHTML" async>
</script>
</head>
<body>
<p>
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>
it seems straightforward. Can you give an example of what you're trying to do?
Related
I have the following template:
<!DOCTYPE html>
<html>
<body>
{{>Header}}
This is a test template.
{{>Footer}}
</body>
</html>
When I compile this template, I'd expect to get this:
<!DOCTYPE html>
<html>
<body>
This is a header.
This is a test template.
This is a footer.
</body>
</html>
Instead, what I get is this:
<!DOCTYPE html>
<html>
<body>
This is a header. This is a test template.
This is a footer.</body>
</html>
The indentations before the first and third lines are gone; and the newlines before the second line and closing body tag are gone. Is this expected, and is there a way to preserve the whitespace just as it is laid out in the base template? I should note that I'm using Handlebars.Net here, although my understanding is that it's meant to emulate the original Javascript spec as closely as possible.
(Answer from the Github issue where this was also posted):
So there's two different things going on here that I'll summarize first and then explain: 1) what you expect is incorrect; 2) what you are getting is also incorrect, in a different way:
Whitespace (and line breaks) are not significant in HTML, and though Handlebars is technically a general string templating language, the design decisions & opinions it contains are heavily slanted towards using it for an HTML templating language. You should not expect it to preserve implicit line breaks, only explicit line breaks (e.g. if you put \n it will preserve that)
Handlebars.Net actually DOES preserve some line breaks when it's not supposed to! That's a bug but one many users are currently relying on, so we'll keep it in 1.x but fix it in v2.
To get your desired output, put explicit line breaks in your template. Cheers!
I´m using this W3 script:
<!DOCTYPE html>
<html>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<body>
<div w3-include-html="content.html"></div>
<script>
w3.includeHTML();
</script>
</body>
</html>
It works perfectly, but my issue would be that I only need one particular portion of the "content.html", and not all of it. So my question is: How do I use w3-include-html for PARTIALLY html include?
Thanks!!
You can't include part of a partial; the whole point of a 'partial' is that it in itself represents part of the code, not code that you should extract a part from.
You can include more than one partial on a page, but the partials themselves must be exactly what you're trying to include at that point; you can't 'extract' content from a partial.
Simply shrink your content.html so that it only contains the output that you would like to include on your main page.
Having said that, considering W3.js can only import HTML, there's literally no reason to store the partial HTML in an external file. Not only does this create a second, unecessary file, but it also adds a reliance on JavaScript. If your visitor opts to disable their JavaScript, your partial won't work. Thus, I strongly recommend simply writing the content of content.html in the main page itself.
Hope this helps!
I want to add another MSHTML question. Thanks to all responses.
We use in Delphi the standard TWebbrowser component, that uses mshtml.dll internally. Additionaly we use the registry to ensure that the pages renders with the new rendering engine (Web-Browser-Control-Specifying-the-IE-Version, MSDN: FEATURE_BROWSER_EMULATION). So we use the rendering of IE 10 but we have the same results with ie 8 to ie 11.
Using the standard rendering machine of MSHTML (IE7) works right, but due to new rendering options we need the new rendering of MSHTML.
We use the design mode of the control to enabled the user to make changes in the documents:
var
mDocument: IHTMLDocument2;
begin
mDocument := ((ASender as TWebBrowser).Document as IHTMLDocument2);
mDocument.designMode := 'on';
Now we have the following problem:
We load th following (simplified) HTML via the IPersistStreamInit.Load(...) into the WebBrowser:
<html>
<body>
What should I do
with some of the
spaces.
</body>
</html>
In the WebBrowser user can see the following:
Now, when selecting the word "with" in the WebBrowser in editing mode, and typing a character, some spaces appear. The HTML now has in it - exactly as many as there has been spaces in the HTML before editing:
The code is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv="Content-Type" content="text/html; charset=unicode">
<META name="GENERATOR" content="MSHTML 10.00.9200.16540"></HEAD>
<BODY> What should I do n some of the spaces.
</BODY></HTML>
The same effect can be achieved by replacing the word "spaces" in the WebBrowser.
This is a bad behaviour for users using our application.
Every HTML code with white spaces infront of text, has the same behaviour. The mess is, that MSHTML itself generates such HTML.
By now we think of a solution to remove all the spaces on the left of each line, but we think that such workarounds could end in a bigger mess, because they change the HTML. This could cause some different behaviour of the rendering.
Thinking about removing the spaces before each line, puts you somewhere in the right direction, but nowhere near what you should be doing: convert the data info HTML before IPersistStreamInit.Load.
Since the HTML specification prescribes any whitespace in the HTML code should be treated as a single instance of whitespace (except inside <pre> tags), it's understandable that IE's design-mode is confused what to with these extra spaces when you edit around them. You've stumbled upon a border case.
I suggest you either don't use IPersistStreamInit.Load
but Navigate('about:<html><body></body></html>'); and document.body.innerText:=... instead,
or take care to properly format the initial HTML:
parse the text to collapse any/all consecutive whitespace,
replace all & with &, < with < etc...
(perhaps also #13#10 with '<br />' and #13#10#13#10 with '</p><p>'?)
Hi I wanna do something really simple: a multi-level template system using only HTML and JS.
I would have like to do that with HTML only, I tried with object and embed tags but I can't make it work properly (embed doesn't display and object generates a new HTML document with and , plus it's pretty ugly).
So, next I tried handlebars.js but I didn't manage to use it to put HTML from a file into another one.
I just want to separate the distinct components of my page into different HTML-like documents (but not full HTML-valid documents, just one with the header only, one with the navigation menu only, and so on). Then on "level 2" I would have a "structure" HTML-body document which would arrange the previous elements as I want (one structure could have a menu on the left, content on the right and a footer, another would have menu on top, full-size content and a header, etc. like the different themes of a CMS only much simpler). Then on "level 3" finally, my "real" pages would use a "structure" template and then I guess I should use something like handlebars to pass content, titles etc. to level 2 and again to level 1.
So, is there any easy way to do this? Without having to rewrite a whole JS library :P And if you think handlebars.js would suit my needs (but I really don't need dynamic parts, just a title and a content for each page, maybe something to handle the current position on the website to manage menus and breadcrumb), could you please tell me how to use it to include HTML from one file to another?
Thank you very much :)
EDIT
Well after a little bit of struggling, I dit it really easily with only jQuery. I'm really not familiar with javascript (but I'm still a little ashamed) here is the way to go :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$("body").load("structure.html", function() {
$("nav").load("nav.html");
$("section").load("section.html", function() {
$("section hgroup h1")[0].innerHTML = document.title;
});
$("footer").load("footer.html");
});
});
</script>
</body>
</html>
with structure.html containing just empty tags in the order you want them like this:
and section, nav and footer.html contining what should be inside the respective tags.
Wouldn't it be easier to simply use a couple iframes? Something like:
<html>
<body>
<iframe src="nav.html"/>
<iframe src="content.html"/>
</body>
</html>
Or am I misunderstanding your question?
Is it likely or possible for img tag, or any other to be parsed, when the < tag is several characters prior, or perhaps omitted? Would this happen in any notable HTML parsers?
For example
<div>$test</div>.
Where $test could be any string containing a >, but not a <. Such as img>, but not <img
Full disclosure: This question is specifically to see whether or not the comment I posted was correct.
You don't technically need either < or >. Load this up in IE, and it'll run a javascript alert. Not sure if it's possible without messing with the charset though.
<HTML>
<HEAD>
<META charset="UTF-7">
</HEAD>
<BODY>
<DIV>+ADw-script+AD4-alert(+ACI-XSS+ACI-)+ADw-/script+AD4-</DIV>
</BODY>
</HTML>
Source: http://securityoverride.org/articles.php?article_id=13
Well, out of curiosity, I changed one of my test pages so its script section began with this:
< script>
The result was completely broken and just printed all of my javascript. This happened in IE9, GC28, and Firefox. I didn't really have an image on-hand to test with, but I think we can derive from this that HTML tags are always required to have no white-space between the angle bracket and tag declaration.
If you'd like even further confirmation, I suggest you browse the W3C standardization documents to see if you can find where they declare the generic pattern for HTML element tags. Many HTML parsers probably base themselves off those documents to ease their coding.
White space is allowed after the tagname
< script> is invalid
while
<script> is valid