diff --git a/README.md b/README.md
index 4b746b7..011425c 100644
--- a/README.md
+++ b/README.md
@@ -5,11 +5,13 @@ A Handlebars template loader for Webpack
+
**Table of Contents**
- [Installation](#installation)
- [Usage](#usage)
- [Loading templates](#loading-templates)
+- [Using helpers](#using-helpers)
- [Using partials](#using-partials)
- [Options](#options)
- [Prepending filename comment](#prepending-filename-comment)
@@ -17,6 +19,7 @@ A Handlebars template loader for Webpack
- [Compilation options](#compilation-options)
- [Macros](#macros)
- [require](#require)
+ - [include](#include)
- [repeat](#repeat)
- [Custom macros](#custom-macros)
- [Disabling macros](#disabling-macros)
@@ -27,20 +30,25 @@ A Handlebars template loader for Webpack
-# Installation
+
+# Installation #
-```
+
+```bash
npm install handlebars-template-loader
```
-Since version 0.5.4, this loaders does not include Handlebars in its dependency list. Make sure to install Handlebars before running webpack. Read https://github.com/npm/npm/issues/6565 for details.
+
+>Since version 0.5.4, this loaders does not include Handlebars in its dependency list. Make sure to install Handlebars before running webpack. Read https://github.com/npm/npm/issues/6565 for details.
-# Usage
+
+# Usage #
+
```javascript
module.exports = {
//...
@@ -58,15 +66,18 @@ module.exports = {
```
-# Loading templates
+
+# Loading templates #
+
```html
Hello {{name}}
```
+
```javascript
// File: app.js
var compiled = require('./hello.hbs');
@@ -74,9 +85,11 @@ return compiled({name: "world"});
```
-####Using helpers
+
+# Using helpers #
+
```javascript
// File: helpers.js
@@ -104,6 +117,7 @@ Handlebars.registerHelper('link', function(text, url) {
```
+
```javascript
// File: main.js
@@ -112,9 +126,11 @@ require("./helpers.js");
```
-# Using partials
+
+# Using partials #
+
```javascript
// Get Handlebars instance
var Handlebars = require('handlebars-template-loader/runtime');
@@ -128,14 +144,19 @@ require("./helpers.js");
```
-# Options
+
+# Options #
-## Prepending filename comment
+
+## Prepending filename comment ##
+
When debugging a large single page app with the DevTools, it's often hard to find the template that contains a bug. With the following config a HTML comment is prepended to the template with the relative path in it (e.g. ``).
+
+
```javascript
module.exports = {
//...
@@ -155,9 +176,11 @@ module.exports = {
```
-## Images
+
+## Images ##
+
In order to load images you must install either the `file-loader` or the `url-loader` package.
```javascript
@@ -176,6 +199,7 @@ module.exports = {
```
+
```html
@@ -185,6 +209,7 @@ module.exports = {
```
+
Images with an absolute path are not translated unless a `root` option is defined
```html
@@ -196,6 +221,7 @@ Images with an absolute path are not translated unless a `root` option is define
```
+
In order to deactivate image processing define the `attributes` option as an empty array.
```javascript
@@ -217,9 +243,11 @@ module.exports = {
```
+
You could also add which attributes need to be processed in the form of pairs *tag:attribute*.
+
```javascript
module.exports = {
//...
@@ -272,12 +300,15 @@ module.exports = {
```
-## Compilation options
+
+## Compilation options ##
+
Handlebars does support [additional compilation options](http://handlebarsjs.com/reference.html) that you can specify in your `query` object literal.
+
```javascript
module.exports = {
//...
@@ -299,19 +330,22 @@ module.exports = {
```
-# Macros
+
+# Macros #
Macros allow additional features like including templates or inserting custom text in a compiled templates.
-require
--------
+
+## require ##
+
The `require` macro expects a path to a handlebars template. The macro is then translated to a webpack require expression that evaluates the template using the same arguments.
+
```html
Profile
@@ -324,9 +358,11 @@ Surname: {{surname}}
```
-## require
+
+## include ##
+
While the `require` macro expects a resource that returns a function, the `include` macro can be used for resources that return plain text. For example, we can include text loaded through the `html-loader` directly in our template.
```html
@@ -339,9 +375,11 @@ While the `require` macro expects a resource that returns a function, the `inclu
```
-## repeat
+
+## repeat ##
+
The `repeat` macro will repeat the given string the amount of times as specified by the second argument (default to 1). It will only accept string literals.
```html
@@ -352,12 +390,15 @@ The `repeat` macro will repeat the given string the amount of times as specified
```
-## Custom macros
+
+## Custom macros ##
+
We can include additional macros by defining them in the webpack configuration file. Remember that the value returned by a macro is inserted as plain javascript, so in order to insert a custom text we need to use nested quotes. For example, let's say that we want a macro that includes a copyright string in our template.
+
```javascript
// File: webpack.config.js
module.exports = {
@@ -379,9 +420,11 @@ module.exports = {
```
+
We then invoke our macro from within the template as usual.
+
```html