Skip to content

Instantly share code, notes, and snippets.

@ChristinaPolischuk

ChristinaPolischuk/pug.md

Forked from neretin-trike/pug.md
Created November 26, 2021 20:17
Download ZIP

Revisions

  1. @neretin-trike neretin-trike revised this gist Feb 20, 2018. 1 changed file with 12 additions and 0 deletions.
    12 changes: 12 additions & 0 deletions pug.md
    View file
    Original file line number Diff line number Diff line change
    @@ -15,6 +15,7 @@ Pug - это препроцессор HTML и шаблонизатор, кото
    1. [Наследование шаблонов](#Наследование-шаблонов)
    1. [Интерполяция переменных](#Интерполяция-переменных)
    1. [Миксины](#Миксины)
    1. [Многострочный ассоциативный массив](#Ассоциативный-массив)

    [Официальная документация по Pug](https://pugjs.org/language/attributes.html)

    @@ -478,4 +479,15 @@ mixin link(href, name)
    HTML
    ````html
    <a class="btn" href="/foo">foo</a>
    ````

    ### <a name="Ассоциативный-массив"></a> Многострочный ассоциативный массив
    Pug
    ````pug
    -
    var priceItem = [
    {include: filterInc, parameter : "Розовый фильтр"},
    {include: smileInc, parameter : "Смайлики"},
    {include: commentInc, parameter : "Комментарии"}
    ]
    ````
  2. @neretin-trike neretin-trike revised this gist Feb 16, 2018. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion pug.md
    View file
    Original file line number Diff line number Diff line change
    @@ -408,7 +408,8 @@ HTML
    ````html
    <h1>On Dogs: Man's Best Friend</h1>
    <p>Written with love by enlore</p>
    <p>This will be safe: <span>escape!</span></p>````
    <p>This will be safe: <span>escape!</span></p>
    ````
    ### <a name="Миксины"></a> Миксины
    Поддержка миксинов позволяет создавать переиспользуемые блоки.

  3. @neretin-trike neretin-trike revised this gist Feb 16, 2018. 1 changed file with 14 additions and 13 deletions.
    27 changes: 14 additions & 13 deletions pug.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,12 +1,20 @@
    # Препроцессор Pug(Jade)
    Pug - это препроцессор HTML и шаблонизатор, который был написан на JavaScript для Node.js.

    Содержание:
    1. [Вставка JavaScript кода](#tith)
    1.
    1.
    1.
    1.
    #### <a name='Содержание'></a>Содержание:
    1. [Теги](#Теги)
    1. [Текст](#Текст)
    1. [Атрибуты](#Атрибуты)
    1. [Констуркция Switch Case](#Констуркция-Switch-Case)
    1. [Циклы](#Циклы)
    1. [Вставка JavaScript кода](#Вставка-JavaScript-кода)
    1. [Комментарии](#Комментарии)
    1. [Условия](#Условия)
    1. [Тип документа](#Тип-документа)
    1. [Инклюды (Includes)](#Инклюды)
    1. [Наследование шаблонов](#Наследование-шаблонов)
    1. [Интерполяция переменных](#Интерполяция-переменных)
    1. [Миксины](#Миксины)

    [Официальная документация по Pug](https://pugjs.org/language/attributes.html)

    @@ -219,7 +227,6 @@ HTML
    ````html
    <p>This code is &lt;escaped&gt;!</p>
    ````

    ### <a name="Комментарии"></a> Комментарии
    Существуют различные комментариев: те, которые будут отображаться после компиляции, и те, которые пропадут.

    @@ -254,7 +261,6 @@ HTML
    Use as much text as you want.-->
    </body>
    ````

    ### <a name="Условия"></a> Условия
    Pug
    ````pug
    @@ -280,9 +286,7 @@ HTML
    <p class="description">foo bar baz</p>
    </div>
    ````

    ### <a name="Тип-документа"></a> Тип документа
    ***
    Pug
    ````pug
    doctype html
    @@ -291,7 +295,6 @@ HTML
    ````html
    <!DOCTYPE html>
    ````

    ### <a name="Инклюды"></a> Инклюды (Includes)
    Pug имеет возможность вставки содержимого одного файла в другой файл Pug.

    @@ -388,7 +391,6 @@ HTML
    </body>
    </html>
    ````

    ### <a name="Интерполяция-переменных"></a> Интерполяция переменных
    Pug предоставляет различные способы вывода переменных.

    @@ -407,7 +409,6 @@ HTML
    <h1>On Dogs: Man's Best Friend</h1>
    <p>Written with love by enlore</p>
    <p>This will be safe: <span>escape!</span></p>````

    ### <a name="Миксины"></a> Миксины
    Поддержка миксинов позволяет создавать переиспользуемые блоки.

  4. @neretin-trike neretin-trike revised this gist Feb 16, 2018. 1 changed file with 91 additions and 1 deletion.
    92 changes: 91 additions & 1 deletion pug.md
    View file
    Original file line number Diff line number Diff line change
    @@ -8,6 +8,8 @@ Pug - это препроцессор HTML и шаблонизатор, кото
    1.
    1.

    [Официальная документация по Pug](https://pugjs.org/language/attributes.html)

    ### <a name="Теги"></a> Теги
    В Pug нет закрывающих тегов, вместо этого он использует строгую табуляцию (или отступы) для определения вложености тегов.
    Для закрытия тегов в конце необходимо добавить символ `/`: `foo(bar='baz')/`
    @@ -345,7 +347,6 @@ HTML

    Pug поддерживает наследование шаблонов. Наследование шаблонов работает через ключевые слова `block` и `extend`. В шаблоне `block` - обычный блок Pug, который может заменить дочерний шаблон. Этот процесс является рекурсивным.

    ***
    Pug
    ````pug
    //- base.pug
    @@ -386,4 +387,93 @@ HTML
    </div>
    </body>
    </html>
    ````

    ### <a name="Интерполяция-переменных"></a> Интерполяция переменных
    Pug предоставляет различные способы вывода переменных.

    Pug
    ````pug
    - var title = "On Dogs: Man's Best Friend";
    - var author = "enlore";
    - var theGreat = "<span>escape!</span>";

    h1= title
    p Written with love by #{author}
    p This will be safe: !{theGreat}
    ````
    HTML
    ````html
    <h1>On Dogs: Man's Best Friend</h1>
    <p>Written with love by enlore</p>
    <p>This will be safe: <span>escape!</span></p>````

    ### <a name="Миксины"></a> Миксины
    Поддержка миксинов позволяет создавать переиспользуемые блоки.

    Pug
    ````pug
    //- Declaration
    mixin pet(name)
    li.pet= name
    //- use
    ul
    +pet('cat')
    +pet('dog')
    +pet('pig')
    ````
    HTML
    ````html
    <ul>
    <li class="pet">cat</li>
    <li class="pet">dog</li>
    <li class="pet">pig</li>
    </ul>
    ````
    ***
    Pug
    ````pug
    mixin article(title)
    .article
    .article-wrapper
    h1= title
    if block
    block
    else
    p No content provided

    +article('Hello world')

    +article('Hello world')
    p This is my
    p Amazing article
    ````
    HTML
    ````html
    <div class="article">
    <div class="article-wrapper">
    <h1>Hello world</h1>
    <p>No content provided</p>
    </div>
    </div>
    <div class="article">
    <div class="article-wrapper">
    <h1>Hello world</h1>
    <p>This is my</p>
    <p>Amazing article</p>
    </div>
    </div>
    ````
    ***
    Pug
    ````pug
    mixin link(href, name)
    //- attributes == {class: "btn"}
    a(class!=attributes.class href=href)= name

    +link('/foo', 'foo')(class="btn")
    ````
    HTML
    ````html
    <a class="btn" href="/foo">foo</a>
    ````
  5. @neretin-trike neretin-trike revised this gist Feb 16, 2018. 1 changed file with 52 additions and 11 deletions.
    63 changes: 52 additions & 11 deletions pug.md
    View file
    Original file line number Diff line number Diff line change
    @@ -8,7 +8,7 @@ Pug - это препроцессор HTML и шаблонизатор, кото
    1.
    1.

    ### Теги
    ### <a name="Теги"></a> Теги
    В Pug нет закрывающих тегов, вместо этого он использует строгую табуляцию (или отступы) для определения вложености тегов.
    Для закрытия тегов в конце необходимо добавить символ `/`: `foo(bar='baz')/`

    @@ -28,7 +28,7 @@ HTML
    </ul>
    ````

    ### Текст
    ### <a name="Текст"></a> Текст
    Непосредственно в Pug можно вставлять элементы в HTML синтаксисе

    Pug
    @@ -51,7 +51,7 @@ HTML
    <p>The pipe always goes at the beginning of its own line, not counting indentation.</p>
    ````

    ### Атрибуты
    ### <a name="Атрибуты"></a> Атрибуты
    В Pug можно встраивать JavaScript код, благодаря чему возможны конструкции показанные ниже.

    Pug
    @@ -124,7 +124,7 @@ HTML
    <a class="bang foo bar baz bing"></a>
    ````

    ### Констуркция Switch Case
    ### <a name="Констуркция-Switch-Case"></a> Констуркция Switch Case
    Pug поддерживает switch case, которая представляет собой более наглядный способ сравнить выражение сразу с несколькими вариантами.

    Pug
    @@ -143,8 +143,7 @@ HTML
    <p>you have 10 friends</p>
    ````

    ### Циклы

    ### <a name="Циклы"></a> Циклы
    Pug
    ````pug
    ul
    @@ -255,7 +254,6 @@ Use as much text as you want.-->
    ````

    ### <a name="Условия"></a> Условия
    ***
    Pug
    ````pug
    - var user = { description: 'foo bar baz' }
    @@ -295,7 +293,6 @@ HTML
    ### <a name="Инклюды"></a> Инклюды (Includes)
    Pug имеет возможность вставки содержимого одного файла в другой файл Pug.

    ***
    Pug
    ````pug
    //- index.pug
    @@ -310,12 +307,14 @@ html
    script
    include script.js
    ````
    CSS
    ````css
    /* style.css */
    h1 {
    color: red;
    }
    ````
    JavaScript
    ````js
    // script.js
    console.log('You are awesome');
    @@ -324,17 +323,14 @@ HTML
    ````html
    <!DOCTYPE html>
    <html>

    <head>
    <style>
    /* style.css */
    h1 {
    color: red;
    }
    </style>
    </head>

    <body>
    <h1>My Site</h1>
    <p>Welcome to my super lame site.</p>
    @@ -343,6 +339,51 @@ HTML
    console.log('You are awesome');
    </script>
    </body>
    </html>
    ````
    ### <a name="Наследование-шаблонов"></a> Наследование шаблонов

    Pug поддерживает наследование шаблонов. Наследование шаблонов работает через ключевые слова `block` и `extend`. В шаблоне `block` - обычный блок Pug, который может заменить дочерний шаблон. Этот процесс является рекурсивным.

    ***
    Pug
    ````pug
    //- base.pug
    html
    head
    title My Site
    block scripts
    script(src='/jquery.js')
    body
    block content
    block foot
    #footer
    p some footer content

    //- home.pug
    extends base.pug
    - var title = 'Animals'
    - var pets = ['cat', 'dog']
    block content
    h1= title // - or #{title} without =
    each petName in pets
    p= petName // -or #{petName} without =
    ````
    HTML
    ````html
    <!DOCTYPE html>
    <html>
    <head>
    <title>My site</title>
    <script src='/jquery.js'></script>
    </head>
    <body>
    <h1>Animals</h1>
    <p>cat</p>
    <p>dog</p>
    <div id='footer'>
    <p>some footer content</p>
    </div>
    </body>
    </html>
    ````
  6. @neretin-trike neretin-trike revised this gist Feb 16, 2018. 1 changed file with 93 additions and 0 deletions.
    93 changes: 93 additions & 0 deletions pug.md
    View file
    Original file line number Diff line number Diff line change
    @@ -252,4 +252,97 @@ HTML
    <!--Comments for your HTML readers.
    Use as much text as you want.-->
    </body>
    ````

    ### <a name="Условия"></a> Условия
    ***
    Pug
    ````pug
    - var user = { description: 'foo bar baz' }
    - var authorised = false
    #user
    if user.description
    h2.green Description
    p.description= user.description
    else if authorised
    h2.blue Description
    p.description.
    User has no description,
    why not add one...
    else
    h2.red Description
    p.description User has no description
    ````
    HTML
    ````html
    <div id="user">
    <h2 class="green">Description</h2>
    <p class="description">foo bar baz</p>
    </div>
    ````

    ### <a name="Тип-документа"></a> Тип документа
    ***
    Pug
    ````pug
    doctype html
    ````
    HTML
    ````html
    <!DOCTYPE html>
    ````

    ### <a name="Инклюды"></a> Инклюды (Includes)
    Pug имеет возможность вставки содержимого одного файла в другой файл Pug.

    ***
    Pug
    ````pug
    //- index.pug
    doctype html
    html
    head
    style
    include style.css
    body
    h1 My Site
    p Welcome to my super lame site.
    script
    include script.js
    ````
    ````css
    /* style.css */
    h1 {
    color: red;
    }
    ````
    ````js
    // script.js
    console.log('You are awesome');
    ````
    HTML
    ````html
    <!DOCTYPE html>
    <html>

    <head>
    <style>
    /* style.css */
    h1 {
    color: red;
    }
    </style>
    </head>

    <body>
    <h1>My Site</h1>
    <p>Welcome to my super lame site.</p>
    <script>
    // script.js
    console.log('You are awesome');
    </script>
    </body>

    </html>
    ````
  7. @neretin-trike neretin-trike revised this gist Feb 16, 2018. 1 changed file with 36 additions and 1 deletion.
    37 changes: 36 additions & 1 deletion pug.md
    View file
    Original file line number Diff line number Diff line change
    @@ -192,7 +192,7 @@ HTML
    <li>3</li>
    </ul>
    ````
    ### <a name="tith"></a> Вставка JavaScript кода
    ### <a name="Вставка-JavaScript-кода"></a> Вставка JavaScript кода
    Pug поддерживает вставку частей JavaScript кода в шаблоны.

    Не буфферизированный код начинается с символа `-`
    @@ -217,4 +217,39 @@ p
    HTML
    ````html
    <p>This code is &lt;escaped&gt;!</p>
    ````

    ### <a name="Комментарии"></a> Комментарии
    Существуют различные комментариев: те, которые будут отображаться после компиляции, и те, которые пропадут.

    Pug
    ````pug
    // just some paragraphs
    //- will not output within markup
    p foo
    p bar
    ````
    HTML
    ````html
    <!-- just some paragraphs-->
    <p>foo</p>
    <p>bar</p>
    ````
    ***
    Pug
    ````pug
    body
    //-
    Comments for your template writers.
    Use as much text as you want.
    //
    Comments for your HTML readers.
    Use as much text as you want.
    ````
    HTML
    ````html
    <body>
    <!--Comments for your HTML readers.
    Use as much text as you want.-->
    </body>
    ````
  8. @neretin-trike neretin-trike revised this gist Feb 16, 2018. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion pug.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@
    Pug - это препроцессор HTML и шаблонизатор, который был написан на JavaScript для Node.js.

    Содержание:
    1. [Вставка JavaScript кода](#Вставка-JavaScript-кода)
    1. [Вставка JavaScript кода](#tith)
    1.
    1.
    1.
  9. @neretin-trike neretin-trike revised this gist Feb 16, 2018. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion pug.md
    View file
    Original file line number Diff line number Diff line change
    @@ -192,7 +192,7 @@ HTML
    <li>3</li>
    </ul>
    ````
    ### Вставка JavaScript кода
    ### <a name="tith"></a> Вставка JavaScript кода
    Pug поддерживает вставку частей JavaScript кода в шаблоны.

    Не буфферизированный код начинается с символа `-`
  10. @neretin-trike neretin-trike revised this gist Feb 16, 2018. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions pug.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@
    Pug - это препроцессор HTML и шаблонизатор, который был написан на JavaScript для Node.js.

    Содержание:
    1. [Вставка Javascrtip кода](#Вставка-Javascrtip-кода)
    1. [Вставка JavaScript кода](#Вставка-JavaScript-кода)
    1.
    1.
    1.
    @@ -192,7 +192,7 @@ HTML
    <li>3</li>
    </ul>
    ````
    ### Вставка Javascrtip кода
    ### Вставка JavaScript кода
    Pug поддерживает вставку частей JavaScript кода в шаблоны.

    Не буфферизированный код начинается с символа `-`
  11. @neretin-trike neretin-trike revised this gist Feb 16, 2018. 1 changed file with 5 additions and 5 deletions.
    10 changes: 5 additions & 5 deletions pug.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,11 +2,11 @@
    Pug - это препроцессор HTML и шаблонизатор, который был написан на JavaScript для Node.js.

    Содержание:
    1.[Вставка Javascrtip кода](#Вставка-Javascrtip-кода)
    1.
    1.
    1.
    1.
    1. [Вставка Javascrtip кода](#Вставка-Javascrtip-кода)
    1.
    1.
    1.
    1.

    ### Теги
    В Pug нет закрывающих тегов, вместо этого он использует строгую табуляцию (или отступы) для определения вложености тегов.
  12. @neretin-trike neretin-trike revised this gist Feb 16, 2018. 1 changed file with 9 additions and 2 deletions.
    11 changes: 9 additions & 2 deletions pug.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,13 @@
    # Препроцессор Pug(Jade)
    Pug - это препроцессор HTML и шаблонизатор, который был написан на JavaScript для Node.js.

    Содержание:
    1.[Вставка Javascrtip кода](#Вставка-Javascrtip-кода)
    1.
    1.
    1.
    1.

    ### Теги
    В Pug нет закрывающих тегов, вместо этого он использует строгую табуляцию (или отступы) для определения вложености тегов.
    Для закрытия тегов в конце необходимо добавить символ `/`: `foo(bar='baz')/`
    @@ -188,7 +195,7 @@ HTML
    ### Вставка Javascrtip кода
    Pug поддерживает вставку частей JavaScript кода в шаблоны.

    Не буфферизированный код начинается с символа `-`
    Не буфферизированный код начинается с символа `-`
    Pug
    ````pug
    - for (var x = 0; x < 3; x++)
    @@ -201,7 +208,7 @@ HTML
    <li>item</li>
    ````
    ***
    Буфферизированный код начинается с символа `=`
    Буфферизированный код начинается с символа `=`
    Pug
    ````pug
    p
  13. @neretin-trike neretin-trike revised this gist Feb 16, 2018. 1 changed file with 26 additions and 0 deletions.
    26 changes: 26 additions & 0 deletions pug.md
    View file
    Original file line number Diff line number Diff line change
    @@ -184,4 +184,30 @@ HTML
    <li>2</li>
    <li>3</li>
    </ul>
    ````
    ### Вставка Javascrtip кода
    Pug поддерживает вставку частей JavaScript кода в шаблоны.

    Не буфферизированный код начинается с символа `-`
    Pug
    ````pug
    - for (var x = 0; x < 3; x++)
    li item
    ````
    HTML
    ````html
    <li>item</li>
    <li>item</li>
    <li>item</li>
    ````
    ***
    Буфферизированный код начинается с символа `=`
    Pug
    ````pug
    p
    = 'This code is <escaped>!'
    ````
    HTML
    ````html
    <p>This code is &lt;escaped&gt;!</p>
    ````
  14. @neretin-trike neretin-trike revised this gist Feb 16, 2018. 1 changed file with 69 additions and 1 deletion.
    70 changes: 69 additions & 1 deletion pug.md
    View file
    Original file line number Diff line number Diff line change
    @@ -47,7 +47,6 @@ HTML
    ### Атрибуты
    В Pug можно встраивать JavaScript код, благодаря чему возможны конструкции показанные ниже.

    ***
    Pug
    ````pug
    a(href='google.com') Google
    @@ -116,4 +115,73 @@ HTML
    ````html
    <a class="foo bar baz"></a>
    <a class="bang foo bar baz bing"></a>
    ````

    ### Констуркция Switch Case
    Pug поддерживает switch case, которая представляет собой более наглядный способ сравнить выражение сразу с несколькими вариантами.

    Pug
    ````pug
    - var friends = 10
    case friends
    when 0
    p you have no friends
    when 1
    p you have a friend
    default
    p you have #{friends} friends
    ````
    HTML
    ````html
    <p>you have 10 friends</p>
    ````

    ### Циклы

    Pug
    ````pug
    ul
    each val, index in ['zero', 'one', 'two']
    li= index + ': ' + val
    ````
    HTML
    ````html
    <ul>
    <li>0: zero</li>
    <li>1: one</li>
    <li>2: two</li>
    </ul>
    ````
    ***
    Pug
    ````pug
    - var values = [];
    ul
    each val in values
    li= val
    else
    li There are no values
    ````
    HTML
    ````html
    <ul>
    <li>There are no values</li>
    </ul>
    ````
    ***
    Pug
    ````pug
    - var n = 0;
    ul
    while n < 4
    li= n++
    ````
    HTML
    ````html
    <ul>
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    </ul>
    ````
  15. @neretin-trike neretin-trike revised this gist Feb 16, 2018. 1 changed file with 67 additions and 2 deletions.
    69 changes: 67 additions & 2 deletions pug.md
    View file
    Original file line number Diff line number Diff line change
    @@ -43,12 +43,77 @@ HTML
    ````html
    <p>The pipe always goes at the beginning of its own line, not counting indentation.</p>
    ````

    ### Атрибуты
    В Pug можно встраивать JavaScript код, благодаря чему возможны конструкции показанные ниже.

    ***
    Pug
    ````pug
    a(href='google.com') Google
    |
    |
    a(class='button' href='google.com') Google
    |
    |
    a(class='button', href='google.com') Google
    ````
    HTML
    ````html
    <a href="google.com">Google</a>
    <a class="button" href="google.com">Google</a>
    <a class="button" href="google.com">Google</a>
    ````


    ***
    Pug
    ````pug
    - var authenticated = true
    body(class=authenticated ? 'authed' : 'anon')
    ````
    HTML
    ````html
    <body class="authed"></body>
    ````
    ***
    Pug
    ````pug
    input(
    type='checkbox'
    name='agreement'
    checked
    )
    ````
    HTML
    ````html
    <input type="checkbox" name="agreement" checked="checked" />
    ````
    ***
    Pug
    ````pug
    - var url = 'pug-test.html';
    a(href='/' + url) Link
    |
    |
    - url = 'https://example.com/'
    a(href=url) Another link
    ````
    HTML
    ````html
    <a href="/pug-test.html">Link</a>
    <a href="https://example.com/">Another link</a>
    ````
    ***
    Pug
    ````pug
    - var classes = ['foo', 'bar', 'baz']
    a(class=classes)
    |
    |
    //- the class attribute may also be repeated to merge arrays
    a.bang(class=classes class=['bing'])
    ````
    HTML
    ````html
    <a class="foo bar baz"></a>
    <a class="bang foo bar baz bing"></a>
    ````
  16. @neretin-trike neretin-trike revised this gist Feb 16, 2018. 1 changed file with 11 additions and 1 deletion.
    12 changes: 11 additions & 1 deletion pug.md
    View file
    Original file line number Diff line number Diff line change
    @@ -21,7 +21,7 @@ HTML
    </ul>
    ````

    #### Текст
    ### Текст
    Непосредственно в Pug можно вставлять элементы в HTML синтаксисе

    Pug
    @@ -32,6 +32,7 @@ HTML
    ```html
    <p>This is plain old <em>text</em> content.</p>
    ````
    ***
    Pug
    ````pug
    p
    @@ -42,3 +43,12 @@ HTML
    ````html
    <p>The pipe always goes at the beginning of its own line, not counting indentation.</p>
    ````
    ***
    Pug
    ````pug
    ````
    HTML
    ````html
    ````


  17. @neretin-trike neretin-trike revised this gist Feb 16, 2018. 1 changed file with 20 additions and 5 deletions.
    25 changes: 20 additions & 5 deletions pug.md
    View file
    Original file line number Diff line number Diff line change
    @@ -6,14 +6,14 @@ Pug - это препроцессор HTML и шаблонизатор, кото
    Для закрытия тегов в конце необходимо добавить символ `/`: `foo(bar='baz')/`

    Pug
    ```pug
    ````pug
    ul
    li Item A
    li Item B
    li Item C
    ```
    Html
    ```html
    ````
    HTML
    ````html
    <ul>
    <li>Item A</li>
    <li>Item B</li>
    @@ -22,8 +22,23 @@ Html
    ````

    #### Текст
    Непосредственно в Pug можно вставлять элементы в HTML синтаксисе

    ```pug
    Pug
    ````pug
    p This is plain old <em>text</em> content.
    ````
    HTML
    ```html
    <p>This is plain old <em>text</em> content.</p>
    ````
    Pug
    ````pug
    p
    | The pipe always goes at the beginning of its own line,
    | not counting indentation.
    ````
    HTML
    ````html
    <p>The pipe always goes at the beginning of its own line, not counting indentation.</p>
    ````
  18. @neretin-trike neretin-trike revised this gist Feb 16, 2018. 1 changed file with 21 additions and 8 deletions.
    29 changes: 21 additions & 8 deletions pug.md
    View file
    Original file line number Diff line number Diff line change
    @@ -3,14 +3,27 @@ Pug - это препроцессор HTML и шаблонизатор, кото

    ### Теги
    В Pug нет закрывающих тегов, вместо этого он использует строгую табуляцию (или отступы) для определения вложености тегов.
    Для закрытия тегов в конце необходимо добавить символ `/`: `foo(bar='baz')/`

    Pug
    ```pug
    div
    p Hello!
    p World!
    ul
    li Item A
    li Item B
    li Item C
    ```
    Html
    ```html
    <ul>
    <li>Item A</li>
    <li>Item B</li>
    <li>Item C</li>
    </ul>
    ````

    #### Текст

    ```pug
    p This is plain old <em>text</em> content.
    ```html
    <div>
    <p>Hello!</p>
    <p>World!</p>
    </div>
    ````
    <p>This is plain old <em>text</em> content.</p>
  19. @neretin-trike neretin-trike revised this gist Feb 16, 2018. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion pug.md
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@ Pug - это препроцессор HTML и шаблонизатор, кото

    ### Теги
    В Pug нет закрывающих тегов, вместо этого он использует строгую табуляцию (или отступы) для определения вложености тегов.
    ```jade
    ```pug
    div
    p Hello!
    p World!
  20. @neretin-trike neretin-trike revised this gist Feb 16, 2018. 1 changed file with 15 additions and 1 deletion.
    16 changes: 15 additions & 1 deletion pug.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,2 +1,16 @@
    # Препроцессор Pug(Jade)
    это препроцессор HTML и шаблонизатор, который был написан на JavaScript для Node.js. Проще говоря
    Pug - это препроцессор HTML и шаблонизатор, который был написан на JavaScript для Node.js.

    ### Теги
    В Pug нет закрывающих тегов, вместо этого он использует строгую табуляцию (или отступы) для определения вложености тегов.
    ```jade
    div
    p Hello!
    p World!
    ```
    ```html
    <div>
    <p>Hello!</p>
    <p>World!</p>
    </div>
    ````
  21. @neretin-trike neretin-trike created this gist Feb 16, 2018.
    2 changes: 2 additions & 0 deletions pug.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,2 @@
    # Препроцессор Pug(Jade)
    это препроцессор HTML и шаблонизатор, который был написан на JavaScript для Node.js. Проще говоря