A website for converting (and testing) HTML 2 Jade
Home Page: http://html2jade.aaron-powell.com/
A site that will convert a HTML snippet to a Jade snippet. Useful for testing out how something would look in Jade vs HTML
I have the following design in mind. Would you like it implemented @aaronpowell ?
Plz update the new version
Hi, I took a line from Font Awesome and put in in the converter
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
The converter generates the following
i.fa.fa-camera-retro.fa-5x
| fa-5x
Converting it back with jade yields
<i class="fa fa-camera-retro fa-5x"> fa-5x</i>
where this time the fax-5x is within the <i>-tags.
Not a big deal, but maybe you are interested. Cheers
the html:
<div id="foo">
<h1>Hello world</h1>
<div id="bar">
<p>Blah blah blah</p>
</div>
</div>produces this jade:
#foo
h1 Hello world
#bar
p Blah blah blahNote that in the html, div#bar is not a child of the h1.
When running http://twitter.github.com/bootstrap/base-css.html through http://html2jade.aaron-powell.com/ the output isn't valid jade.
For example it takes the text mentions of "code" and turns those into code tags which breaks the page.
The latest version contains many fixes. I was trying to convert some html markup yesterday and noticed it appends a . if there is an empty class which does not render correctly. The latest html2jade version fixes this issue.
Just wanted to leave a note saying thanks for having this site up, I use it all the time instead of popping open terminal. 👍
Jade has been renamed to pug. The names within this tool should be also renamed. pugjs/pug#2184
Hey, thought I might give you a heads up as your page is down. Probably a Heroku issue though.
Great work!
Sacha
Great product. The rendering for Doctype is deprecated.
!!! 5 creates error
Provided
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="/site.css" />
<title>test</title>
</head>
<body>
<h1>A Big Ol Test</h1>
</body>
</html>
and got back
doctype html
html
head
link(type='text/css', rel='stylesheet', href='/site.css')
|
title test
body
h1 Hello world!
Post:
curl -X POST --data "<div></div>" "http://html2jade.aaron-powell.com/convert"
Error:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
html, body, iframe { margin: 0; padding: 0; height: 100%; }
iframe { display: block; width: 100%; border: none; }
</style>
<title>Application Error</title>
</head>
<body>
<iframe src="//s3.amazonaws.com/heroku_pages/error.html">
<p>Application Error</p>
</iframe>
</body>
</html>
some latin and latin extended characters not displaying after convert :/
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.