Jade

Very nice tool, like coffescript. You can convert all html files with:

npm install -g html2jade
html2jade *.html --bodyless --donotencode --noattrcomma --noemptypipe
# --bodyless          do not output enveloping html and body tags
# --donotencode       do not html encode characters (useful for templates)
# --noattrcomma       omit attribute separating commas
# --noemptypipe       omit lines with only pipe ('|') printable character
rm *.html

# version for all files in subdirectories
find . -name '*.html' -exec html2jade {} --bodyless --donotencode --noattrcomma --noemptypipe \;
find . -name '*.html' -exec  rm {} \;

Please check if format is good. At least this command will ignore <body> tag so you need to build that (index.html) separately. Usually index.html needs to be at specific location so I leave it in html format, and all other move to jade_build folder.

arguments could be in new line, but strings need **. comments are not allowed inside ()
```
// comment should be outside of (arguments)
md-button(ng-really-click='vm.delete()'
ng-really-message='Are you sure to \
remove this option?')
```
I prefer not to indent attributes even they suggest to indent them

Yaml yml

comments are single line and starts with # number sign
list (arrays) are denoted by a leading hyphen - for each member per line, or in single line with [a, b] square brackets separated with comma space (this short notation is called flow collections) ```
flow style

array: [ foo bar, baz ]

block style

array:
- foo bar
- baz
```
There is no need to add space before hyphens but I think it is better
```
  require ‘yaml’
YAML.load(%q{— 1:
- 1
- 2
- 3 })
  => {1=>[1, 2, 3]}
YAML.load(%q{— 1:
- 1
- 2
- 3 })
  => {1=>[1, 2, 3]}
  
```
associative arrays (hash) are written with colon space key: value (multiline) or in single line with {a: 1, b: 2}, so this two are the sam
```
# flow style
hash: { a: 1 }
# block style
hash:
  a: 1
```
Array of object (combination array and hash)
```
combination:
  - a: 1
    b: 2  # this is { a: 1. b: 2 }
  - [ a: 1, b: 3]
```
String does not need " " except you start with special symbol [] {} > | * & ! % # @ , (or you use flow collections with those symboles). : colon followed by a space is indicator for mapping. ` #a space followed by pound sign starts a comment, so you need to quote whole string if it contains that. You can use both signle and double quotes, but double quotes enables to use escapes like“an escaped ' single quote. \n”`
Multiline strings starts with pipe | (Literal block scalar) on the line with attribute. > Folded block scalar will generate single line string, except there are empty lines (ie double new line characters) which are converted to “\n”. Following lines should be indented.
```
kayak: |
  It is nice sport
  to play around

fold_some_newlines: >
    a
    b

    c
    d
      e
    f
same_as: "a b\nc d\n  e\nf\n"
```
Write dates in format yyyy-mm-dd so rails Date.parse() recognize it.
YML file can use anchor ie alias (&) and reference (*) so you do not repeat the code. When you use reference * (as for testing) you can not add or update keys, but with << you can (as for [production secrets] ( /2015/04/05/common-rails-bootstrap-snippets/))
```
default: &default
  key: 123

development:
  <<: *default
```
Merge key can be used to merge multiple maps, and you can override them also
```
- # Override
  << : [ *BIG, *LEFT, *SMALL ]
  x: 1
  label: center/big
```

In rails you can use $LABEL and $DEFAULTS and custom_name will be ignored https://github.com/rails/rails/blob/master/activerecord/lib/active_record/fixtures.rb#L422

# _fixture is in Rails 6.1
_fixture:
  ignore: custom
custom: &custom
  description: %LABEL description
DEFAULTS: &DEFAULTS
  name: $LABEL name
  <<: *custom
my:
  <<: *DEFAULTS

Haml

html tags are written with %, and attributes is hash {src: post.image} but for class you can use css notation .class and #id (and %div is not needed), and for content from ruby code use = immediatelly or idented in new line, like: %div.col-md-6= @user.name
if you need more nested content, use tabs
if ruby line spans multiple lines than use

= link_to "Add",
  url: posts_url

plain text is without % or =
excaping html &= "Me & you" will sanitize HTML sensitive characters Me & you, unescaping HTML != <br> will output <br> instead of <br>
if conditional classes is false, than it is ignored .item{class: @item.empty? && "empty"} can be <div class="item"> or <div class="item empty">
whitespace can be removed immediatelly within the tag < (or surrounding the tag >), for example
```
%blockquoute<
  %div
    Foo
```
is
```
<blockqoute><div>
  Foo
</blockquote></div>
```
HTML comments  is with /
ruby code which is not inserted - like - title = 'home'. Iteration and other blocks use indent
```
- case 2
- when 1
  = "1"
- when 2
  = "2?"
```
ruby comments -# this is a comment

filters like :javascript, :coffeescript, :scss

:javascript
  $(document).ready(function() {
    alert("hi");
  });

yml new sections is using three dashes ---

Json

Can not add comments, only you can is to add anoter fieeld

{
  "_comment": "This is a comment",
  "name": "My name"
}

Get Syntax Right In Jade Yaml Haml

Contents

Jade

Yaml yml

flow style

block style

=> {1=>[1, 2, 3]}

=> {1=>[1, 2, 3]}

Haml

Json