I am having a problem with gulp-jade: The Jade compiler always adds a value to HTML attributes without a value, which breaks my AngularJS setup. (e.g. div(ui-view) becomes <div ui-view="ui-view"> when I want <div ui-view>.
The problem does not occur with files that have a doctype html, but since I am mostly working with 'partials' that is no help.
I am running .pipe(jade()) without additional options. Apparently gulp-jade supports all Jade API options, listed here, but I do not see which one would apply here.
There is an undocumented doctype option. .pipe(jade({doctype: 'html'})) compiles the template under the HTML5 doctype
For those finding this page who use Grunt, I found that the following works with ui-view.
div(ui-view="")
Related
jsdom version 15.1.1 jest version 24.9.0 node.js version 10.16.0
I am trying to get information from an offline html page by using
var summaryInfo = document.querySelectorAll(".className");
Array.prototype.slice.call(summaryInfo).forEach(n => ... }
In this case there should return 6 arrays of info, but I only get 2
The same exact code works fine in a normal browser, but when I use jsdom with jest it has this problem
I put in a log to see what was being passed through and found with the 2 that work the outermost tag is an <li> and everything inside is just as it should be, but with the other elements the outermost tag is a <div> interestingly nothing shows up inside.
I also checked the html document I am drawing from to make sure that those <div> elements are indeed not empty and they aren't.
Any help that you can provide would be much appreciated!
Thank you in advance.
It turns out that the HTML page had a structure where some <li> tags did not have surrounding <ul> containers. While this worked in browsers like Chrome and Firefox, that was more because the browsers were designed to correct problems like that. Intrinsically my problem is with the HTML page I am trying to use and I can't correct that.
Switching from handlebars to pug I don't know how to populate a dropdown in pug. In handlebars I could do
<script type='text/javascript'>
$('.ui.dropdown').dropdown('set selected', [{{#each trip.tags}}'{{this}}',{{/each}}]);
</script>
Anyone got a clue what's the best practice in pug?
It looks like you're trying to generate JavaScript values as part of your template rendering. The approach you have taken in markdown could cause an XSS attack if this is not properly escaped (or it might just cause values like " to appear as ").
In pug, we recommend using js-stringify when you need to embed template values in a script. To do this, you need to install js-stringify using npm. You then need to include it in your locals. e.g.
pug.renderFile('my-template.pug', {stringify: require('js-stringify')});
Then you can use it as:
script(type='text/javascript').
$('.ui.dropdown').dropdown('set selected', !{stringify(trip.tags)});
N.B. It is only safe to use the !{...} syntax because js-stringify properly escapes the values before rendering.
I would like to know the possibility to develop custom html tags or custom html attributes to node.js , rather in jade, html or another html template enginer. I was looking at PhantomJS and I don't realize any example that accomplish it, either Cheerio as well. My goal is to make some components to easily usage in any kind of popular html engines. Any direction will be very helpful. Thanks!
Node.js is just a webserver, You need something to parse the custom tags, so its either the template engine that will convert it to valid html, or client side with JavaScript (aka AngularJS directives)
You can write your own filter similar to the example
body
:markdown
Woah! jade _and_ markdown, very **cool**
we can even link to [stuff](http://google.com)
That would give you
<body>
<p>Woah! jade <em>and</em> markdown, very <strong>cool</strong> we can even
link to stuff
</p>
</body>
I am new to using Jade -- and it's awesome so far.
But one thing that I need to happen is an element with 'itemscope' property:
<header itemscope itemtype="http://schema.org/WPHeader">
My Jade notation is:
header(itemscope, itemtype='http://schema.org/WPHeader')
But result is:
<header itemscope="itemscope" itemtype="http://schema.org/WPHeader">
How can I make sure that I get the right result -- itemscope instead of itemscope="itemscope"?
Sometimes it doesn't work quite right -- like with contentEditable Jade tries to detect html5 doctypes and then does <header itemscope itemtype="http://schema.org/WPHeader"></header> if it finds it. The problem is that if you have templates that you are inserting in the page, it can't tell that it's html5.
What you can do is force html5 compilation by passing in {doctype: '5'} to the options -- did this for require-jade: https://github.com/ibash/require-jade/commit/754cba2dce7574b400f75a05172ec97465a8a5eb
I had the same problem using angular ng-include directive. It gets ng-include="ng-include" and then the include doesn'nt work.
What it works for me is to use an empty string as a value, i.e. ng-include="".
Here is answer from jade developers: you should use
doctype html
in the template.
https://github.com/pugjs/jade/issues/370
I just tried it in a Express.js/Jade project and the result i get is:
<header itemscope itemtype="http://schema.org/WPHeader"></header>
I also tried it in bash and then I get the same result as you.
I'd go with the following suggestion or create an issue on Github.
itemscope="itemscope" will work just as well as just itemscope. It looks like that's the default behavior of Jade. I'd just go with it.
I had the same problem, and the easiest solution in my case was adding doctype 5 at the top of my jade document. That apparently allows Jade to use attributes without a value.
ibash put me on the right track with his answer, so thanks for that
I've been doing some searching around and couldn't find this topic anywhere. My company wants to use an HTML doctype but wordpress outputs XHTML by default. I've seen plugins and I would use these but this site will probably outlive the development of said plugins. Plus it's something else to account for when updating or building new sites.
If I use an XHTML doctype how will HTML5 browsers render it? Will they be backwards-compatible with old doctypes?
Edit 1: It is actually recomended that in order to make the transition to HTML5 easier that you try to follow the XHTML structure when writing any HTML.
There will be additional options and types with XHTML in HTML5 but a lot of it is based on the structure in which you are writing your HTML. The X simply means that it is moving to more of an XML base.
To go along with Kayla's input, you will want to make sure that all tags are being closed:
<br/> Instead of: <br>
You will also want to make sure to put quotations around any parameters:
Instead of: <a href=value></a>
Browsers have been slowly adopting the XHTML structure. This might mean that HTML that is formatted without end tags/etc might look a little different in IE 6 than in newer brower versions. Hope that helps!
It is not recommended to use the XHTML 1.0 or 1.1 doctypes for your HTML5 pages, one because its unnecessary and two your markup won't validate when you use the newer tags. Here is a quick guide on using XML syntax in HTML5 a.k.a. XHTML5.
Update: As noted bellow checkout the W3C Specification.
I am not sure what you are asking. What do plugins have to do with DTD?
Yes, any browsers that supports HTML5 is backwards compatible with (X)HTML, you can mix and match all you want. And basically as long as you are writing tags like:
<div>Hi</div> or <p>There</p>
instead of
<DIV>Hi</DIV> or <P>There</P>
the rest is just semantics.
HTML5 began life specifically because browsers manufacturers wanted to make sure that changes they introduced were backward compatible with existing web pages, in contrast to the now defunct XHTML 2, which was shaping up to be non-backward compatible.
So yes, your XHTML doctype will work just fine in HTML5 browsers.
As far as I know all modern browsers that are adding HTML 5 support will continue to support HTML 4 and XHTML for the foreseeable future so you should be fine.
If you're using Wordpress though stick with XHTML. It'll be supported for a long time to come in all browsers and most Wordpress plugins are designed to output XHTML.