Skip to content

Commit 24f0be8

Browse files
authored
Update README.md
resolves #32
1 parent d464416 commit 24f0be8

File tree

1 file changed

+40
-0
lines changed

1 file changed

+40
-0
lines changed

README.md

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -337,6 +337,46 @@ livingcss('input.css', 'styleguide.html', {
337337
**NOTE:** files will only be referenced by their file path and will not be copied over to the output directory. This ensures any relative file paths to images and other CSS files still work.
338338
* `title` - Title of the style guide. Defaults to 'LivingCSS Style Guide'.
339339

340+
## Using the context object in Handlebars
341+
342+
Let's say your comment looks like this:
343+
344+
```css
345+
/**
346+
* A simple Button.
347+
* @section Buttons
348+
* @example <button>Click Me</button>
349+
* @customTag Hello World
350+
*/
351+
```
352+
353+
This would generate a context object like so:
354+
355+
```json
356+
{
357+
"sections": [{
358+
"name": "Buttons",
359+
"description": "<p>A simple Button.</p>",
360+
"example": {
361+
"description": "<button>Click me</button>",
362+
"type": "markup"
363+
},
364+
"customTag": "Hello World"
365+
}]
366+
}
367+
```
368+
369+
Then in handlebars you would do this:
370+
371+
```hbs
372+
{{#each sections}}
373+
<h1>{{name}}</h1>
374+
{{{description}}}
375+
<div>{{{example.description}}}</div>
376+
<div>{{customTag}}</div>
377+
{{/each}}
378+
```
379+
340380
## Utility functions
341381

342382
LivingCSS has a few helpful utility functions that you can use in custom tags or in the `options.preprocess` function.

0 commit comments

Comments
 (0)