demo path:
https://github.com/mathjax/MathJax-demos-web/blob/master/input-tex2chtml.html
I add mathjax config:
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script>
MathJax = {
tex: {
inlineMath: [['$', '$']]
}
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-chtml-full.js"></script>
run like this:
The $ sign should not be there, but it still shows，even though the Tex grammar is right.
How do I make the $ go away? Where am I wrong? and what's the solution?
Your configuration is correct. There is a slight issue with the way you are trying to use the input field and tex2chtmlPromise via convert.
You can see that your code is working if you put your lines in the body rather than in the textarea:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width">
<title>MathJax v3 with interactive TeX input and HTML output</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script>
MathJax = {
tex: {
inlineMath: [["$", "$"]]
}
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-chtml.js"></script>
</head>
<body>
Testing math:
<p>$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$</p>
</body>
</html>
For more information about your usage issue, see this GitHub Issue Delimiter not working with MathJax.tex2chtmlPromise method
"the MathJax.tex2chtmlPromise() function takes a LaTeX string as its parameter, which does not require a delimiter. [...] So if you are passing delimiters to this, they will be typeset as part of the math. There is no need for delimiters because you are identifying the math, not MathJax, and are passing it directly to the function. There is no need for delimiters, because there is no need to separate the math from the surrounding text, as you have already done that yourself."
When you use the $ delimiter in your document, your specified delimiters will be handled appropriately. The delimiters are necessary in the document body as a way to distinguish it from the surrounding text.
However, in the textarea, it is expected that the only thing the user inputs is valid Math. Given this expectation, delimiters are unexpected. When the raw input is passed to the MathJax.tex2chtmlPromise any text included will be typeset as math. Hence, why your $ signs appear as literals in your output field.
Related
I have two Marko components that I'd like to include in other components whenever they render on an Express server: <main-header/> and <main-footer />.
components/main-header/index.marko is as follows:
<lasso-page />
<!DOCTYPE html>
<html>
<head>
<lasso-head />
</head>
<body>
<nav>...</nav>
And components/main-footer/index.marko is:
<footer>...</footer>
<lasso-body />
</body>
</html>
The page I want to render on a certain route would look like:
<main-header />
//component content
<main-footer />
However, I get an error of Missing ending "body" tag for main-header, so obviously this kind of EJS-partials like syntax isn't allowed. Is there a better way to do this without having a single index.marko file that is rendered in every route handler?
Here's the docs on using layouts:
https://markojs.com/docs/core-tags/#layouts-with-nested-attributes
The docs mention using #tags which allow passing named content chunks (if you wanted to put some stuff into <head> and other stuff into <body>), but if you only have a single content chunk to pass, you can use the default content.
You can create a layout that uses the <include> tag to render content passed to it:
<html>
<body>
<include(input.renderBody)/>
</body>
</html>
Then use the layout, passing body content:
<custom-layout>
Content goes here
</custom-layout>
I am pretty new to nightwatchjs and encountering a strange behaviour when I tried to assert simple text in a single dom
Same assertion method and one works but another doesn't
// This works
client.expect.element('#MenuToggle').text.to.contain('Menu');
// This doesn't work and it always returns empty "" string
client.expect.element('#BackToMain').text.to.contain('Back to main');
The code given in your question is correct and should work... To help you with debugging, please try to run the following minimal working example:
HTML (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nightwatch</title>
</head>
<body>
Menu
Back to main
</body>
</html>
JavaScript (test.js)
module.exports = {
'Test': function (browser) {
browser.url('http://localhost:8000/index.html'); // Change this if needed
browser.expect.element('#MenuToggle').text.to.contain('Menu');
browser.expect.element('#BackToMain').text.to.contain('Back to main');
browser.end();
}
};
Command
nightwatch -t tests/test.js
If it does not work:
Check if your environment is OK (it works with Node v7.7.4 + Nightwatch v0.9.14).
Edit your question to add more code.
For HTML5 and Python CGI:
If I write UTF-8 Meta Tag, my code doesn't work.
If I don't write, it works.
Page encoding is UTF-8.
print("Content-type:text/html")
print()
print("""
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
şöğıçü
</body>
</html>
""")
This codes doesn't work.
print("Content-type:text/html")
print()
print("""
<!doctype html>
<html>
<head></head>
<body>
şöğıçü
</body>
</html>
""")
But this codes works.
For CGI, using print() requires that the correct codec has been set up for output. print() writes to sys.stdout and sys.stdout has been opened with a specific encoding and how that is determined is platform dependent and can differ based on how the script is run. Running your script as a CGI script means you pretty much do not know what encoding will be used.
In your case, the web server has set the locale for text output to a fixed encoding other than UTF-8. Python uses that locale setting to produce output in in that encoding, and without the <meta> header your browser correctly guesses that encoding (or the server has communicated it in the Content-Type header), but with the <meta> header you are telling it to use a different encoding, one that is incorrect for the data produced.
You can write directly to sys.stdout.buffer, after explicitly encoding to UTF-8. Make a helper function to make this easier:
import sys
def enc_print(string='', encoding='utf8'):
sys.stdout.buffer.write(string.encode(encoding) + b'\n')
enc_print("Content-type:text/html")
enc_print()
enc_print("""
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
şöğıçü
</body>
</html>
""")
Another approach is to replace sys.stdout with a new io.TextIOWrapper() object that uses the codec you need:
import sys
import io
def set_output_encoding(codec, errors='strict'):
sys.stdout = io.TextIOWrapper(
sys.stdout.detach(), errors=errors,
line_buffering=sys.stdout.line_buffering)
set_output_encoding('utf8')
print("Content-type:text/html")
print()
print("""
<!doctype html>
<html>
<head></head>
<body>
şöğıçü
</body>
</html>
""")
From https://ru.stackoverflow.com/a/352838/11350
First dont forget to set encoding in file
#!/usr/bin/env python
# -*- coding: utf-8 -*-
Then try
import sys
import codecs
sys.stdout = codecs.getwriter("utf-8")(sys.stdout.detach())
Or if you use apache2, add to your conf.
AddDefaultCharset UTF-8
SetEnv PYTHONIOENCODING utf8
I am using Handlebars in an Express Node.js app. My layout.html file includes a <head> section. How can I make the <head> section different for different pages? (So that I can, for example, reference a JavaScript file in only one page, and vary the <title> for each page.)
layout.html looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src='/public/ajsfile.js'></script>
<link type='text/css' href="/public/style.css" rel="stylesheet">
</head>
<body>
{{{body}}}
</body>
</html>
(I am imagining varying the <head> content with something analogous to {{{body}}} in the above, but with {{{head}}}.)
This is a great question and, in my mind, a glaring weakness in Express's view model. Fortunately, there is a solution: use Handlebars block helpers. Here's the helper I use for this purpose:
helpers: {
section: function(name, options){
if(!this._sections) this._sections = {};
this._sections[name] = options.fn(this);
return null;
}
}
Then, in your layout, you can do the following:
<head>
{{{_sections.head}}}
</head>
<body>
{{{body}}}
</body>
And in your view:
{{#section 'head'}}
<!-- stuff that goes in head...example: -->
<meta name="robots" content="noindex">
{{/section}}
<h1>Body Blah Blah</h1>
<p>This goes in page body.</p>
You can make the follow:
layout.hbs
<head>
<title>{{title}}</title>
{{#each css}}
<link rel="stylesheet" href="/css/{{this}}" />
{{/each}}
</head>
app.js
router.get('/', function (req, res, next) {
res.render('index', { title: 'MyApp', css: ['style.css', 'custom.css'] });
});
Result:
<head>
<title>MyApp</title>
<link rel="stylesheet" href="/css/style.css" />
<link rel="stylesheet" href="/css/custom.css" />
</head>
Maybe, you could use this implementation of the section helper: https://github.com/cyberxander90/express-handlebars-sections
You just need to install it and enable it:
yarn add express-handlebars-sections # or npm
const expressHandlebarsSections = require('express-handlebars-sections');
app.engine('handlebars', expressHandlebars({
section: expressHandlebarsSections()
}));
Hope it helps.
Younes
I know this is an older question but I wanted to point out a clear alternative solution to what you are asking (I'm not entirely sure why nobody else spoke about it over the years). You actually had the answer you were looking for when you bring up placing things in {{{head}}} like you do for {{{body}}}, but I guess you needed help understanding how to make it work.
It seems possible that most of the answers on this page are geared towards Node "Sections" because you speak about the different sections of HTML you've included in your layout file that you want to change. The "Sections" everyone is speaking about in this thread seems to be a technique, although I may be mistaken, originating from Microsoft's Razor Template Engine. More info: https://mobile.codeguru.com/columns/dotnet/using-sections-and-partials-to-manage-razor-views.htm
Anyway Sections work for your question, and so could "Partials" theoretically (although it may not actually be the best option for this). More info on Partials:
https://www.npmjs.com/package/express-partial
However, you simply asked for a way to alter the HTML tag content of your template layout in Handlebars, and assuming we are talking about HTML head tags, all you need to do is replace the content you have in your template layout HTML head tags with one of these (I use 3 brackets because it seems HTML would be included and you don't want it escaped):
<head>
{{{headContent}}}
</head>
Then you just dynamically pass whatever data you want through the route you create in your app.js file to "get" the page like so (I am mostly taking the code #Fabricio already provided so I didn't have to rewrite this):
router.get('/', function (req, res) {
res.render( 'index', { headContent:'I DID IT!' });
});
Now when you load your page, "I DID IT!" will be where you expect it to show up.
I am writing a JSP that displays a list of clubs in a grid. The grid shows the name of the club together with its latitude, longitude, website and description.
The actual data to be displayed is stored in a variable (a dojo.data.ItemFileWriteStore) called clubStore.
When the page is loaded, a call is made to a servlet to retrieve the data. The handling function then deletes all the items held in the store and adds new items returned by the servlet.
The JSP code is shown below:
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clubs</title>
<style type="text/css">
#import "./dojoroot/dojo/resources/dojo.css";
#import "./dojoroot/dijit/themes/tundra/tundra.css";
#import "./dojoroot/dojox/grid/resources/Grid.css";
#import "./dojoroot/dojox/grid/resources/nihiloGrid.css";
</style>
<script type="text/javascript" src="dojoroot/dojo/dojo.js"
djConfig="parseOnLoad: true, isDebug: false">
</script>
<script language="JavaScript" type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dojo.data.ItemFileWriteStore");
var clubData={
items:[{name:'No Clubs', lat:'---', lon:'---', webSite:'---', description:'---'}]
};
var layoutClub=[{field:"name", name:"Name", width:10},
{field:"lat", name:"Lat", width:5},
{field:"lon", name:"Long", width:5},
{field:"webSite", name:"Web Site", width:10},
{field:"description", name:"Description", width:'auto'}];
var clubStore=new dojo.data.ItemFileWriteStore(data:clubData});
</script>
<link rel="stylesheet" href="dojoroot/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="dojoroot/dojox/widget/Dialog/Dialog.css" />
</head>
<body class="tundra">
<%#include file="header.jsp"%>
<div id="clubGrid"
style="width: 800px;"
autoHeight="true"
data-dojo-type="dojox/grid/DataGrid"
data-dojo-props="store:clubStore,
structure:layoutClub,
query:{},
queryOptions:{'deep':true},
rowsPerPage:40">
</div>
<br>
<script>
var urlString="http://localhost:8080/BasicWeb/ClubsServlet";
dojo.xhrGet({
url: urlString,
handleAs: "text",
load: function(data) {
// remove items...
var allData=clubStore._arrayOfAllItems;
for (i=0; i<allData.length; i++) {
if (allData[i]!=null) {
clubStore.deleteItem(allData[i]);
}
}
var jsonClubArray=JSON.parse(data);
for (var i=0; i<jsonClubArray.clubs.length; i++) {
var club=jsonClubArray.clubs[i];
var newClub={name: club.clubname, lat:club.lat, lon:club.lon, webSite: club.website, description: club.description};
clubStore.newItem(newClub);
}
clubStore.save();
}
});
</script>
</body>
</html>
The script to process the servlet response sometimes fails because clubStore is undefined (debugging using Firebug). This does seem to be a spurious fault as some times everything works perfectly.
Any assistance in understanding how to define the clubStore variable would be appreciated.
Thanks.
James.
I think what might be happening is the body script is sometimes running before the head script, so it is kind of a race condition. You could try wrapping your body script into a dojo.ready. (I assume from your code that you are using dojo 1.6 or earlier since you are not using the AMD loader style.)
dojo.ready(function(){
// Put your xhr request code here.
});
You may also want to try testing with a firebug breakpoint in the head and body script. See if the head is sometimes running first.
So the problem turned out to be a syntax error in the declaration - missing '{' in the line
var clubStore=new dojo.data.ItemFileWriteStore(data:clubData});
The spurious aspect to the fault was a red herring - I had previously declared the variable as part of the DOM object and that caused a spurious fault. So I messed up my regression testing as well as introducing a syntax error!
Thanks.
James.
You could try switching the order of your require statements, so it's like this:
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojo.parser");
If that fails, you could set parseOnLoad to false, and then call dojo.parser.parse() after your store has been instantiated like so:
(assuming you are using dojo 1.6 or earlier based on your code)
dojo.addOnLoad(function() {
dojo.parser.parse();
});
Put your clubStore in the global space... just remove the var keyword in front of it...