Markdown preview in wiki

app/assets/stylesheets/generic/forms.scss

@@ -88,7 +88,8 @@ label {
   @include box-shadow(none);
 }
 
-.issuable-description {
+.issuable-description,
+.wiki-content {
   margin-top: 35px;
 }
 

app/assets/stylesheets/generic/markdown_area.scss

@@ -65,6 +65,7 @@
 .edit_note,
 .issuable-description,
 .milestone-description,
+.wiki-content,
 .merge-request-form {
   .nav-tabs {
     margin-bottom: 0;

app/views/projects/wikis/_form.html.haml

@@ -19,13 +19,15 @@
         %code [Link Title](page-slug)
         \.
 
-  .form-group
+  .form-group.wiki-content
     = f.label :content, class: 'control-label'
     .col-sm-10
-      = render 'projects/zen', f: f, attr: :content, classes: 'description form-control'
-      .col-sm-12.hint
-        .pull-left Wiki content is parsed with #{link_to "GitLab Flavored Markdown", help_page_path("markdown", "markdown"), target: '_blank'}
-        .pull-right Attach images (JPG, PNG, GIF) by dragging & dropping or #{link_to "selecting them", '#', class: 'markdown-selector' }.
+      = render layout: 'projects/md_preview' do
+        = render 'projects/zen', f: f, attr: :content, classes: 'description form-control'
+        .col-sm-12.hint
+          .pull-left Wiki content is parsed with #{link_to "GitLab Flavored Markdown", help_page_path("markdown", "markdown"), target: '_blank'}
+          .pull-right Attach images (JPG, PNG, GIF) by dragging & dropping or #{link_to "selecting them", '#', class: 'markdown-selector' }.
+
       .clearfix
       .error-alert
   .form-group