"Pug"의 두 판 사이의 차이

2020년 11월 2일 (월) 02:53 기준 최신판

다른 뜻에 대해서는 퍼그 문서를 참조하십시오.

1 개요[ | ]

Pug, (구) Jade
퍼그

자바스크립트 템플릿엔진
Jade에서 개명됨

2 사용예시[ | ]

코드

doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) bar(1 + 5)
  body
    h1 Pug - node template engine
    #container.col
      if youAreUsingPug
        p You are amazing
      else
        p Get on it!
      p.
        Pug is a terse and simple templating language with a
        strong focus on performance and powerful features.

결과

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pug</title>
    <script type="text/javascript">
      if (foo) bar(1 + 5)
    </script>
  </head>
  <body>
    <h1>Pug - node template engine</h1>
    <div id="container" class="col">
      <p>You are amazing</p>
      <p>Pug is a terse and simple templating language with a strong focus on performance and powerful features.</p>
    </div>
  </body>
</html>

3 같이보기[ | ]

4 참고[ | ]

@@ 1번째 줄: / 1번째 줄: @@
 {{다른뜻|퍼그}}
 ==개요==
-;Pug
+;Pug, (구) Jade
 ;퍼그
 * 자바스크립트 템플릿엔진
@@ 9번째 줄: / 9번째 줄: @@
 ==사용예시==
-;코드
+{{소스헤더|코드}}
-<source lang='html'>
+<syntaxhighlight lang='html'>
 doctype html
 html(lang="en")
@@ 27번째 줄: / 27번째 줄: @@
          Pug is a terse and simple templating language with a
          strong focus on performance and powerful features.
-</source>
+</syntaxhighlight>
-;결과
+{{소스헤더|결과}}
-<source lang='html'>
+<syntaxhighlight lang='html'>
 <!DOCTYPE html>
 <html lang="en">
@@ 46번째 줄: / 46번째 줄: @@
    </body>
 </html>
-</source>
+</syntaxhighlight>
 ==같이보기==
 * [[EJS]]
+* [[Emmet]]
 * [[node.js]]
-==참고 자료==
+==참고==
 * https://pugjs.org/api/getting-started.html
 * https://github.com/pugjs/pug
 [[분류: JavaScript 라이브러리]]
 [[분류: 템플릿 엔진]]