gulp-sceg
Styled content elements guide. sceg plugin for gulp.
Sample
Element Guide (bootstrap sample)
Uasge
$ npm install -D gulp gulp-sceg
var gulp = ;var sceg = ; gulp;
Content element files
for example.
path/└to/ └src/ └elements/ ├00_h1.pug ├01_h2.pug ├02_h3.pug ├03_h4.pug ├04_h5.pug ├05_h6.pug ├10_ul-li.html ├11_ol-li.html ├12_dl-dd-dd.html ├20_table.pug ├21_table-caption.pug ├22_table-thead.pug └23_table-tfoot.pug
Format
html
<!-- # Title (require) @Category (optional) Markdown comments (optional)-->Lorem ipsum dolor sit amet...
pug (jade)
//- # Title (require)//- @Category (optional)//- Markdown comments (optional)element.classes(attr="val") Lorem ipsum dolor sit amet...
Layout template
Binding data
Format
handlebars
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.min.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism-okaidia.min.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/components/prism-markup.min.js"></script>{{#each contents}}<section> <h1><a id="{{category.id}}">{{category.name}}</a></h1> {{#each el}} <section> <h2>{{title}}</h2> <h5>Preview</h5> {{{html}}} <h5>Code</h5> <pre class="language-markup"><code class="language-markup">{{html}}</code></pre> <small> {{{comment}}} </small> </section> {{/each}}</section>{{/each}}
pug (jade)
link(rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.min.css')link(rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism-okaidia.min.css')script(src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js')script(src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/components/prism-markup.min.js')each content, category in contents section h1 a(id=category.id)= category each el in content.el section h2= el.title h5 Preview !{el.html} h5 Code pre.language-markup code.language-markup el.html small !{el.comment}
©YusukeHirao(@cloud10designs), MIT license.