diff --git a/jade.md b/jade.md index 796fbda8f..54cee2dba 100644 --- a/jade.md +++ b/jade.md @@ -1,84 +1,5 @@ --- title: Jade category: JavaScript libraries +redirect_to: /pug --- - -``` -doctype html -// comment (html) --// silent comment - -html(lang='en') - - javascript() - h1.class#id(name='hi') - | Text. Hello there, - = name - - if condition - p. hello - - p. - multiline text - goes here -``` - -### Iteration - -```jade -ul - each user in users - li= user -``` - -### Layouts - -```jade -extends layout.jade - -block title - | hello - -block content - | hello -``` - -```jade --// layout.jade -title - block title -body - block content -``` - -### Includes (partials) - -```jade -include ./includes/head.jade -include:markdown article.md -``` - -### Mixins - -```jade -mixin list - ul .. - -+list -``` - -```jade -mixin pet(name) - span.pet= name - -+pet('cat') -``` - -```jade -mixin article(title) - article - h2.title= title - block - -+article('hello there') - p Content goes here -``` diff --git a/pug.md b/pug.md new file mode 100644 index 000000000..43b232ee3 --- /dev/null +++ b/pug.md @@ -0,0 +1,132 @@ +--- +title: Pug +category: JavaScript libraries +layout: 2017/sheet +prism_languages: [jade] +updated: 2017-08-30 +weight: -3 +--- + +## Pug +{: .-three-column} + +### Basic document + +```jade +doctype html +html(lang='en') + - javascript() + h1.class#id(name='hi') + | Text. Hello there, + = name + + if showControls + button.red Edit this page +``` + +### Comments + +```jade +// This comment will appear in the HTML +``` + +```jade +-// This is a silent comment +``` + +### Iteration + +```jade +ul + each user in users + li= user +``` + +### Layouts + +```jade +-// page.pug +extends layout.pug + +block title + | hello + +block content + | hello +``` + +```jade +-// layout.pug +title + block title +body + block content +``` + +### Includes (partials) + +```jade +include ./includes/head.pug +``` + +```jade +include:markdown article.md +``` + +### Multiline text + +```jade +p. + This is text that doesn't need to + be prefixed by pipes. +``` +{: data-line="1"} + +```jade +script. + // It's great for raw + // JavaScript and stuff + alert('hello') +``` +{: data-line="1"} + +## Mixins +{: .-three-column} + +### Mixins + +```jade +mixin list + ul + ยทยทยท +``` + +```jade ++list +``` + +### Mixin with arguments + +```jade +mixin pet(name) + span.pet= name +``` + +```jade ++pet('cat') +``` + +### Mixin with content + +```jade +mixin article(title) + article + h2.title= title + block +``` +{: data-line="4"} + +```jade ++article('hello there') + p Content goes here +```