A faster way to use Emmet with HAML - html

I've just started using HAML in Sublime with Emmet installed. My only gripe is to autocomplete my tags I would have to do something like this for it to convert: p|haml when alternatively I could type %p, thus defeating the purpose of speed. While some may not see this as an issue I'd much rather follow the same convention of Emmet's standard html functionality where all I'd have to do is type the letter of the HTML tag and hit tab vs. shift + % + tag. Codepen accomplishes this exactly where all I have to do is enable HAML and it takes care of the rest. Is there an existing method or snippet that I can use that mirrors this functionality?

At CodePen we didn't custom code anything to make it work, we use CodeMirror and Emmet for CodeMirror
https://github.com/emmetio/codemirror
Maybe you can dig through there and find what makes it work =)

Found out that in order to use the snippet mentioned in my question that you must explicitly be in a .haml file.

Emmet applies haml filter for HAML syntax, but it may fail to do so in some editors. For example, when you forget to set current document syntax to HAML or (according to your sublimetext tag) you’re using some custom HALM syntax that Emmet can’t recognize.

Related

Can I stop ReSharper objecting to Ionic HTML tags?

I've just opened my first Ionic based mobile project, and the HTML templates are really full of Ionic tags, like <ion-modal-view>, which courtesy, ReSharper (I deeply suspect), has a wavy blue underline, as do half the other tags in the template. I deplore working with these lines on the screen, as they indicate there is something wrong (OK, maybe for the W3C it is wrong), when there is nothing wrong. Can, and how, I get rid of these damned blue lines?
Well I'm a big believer in writing valid html. Standards are there for a reason, and we can't complain about Microsoft not following them with IE if we don't follow them ourselves.
I did some searching and couldn't find any information on whether Ionic could be written as valid html.
So personally were I in your position I'd either consider whether writing an XHTML DTD that supported Ionic's mark-up was an option, or chose a framework that I could write valid mark-up in.
Since I'm guessing neither of those is an option you could go to:
Resharper -> Options -> Code Inspection -> Settings
Look for the section under the heading Elements to skip -
Either find File masks and add *.html (or whatever other file extension you might be using) or find Files and folders and mark the specific files/folders that you don't want Resharper to look at.
I want to suggest a better alternative.
Instead of skipping inspections of all *.html files it should be possible to just ignore the inspection for Unknown Tags:

How extract meaningful text from HTML

I would like to parse a html page and extract the meaningful text from it. Anyone knows some good algorithms to do this?
I develop my applications on Rails, but I think ruby is a bit slow in this, so I think if exists some good library in c for this it would be appropriate.
Thanks!!
PD: Please do not recommend anything with java
UPDATE:
I found this link text
Sadly, is in python
Use Nokogiri, which is fast and written in C, for Ruby.
(Using regexp to parse recursive expressions like HTML is notoriously difficult and error prone and I would not go down that path. I only mention this in the answer as this issue seems to crop up again and again.)
With a real parser like for instance Nokogiri mentioned above, you also get the added benefit that the structure and logic of the HTML document is preserved, and sometimes you really need those clues.
Solutions integrating with Ruby
use Nokogiri as recommended by Amigable Clark kant
Use Hpricot
External Solutions
If your HTML is well-formed, you could use the Expat XML Parser for this.
For something more targeted toward HTML-only, the W3C actually released the code for the LibWWW, which contains a simple HTML parser (documentation).
Lynx is able to do this. This is open source if you want to take a look at it.
You should strip all angle-bracketed part from text and then collapse white-spaces.
In theory the < and > should not be there in other cases. Pages contain < and > everywhere instead of them.
Collapsing whitespaces: Convert all TAB, newline, etc to spaces, then replace every sequence of spaces to a single space.
UPDATE: And you should start after finding the <body> tag.

Tag <code>: how to "correct" publish it?

