Coder Social home page Coder Social logo

trasherdk / html2jade Goto Github PK

View Code? Open in Web Editor NEW

This project forked from donpark/html2jade

0.0 2.0 0.0 188 KB

Converts HTML to Jade template. Not perfect but useful enough for non-daily conversions.

License: MIT License

Makefile 0.12% JavaScript 2.87% CoffeeScript 12.31% HTML 84.71%

html2jade's Introduction

html2jade

Build Status

html2jade converts HTML into Jade format.

This module is now maintained by @aichholzer

Status

Mostly usable but sometimes requires fixing up, usually involving conditionals and scripts indentation.

While converting a fairly complicated theme package with ~20 HTML files, I had to hand-edit just twice.

Compatible with Node.js 4.0+ (verified with v4.2.4) but likely NOT with Node.js 0.11.x, 0.12.x, and io.js.

Requirements

html2jade version prior to 0.7 support OS X and Linux only.

html2jade version 0.7+ should support OS X, Windows, and Linux.

Install

npm install -g html2jade

Command-line Usage

Outputs to stdout if input is URL

html2jade http://twitter.com

html2jade http://twitter.com > twitter.jade

Outputs to file if input is file

html2jade mywebpage.html # outputs mywebpage.jade
html2jade public/*.html  # converts all .html files to .jade

Convert HTML from stdin

cat mywebpage.html | html2jade -

To generate Scalate compatible output:

html2jade --scalate http://twitter.com
html2jade --scalate http://twitter.com > twitter.jade
html2jade --scalate mywebpage.html
html2jade --scalate public/*.html

Command-line Options

  • -d, --double - use double quotes for attributes
  • -o, --outdir <dir> - path to output generated jade file(s) to
  • -n, --nspaces <n> - the number of spaces to indent generated files with. Default is 2 spaces
  • -t, --tabs - use tabs instead of spaces
  • --donotencode - do not html encode characters. This is useful for template files which may contain expressions like {{username}}
  • --bodyless - do not output enveloping html and body tags
  • --numeric - use numeric character entities
  • -s, --scalate - generate Scalate variant of jade syntax
  • --noattrcomma - omit attribute separating commas
  • --noemptypipe - omit lines with only pipe ('|') printable character

Programmatic Usage (>= 0.0.7)

To convert raw HTML into Jade:

var html2jade = require('html2jade');
var html = "<html><body>Hello World</body></html>";
html2jade.convertHtml(html, {}, function (err, jade) {
  // do your thing
});

To convert DOM document into Jade (client-side):

// assumes html2jade.js file has been loaded
Html2Jade.convertDocument(document, {}, function (err, jade) {
  // do your thing
});

Converting Mustache/Handlebars Templates

Jade is commonly used to generate HTML with embedded Mustache or Handlebars templates.

Be sure to use version 0.8+ if you use template expressions in element IDs or CSS class names to avoid generating invalid Jade files.

Tools using html2jade

Web version

There is a web version of html2jade, kindly provided by @aaronpowell.

Pascal Garber's jade2html2jade does roundtrip from jade to HTML and back. Online demo.

Linux tray app

Miniclip is a Linux tray app that quickly converts HTML to Jade, CSS to Stylus and JS to Coffee from clipboard.

Testing

As of version 0.4, there is a simple unit test that converts HTML files in test/data directory and compare them against Jade files in the same directory. Unit test harness requires coffee-script and mocha to be installed globally. Run the tests with command npm test.

Useful forks

If you're having issues with br line-breaks which apparently Jade has some problems with, try @smaudet's fix-breaklines branch.

html2jade's People

Contributors

donpark avatar borisjoffe avatar z0d14c avatar mef51 avatar taku0 avatar forbeslindesay avatar jumplink avatar robbieclarken avatar sandro-pasquali avatar skyatura avatar dsc avatar pjeby avatar grawl avatar aichholzer avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.