pug+jade+vue实现pug实时转html代码

代码语言:html

所属分类:其他

代码描述:pug+jade+vue实现pug实时转html代码

代码标签: pug jade vue pug 实时 html 代码

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/skeleton.min.css">
  
<style>
body {
  font-family: "Helvetica Neue";

  padding: 4rem 2rem;
    background: #111;
  color: rgba(255, 255, 255, 0.5);
}

.copy {
  max-width: 740px;
    -webkit-font-smoothing: antialiased;
}

.copy h1 {
    color: rgba(255, 255, 255, 0.8);
}
textarea {
  font-size: 15px;
  min-height: 250px;
  width: 100%;
}

.render {
  padding: 3rem;
  background: #fafafa;
  color: #333;


.mtop {
  margin-top: 3rem;
}
</style>


  
</head>

<body>
  <div id="app">
  <div class="container">
    <div class="copy">
            <h1>Pug to HTML</h1>
<h2>Compiling & rendering Pug templates at runtime with Vue.js</h2>
      <p>While not recommended to use on a production website, the standalone version of Pug can be used to compile any string template at runtime. Combined with <a href="https://vuejs.org/">Vue.js</a> you can easily build dynamic live previews that don’t
        require a server or NodeJS runtime. Only downside: filesize of the <a href="https://pugjs.org/js/pug.js">Pug.js</a> (500kb). But if you are building code playgrounds, style guides or desktop apps, this is no big deal, right?</p>
    </div>
  </div>

  <div class="container mtop">
    <div class=&qu.........完整代码请登录后点击上方下载按钮下载查看

网友评论0