diff --git a/package.json b/package.json
index fd2e2797b..a007a97d9 100644
--- a/package.json
+++ b/package.json
@@ -39,14 +39,15 @@
     "highlight.js": "^9.3.0",
     "json-templater": "^1.0.4",
     "lerna": "2.0.0-beta.18",
+    "markdown-it-container": "^2.0.0",
     "markdown-it-toc-and-anchor": "^4.1.1",
     "oui-dom-events": "^0.2.1",
     "postcss": "^5.0.21",
     "purecss": "^0.6.0",
     "q": "^1.4.1",
     "uppercamelcase": "^1.1.0",
-    "vue-loader": "^9.3.2",
     "vue": "^2.0.0-rc.2",
+    "vue-loader": "^9.3.2",
     "vue-markdown-loader": "^0.4.0",
     "vue-popup": "^0.2.2",
     "vue-router": "^2.0.0-beta.2"
diff --git a/scripts/cooking.demo.js b/scripts/cooking.demo.js
index 7db54961b..7b3dd70ef 100644
--- a/scripts/cooking.demo.js
+++ b/scripts/cooking.demo.js
@@ -1,5 +1,6 @@
 var cooking = require('cooking');
 var path = require('path');
+var md = require('markdown-it')();
 var Components = require('../components.json');
 
 cooking.set({
@@ -51,6 +52,26 @@ cooking.add('vueMarkdown', {
     [require('markdown-it-toc-and-anchor').default, {
       anchorLinkSymbol: '',
       anchorClassName: 'anchor'
+    }],
+    [require('markdown-it-container'), 'code', {
+      validate: function(params) {
+        return params.trim().match(/^code\s+(.*)$/);
+      },
+
+      render: function (tokens, idx) {
+        var m = tokens[idx].info.trim().match(/^code\s+(.*)$/);
+
+        if (tokens[idx].nesting === 1) {
+          // opening tag
+          return '<div class="details">' +
+                    `<div class="summary">${md.utils.escapeHtml(m[1])}</div>` +
+                  '<div class="code">';
+
+        } else {
+          // closing tag
+          return '</div></div>\n';
+        }
+      }
     }]
   ],
   preprocess: function (MarkdownIt, source) {