I was just trying to make some snippets but I can't get any of them to work. Can anyone see what's wrong with this? I read their docs and thumbed some examples off the web but they don't work either. I've got it in my /sublime text 3/packages/user folder and it's named using convention myTest.sublime.snippet.
The snippet is:
<snippet>
<content>
<![CDATA[
<!DOCTYPE html lang="en">
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>${1:test1|test2|test3} | $2</title>
<meta name="viewport" content="width=device-width">
<meta name="Description" lang="en" content="Description">
<meta name="robots" content="index, follow">
<meta name="robots" content="noodp, noydir">
<!-- Twitter Bootstrap -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
$3
</div>
</body>
</html>
]]>
</content>
<tabTrigger>page</tabTrigger>
<scope>source.html</scope>
<description>HTML5 Base HTML</description>
</snippet>
You should use text.html instead of source.html in scope block.
Sublime 3 needs snippets to have .sublime-snippet endings in file name.
Step1. For html snippet, please change
<scope>source.html</scope>
to
<scope>text.html</scope>
Step2. If you want sublime to show tooltips after you input the keywords, add this line
"auto_complete_selector": true
to your Preferences - Settings User file
You should escape dollar signs in your snippet. $ -> \$.
I had the same problem and what I did was :
Just remove <scope>source.html</scope> line present at the bottom of the snippet.
This is clearly an old thread, but it came up when I was searching on creating sublime snippets. The initial issue might be that you are typing in "page" as your tab trigger without first setting your syntax to html. You can do this quickly with shift + command/control + p then type sshtml then enter. Try your tab trigger again. Worked for me. Cheers.
Remove:
<description>HTML5 Base HTML</description>
Yes, this line comes from the official documentation, but at least in my instance (Sublime 3, Build 3114), it breaks the snippet. When I remove that line, the snippet works.
Also, as Jinglong above answered, add the following to your user preferences:
"auto_complete_selector": true
solved by..
removing <scope>source.html</scope>
adding "auto_complete_selector": true, to user settings
Background
My js/ snippets worked fine with <scope>source.html</scope> but for whatever reason, that line caused issues in my html/ snippets not.
I found the solution to my problem! I have been using the unicode setting for my keyboard for another project. When I changed my keyboard back to US, my problem was resolved. I'm sure this is an unusual issue, but in case anyone else is having this problem:
changing the keyboard back to US also reactivated some of the code navigation shortcuts (e.g., jumping word-to-word on a line by holding down option + arrow keys)
Related
How can I convert following IE conditional statements in JADE language :
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
I have tried following but it is not working:
//if IE 8
html lang="en" class="ie8"
//if IE 9
html lang="en" class="ie9"
//if !IE
html lang="en"
// <![endif]
It is showing following output :
<!--if IE 8html lang="en" class="ie8"
-->
<!--if IE 9html lang="en" class="ie9"
-->
<!--if !IEhtml lang="en"
-->
<!-- <![endif]-->
Can some one guide me how it can be rectified.
Support for the //if IE 8 conditional comment syntax was removed few months ago: Git Commit
Version 0.35 was the last version to support them; v1.0 is the first release after the removal.
I've been using the literal style #Jayram uses; only differences being conditional logic à la h5bp and the closing html tag:
| <!--[if IE 8]> <html lang="en" class="lt-ie9"> <![endif]-->
| <!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
Note: Remember to close the document with | </html> since the initial html tag is not Jade's self-closing syntax.
This code should work as expected. It works with Jade version up to 0.35.0.
Please note that the last html element needs to be proper Jade element (that's why attributes are inside parentheses (...)). The first two elements are parts of comments and therefore should be formated as formatted HTML elements.
//if IE 8
<html lang="en" class="ie8">
//if IE 9
<html lang="en" class="ie9">
//[if !IE]><!
html(lang="en")
//<![endif]
Output in a page is as follows:
<!--[if IE 8]><html lang="en" class="ie8"><![endif]-->
<!--[if IE 9]><html lang="en" class="ie9"><![endif]-->
<!--[if !IE]><!--><html lang="en"><!--<![endif]-->
EDIT
As of version 1.0.0 (released on 22 December 2013) Jade does not parse comments content any more and dropped support for IE conditional comments.
The new approach is to use well formatted IE conditional comments. It is safe to do so as now Jade ignores any line beginning with <.
Your code can be as follows:
<!--[if IE 8]><html class="ie8" lang="en"><![endif]-->
<!--[if IE 9]><html lang="en" class="ie9"><![endif]-->
<!--[if !IE]><!-->
html(lang="en")
<!--<![endif]-->
Note that html element will be handled by Jade (with all its features e.g. set class name from a request handling method) so you should NOT append | </html> at the end of your Jade file.
You can also refer to IE Conditional Comments in Jade Template Engine post for alternative of using Jade mixing with IE conditional comments.
I hope that will help.
Use it like this. This works for me.
| <!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
| <!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
| <!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
Let me preface with two things. I am currently using grunt for these tasks and I also know about Yeoman which has what I am asking for. I do really like Yeoman however it is just a little too opinionated for this particular project I am working on.
So I have the following HTML file:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- START-CSS-MIN:css/build/min.css -->
<link rel="stylesheet" href="css/bootstrap/bootstrap-2.1.1.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/boilerplate.css">
<!-- END-CSS-MIN -->
<!-- START-JS-MIN:js/build/modernizr.js -->
<script src="js/libraries/modernizr.js"></script>
<!-- END-JS-MIN -->
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. Upgrade your browser today or install Google Chrome Frame to better experience this site.</p>
<![endif]-->
<p>Hello world! This is a basline HTML5 template (based on HTML5 Boilerplate).</p>
<!-- START-JS-MIN:js/build/libraries.js -->
<script src="js/libraries/underscore.js"></script>
<script src="js/libraries/jquery/jquery.js"></script>
<!-- END-JS-MIN -->
</body>
</html>
Now you can see the CSS-MIN and JS-MIN comments. Right now I already have a custom grunt build task that properly collects all those files in the comments (using htmlparser) and then minifies and concats them as directly based on the comments. The last step in the build process is to create a new version of that HTML file (for production use) that replaces the comments with the new file. For example, the code above would be turned into this:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/build/min.css">
<script src="js/build/modernizr.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. Upgrade your browser today or install Google Chrome Frame to better experience this site.</p>
<![endif]-->
<p>Hello world! This is a basline HTML5 template (based on HTML5 Boilerplate).</p>
<script src="js/build/libraries.js"></script>
</body>
</html>
The question I have is how would I be able to do this in NodeJS? The htmlparser NPM module is great for parsing HTML however I now need something where I am modifying the HTML (removing and adding certain elements in specific locations). Is there any good packages/tutorials on how to do this in NodeJS code?
I'm not quite sure if this is helpful for comment lines, but that should be less of an issue to solve than DOM reference.
Consider using: https://github.com/tmpvar/jsdom
There are other options out there as well. (https://github.com/joyent/node/wiki/modules)
You can use cheerio
The following code will produce exactly the output you provided (apart from some minor whitespace differrences)
const $ = require('cheerio').load(inputHtml);
// Returns a filter function that selects the comments with the provided indexes
const commentRemovalFilter = (commentIndexes)=>{
let commentIndex=-1;
return (index, node)=>{
const isComment = node.type === 'comment';
if(isComment)commentIndex++;
return isComment && commentIndexes.includes(commentIndex);
}
}
$('head').contents().filter(commentRemovalFilter([0,1,2,3])).remove();
$('head link').remove();
$('head script').remove();
//Cheerio respects whitespace provided here
$('head').append(`
<link rel="stylesheet" href="css/build/min.css">
<script src="js/build/modernizr.js"></script>
`)
$('body').contents().filter(commentRemovalFilter([1,2])).remove();
$('body script').remove();
$('body').append(` <script src="js/build/libraries.js"></script>
`)
console.log($.html())
output:
<html><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/build/min.css">
<script src="js/build/modernizr.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. Upgrade your browser today or install Google Chrome Frame to better experience this site.</p>
<![endif]-->
<p>Hello world! This is a basline HTML5 template (based on HTML5 Boilerplate).</p>
<script src="js/build/libraries.js"></script>
</body></html>
I'm wondering how if I can check the head of a HTML-document for existence of a particular string with cucumber.
Actually I'm interested in specific robots directives, so I launch in the first of my steps a browser (atm Firefox) and open a local site.
In the second step I check the entire html-code for a string:
#b.html.include?('<meta name="robots" content="noindex, follow">').should == true
And see my scenario failing at the second step. (expected true, got false)
Surprisingly a check for an partial string is succesfull:
#b.html.include?('name="robots"').should == true
But as soon as I check for
#b.html.include?('<meta name="robots"').should == true
or just
#b.html.include?('a name="robots"').should == true
I get a false again.
So, I thought the presence of whitespaces causes this behavior.
A quick check with only a bonus whitespace
#b.html.include?(' name="robots"').should == true
and the testscenario is green.
A search for a whole sentence in the document body
#b.html.include?('<h1>Yarr, that "is" supeb!</h1>').should == true
is also passing.
I've also tried to move the h1 heading into the head of the document (test still passing) and the meta-tag into the body (test is still failing)
I'm using cucumber 1.2.0 and ruby 1.9.3p0 with Firefox driven via watir-webdriver and wondering if I'm doing something wrong.
Actually I have just one feature with this simple steps and a minimal html-site with meta-data and this one "Yarr" sentence. No rails, no rake. OS X 10.7
Please tell me if I should provide more information… I'm tinkering with this stuff for hours.
Edit1: added the HTML of the site I check.
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="utf-8">
<link rel="stylesheet" media="screen" href="/public/stylesheets/main.css">
<link rel="shortcut icon" type="image/png" href="/public/images/favicon.png">
<script src="/public/javascripts/jquery-1.6.4.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="canonical" href="google.de">
<meta name="robots" content="noindex, follow">
</head>
<body>
<h1>Yarr, that "ist" superb!</h1>
</body>
</html>
The Problem:
It seems that the properties of HTML tags will not always be in the order that they were written. See this:
puts #b.html
#=> <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Home</title>
<meta charset="utf-8" />
<link href="/public/stylesheets/main.css" media="screen" rel="stylesheet" />
<link href="/public/images/favicon.png" type="image/png" rel="shortcut icon" />
<script charset="utf-8" type="text/javascript" src="/public/javascripts/jquery-1.6.4.min.js"></script>
<link href="google.de" rel="canonical" />
<meta content="noindex, follow" name="robots" />
</head>
<body>
<h1>Yarr, that "ist" superb!</h1>
</body></html>
Notice that the <meta content="noindex, follow" name="robots" /> is not the same order as your HTML file. This explains why your tests are giving the results they are.
Suggest Solution:
Assuming that you only care that the particular meta tag appears in the header (and not the particular order the tag is written), I would suggest using:
b.head.meta(:name => 'robots', :content => 'noindex, follow').exists?.should == true
I use Dreamweaver to develop Web sites. I use the templates feature extensively as it helps to make things easier maintaining conformance.
However, I notice that Dreamweaver adds the following code before the doctype:
<!-- InstanceBegin template="/templates/web-public-user-home.dwt" codeOutsideHTMLIsLocked="false" -->
This is throwing my IE into Quirks mode for obvious reasons (i.e. comment before the doctype). Is there a way of dealing with this?! Below is my doctype.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Regards,
Ok, I figured this out.
Because of the extensive IE-compliance tweaking I'm doing, I was using conditional comments. However, I was using them on the html tag. There's nothing wrong with this in principle but Dreamweaver won't handle your live template updates properly when you do this (It will place the Dreamweaver-specific template lock code first before the doctype, thereby ensuring that your pages will throw Quirks mode in IE).
So what I did was move my conditional comment system away from the html tag, instead using them immediately after your opening body tag and immediately before your closing body tag like so:
<body>
<!--[if IE 6 ]> <div id="ie" class="ie6"> <![endif]-->
<!--[if IE 7 ]> <div id="ie" class="ie7"> <![endif]-->
<!--[if IE 8 ]> <div id="ie" class="ie8"> <![endif]-->
<!--[if gt IE 8 ]> <div id="ie"> <![endif]-->
<!--[if !IE]><div id="not-ie"> <![endif]-->
{YOUR HTML CODE}
</div>
</body>
This way, Dreamweaver places the doctype and html tag before the template lock code, and your resulting pages will appear in standards mode on IE (all things being normal).
Cheers.
Dreamweaver (incl. CS6) places the <!-- InstanceBegin template="... comment in front of the doctype tag only if it is unable to locate the opening <html> tag in your template! This happens when you forgot that tag altogether, but also when that tag is placed within conditional comments like this:
<!--[if IE 8]> <html class="ie8"> <![endif]-->
To avoid this you have to refrain from enclosing the <html> tag within conditional comments. When you use a normal undisguised <html> tag in your template code, Dreamweaver will automatically place the <!-- InstanceBegin template="... after that <html> tag in all files derived from that template and IE will not fall into quirks mode.
I am searching for an IE6 code which will redirect users from our brand new web page to an older version.
for example something along these lines
<!--[if lte IE6]>
<a href="http://etterengineering.com">
<![endif]-->
Thank you!
<!--[if lte IE 6]>
<meta http-equiv="refresh" content="0;url=http://example.com/" />
<![endif]-->
Put this in the head of your page and change the URl to the correct one. This will work even if the user has disabled JS.
Note that meta refresh is discouraged due to some associated drawbacks, but for your purposes should be good enough.
The alternative is to return HTTP 302 for IE6 user agent.
Try this:
<!--[if lte IE6]>
<script type="text/javascript">
window.location.href = "http://etterengineering.com";
</script>
<![endif]-->