i'm not sure to explain what i'm looking for.
What's the name of the "source code parser" for publish code, in HTML ?
For example, when i write some source code here in stack overflow, system auto-detect the sintax and write "correct" source code in html.
I've noticed that exists the HTML <"code"> tag, but it simply write source code in "courier" font.
So i'm asking you if exists some "external" component that, given a text, parse it out correctly in a HTML page.
Thank you!
SO uses prettify to syntax highlight the <code> snippets.
Source: Which tools and technologies were used to build the Trilogy?
It is a JavaScript tool that scans a page for code snippets, and colours them on the fly. The downside of this solution is that it doesn't work with JavaScript turned off. Seeing as syntax colouring is not really an essential task, it is arguably a small downside.
The system is called Markdown and here is an explanation of the code blocks it uses.
For the syntax highlighting that you mentioned, a different system is used called prettify.
There are two components to this:
The CSS/HTML structure for syntax highlighting (e.g. styles for printing keywords, #s, strings, comments etc... in certain colors). This can be generic or per-language.
The code parser (grammar parser), which breaks the code up into tokens and labels the tokens with the appropriate classes. This can be implemented on either back-end via whatever language your back-end is in; or on front-end via JavaScript (the example of the latter is Google's Code Pretty which is used by StackOverflow).
It can be coupled with some heuristic logic to decide what language the code belongs to (and thus which grammar/parser to use).

How do you find mismatched tags in HTML?

I've inherited some rather large static HTML files that need to be fixed up to work in webkit-based browsers, Safari in particular. One of the common bugs I've found that cause rendering differences is missing </div> tags. (Both IE7+ and FF3+ seem to ignore these, or make good guesses as to where to close the DIVs, and render as expected.) I'm used to using vim with HTML syntax highlighting for editing, but end up writing awk scripts to match starting and ending tags.
What is your favorite tool or technique for matching start and end tags in a large HTML file?
UPDATE: I'm currently in a shop that targets HTML 4.01 Strict, not XHTML.
The W3C HTML Validator works fairly well, or if you want something a little simpler then the Tidy FireFox plugin also works.
The w3c Validator can be (extremely) verbose, but it does check for missing closing tags.
HTML Tidy is a great command line tool. I often use it with WGet
Most IDE's usually let you know via highlighting, fuzzy-underline or a warning.
Div Checker is a great tool that focuses on div tags specifically.
While other tools were only able to tell me that "some tag was missing somewhere".
Div-Checker removes other tags, code, and most comments, to create a clean visual structure of just the divs themselves.
From this div map, it's fairly easy to see if nested divs are correctly paired !
I was able to locate a missing div left out by a wordpress theme developer, with the help of this tool.
Here is the Posted Answer from #noah-whitmore that enlightened me to this awesome tool.
There are a couple other useful tools mentioned in that thread as well, such as unclosed-tag-finder (visually not so easy to read, but helpful if your missing tag is not a div).
vim/gvim & NetBeans both do a great job of tag matching
What is your favorite tool or technique for matching start and end tags in a large HTML file?
A text editor with a built-in XML well-formedness checker, combined with using XHTML for everything.
Sublime Text with the Tag plugin has a Tag Lint feature which which aims to check correctness of opened and closed tags.

Can I reformat HTML in Visual Studio without removing blank lines?

The HTML formatting in Visual Studio works great -- especially considering you can pick a selection and just format that. You can just select a tag or block, right click and do 'Format Selection'. You can also reformat the whole document.
However I like to use a lot of whitespace in my documents to keep things organized and the reformat HTML compresses (deletes!) this whitespace.
Are there any plugins, or external tools for formatting HTML that might make it possible to leave vertical space untouched?
Edit: Bonus points: If anybody has 2010 installed can they check if it already has this feature? If it DOESN'T have this feature I'd like to submit a feature request. Fortunately the new editor is much more extensible, but I don't know if that extends to customization of something like this.
Visual Studio 2012 preserves empty line breaks when formatting HTML. I ran across this SO post because I was looking for an option to remove empty lines!
If the whitespace in your documents has some systematic logic to it,(such as, a Line break before and after each Table Tag) then you might be able to get the kind of behaviour you want when applying formatting.
Check out the options dialog from :
Tools -> Options -> Text Editor -> HTML -> Format -> "Tag specific Options"
This pretty much allows you customize the formatting of each type of tag to a reasonably minute level. In your particular case, the "Line breaks" option might be useful or atleast relevant.
You might also like to try out a custom HTML formatter such as HTML Tidy. Many powerful editors like Notepad++ and UltraEdit have a built-in HTML Tidy module for formatting. Personally, though, I find the formatting capabilities of Visual Studio sufficient for most requirements.
The short answer is no, 2008 will always reformat it the way it has in its settings. You will have to configure the settings in Tag Specific Options to match how you like your HTML to display.
It can do up to two spaces before and after a tag, but unfortunately there's no way to maintain whitespace or formatting for comments (it only recognises start + end tags that are the same)
If you have problems with it matching your coding style, my question about this might help out