diff --git a/bower.json b/bower.json
index 079c3bd..a64a20f 100644
--- a/bower.json
+++ b/bower.json
@@ -35,6 +35,7 @@
     "angular-i18n": "^1.5.0",
     "angular-load": "^0.4.1",
     "angular-translate-interpolation-messageformat": "^2.10.0",
+	"angular-bind-html-compile": "^1.2.1",
     "ng-ckeditor": "^0.2.1",
     "ckeditor": "^4.5.8"
   },
diff --git a/src/app/article/article-default-view.component.ts b/src/app/article/article-default-view.component.ts
index 39076df..58d5142 100644
--- a/src/app/article/article-default-view.component.ts
+++ b/src/app/article/article-default-view.component.ts
@@ -1,6 +1,7 @@
 import { bundle, Input, Inject, Component, Directive } from 'ng-forward';
 import {ArticleBlogComponent} from "./types/blog/blog.component";
 import {CommentsComponent} from "./comment/comments.component";
+import {MacroDirective} from "./macro/macro.directive";
 
 /**
  * @ngdoc controller
@@ -30,7 +31,7 @@ export class ArticleDefaultViewComponent {
 @Component({
     selector: 'noosfero-article',
     template: 'not-used',
-    directives: [ArticleDefaultViewComponent, ArticleBlogComponent, CommentsComponent]
+    directives: [ArticleDefaultViewComponent, ArticleBlogComponent, CommentsComponent, MacroDirective]
 })
 @Inject("$element", "$scope", "$injector", "$compile")
 export class ArticleViewComponent {
@@ -53,6 +54,5 @@ export class ArticleViewComponent {
         private $scope: ng.IScope,
         private $injector: ng.auto.IInjectorService,
         private $compile: ng.ICompileService) {
-
     }
 }
diff --git a/src/app/article/article.html b/src/app/article/article.html
index 15b5ce0..c82e068 100644
--- a/src/app/article/article.html
+++ b/src/app/article/article.html
@@ -21,7 +21,7 @@
   </div>
 
   <div class="page-body">
-    <div ng-bind-html="ctrl.article.body"></div>
+    <div bind-html-compile="ctrl.article.body"></div>
   </div>
 
   <noosfero-comments [article]="ctrl.article"></noosfero-comments>
diff --git a/src/app/article/macro/macro.directive.spec.ts b/src/app/article/macro/macro.directive.spec.ts
new file mode 100644
index 0000000..f64d3be
--- /dev/null
+++ b/src/app/article/macro/macro.directive.spec.ts
@@ -0,0 +1,25 @@
+import {Input, provide, Component} from 'ng-forward';
+import {MacroDirective} from "./macro.directive";
+
+import * as helpers from "../../../spec/helpers";
+
+const htmlTemplate: string = '<div data-macro="macro_component" data-macro-custom="custom"></div>';
+
+describe("Directives", () => {
+
+    describe("Macro directive", () => {
+        it("renders a macro component using the name passed in data-macro", (done: Function) => {
+            helpers.quickCreateComponent({ template: htmlTemplate, directives: [MacroDirective] }).then((fixture) => {
+                expect(fixture.debugElement.queryAll('macro-component').length).toEqual(1);
+                done();
+            });
+        });
+
+        it("extract custom attributes from macro", (done: Function) => {
+            helpers.quickCreateComponent({ template: htmlTemplate, directives: [MacroDirective] }).then((fixture) => {
+                expect(fixture.debugElement.query('macro-component').attr("custom")).toEqual("custom");
+                done();
+            });
+        });
+    });
+});
diff --git a/src/app/article/macro/macro.directive.ts b/src/app/article/macro/macro.directive.ts
new file mode 100644
index 0000000..dcd7891
--- /dev/null
+++ b/src/app/article/macro/macro.directive.ts
@@ -0,0 +1,34 @@
+import {Directive, Inject} from "ng-forward";
+
+@Directive({
+    selector: '[macro]',
+    providers: []
+})
+@Inject('$element', '$scope', '$compile')
+export class MacroDirective {
+
+    private macroPrefix = "data-macro";
+
+    constructor(private $element: any, private $scope: ng.IScope, private $compile: ng.ICompileService) {
+        let macro = $element[0].attributes[this.macroPrefix].value;
+        let componentName = this.normalizeName(macro);
+        let content = $element.html().replace(/"/g, '&quot;');
+        let customAttributes = this.extractCustomAttributes($element[0].attributes);
+        $element.replaceWith($compile(`<${componentName} [article]="ctrl.article" content="${content}" ${customAttributes}></${componentName}>`)($scope));
+    }
+
+    extractCustomAttributes(attributes: any) {
+        let customAttributes = "";
+        for (let attr of attributes) {
+            if (attr.name.startsWith(this.macroPrefix + '-')) {
+                let name = this.normalizeName(attr.name.replace(this.macroPrefix + '-', ''));
+                customAttributes += ` ${name}='${attr.value}'`;
+            }
+        }
+        return customAttributes;
+    }
+
+    normalizeName(name: string) {
+        return name.replace(/[_\/]/g, '-').toLowerCase();
+    }
+}
diff --git a/src/app/index.ts b/src/app/index.ts
index da0ae09..4c3f9a6 100644
--- a/src/app/index.ts
+++ b/src/app/index.ts
@@ -15,7 +15,7 @@ declare var moment: any;
 let noosferoApp: any = bundle("noosferoApp", MainComponent, ["ngAnimate", "ngCookies", "ngStorage", "ngTouch",
     "ngSanitize", "ngMessages", "ngAria", "restangular",
     "ui.router", "ui.bootstrap", "toastr", "ngCkeditor",
-    "angularMoment", "angular.filter", "akoenig.deckgrid",
+    "angular-bind-html-compile","angularMoment", "angular.filter", "akoenig.deckgrid",
     "angular-timeline", "duScroll", "oitozero.ngSweetAlert",
     "pascalprecht.translate", "tmh.dynamicLocale", "angularLoad"]).publish();
 
--
libgit2 0.21.2