Make initial setup simpler

index.js

@@ -279,7 +279,7 @@ function convertHTMLtoJSON(html) {
 			curSectionData.code = $section(this).html().replace(/^\s+|\s+$/g, '');
 		});
 
-		curSectionData.markup = hl.highlightAuto(curSectionData.code).value;
+		curSectionData.markup = hl.highlight("html", curSectionData.code).value;
 		curSectionData.id = makeUrlSafe(curSectionData.section  + '-' + curSectionData.heading);
 
 		$section('h1.main-section-' + sgUniqueIdentifier).remove();

template/template.html

@@ -1,44 +1,6 @@
+
 {{> theme}}
 {{> highlight}}
-{{> jquery}}
-
-<script>
-    var j = jQuery.noConflict(true);
-    j(function() {
-
-        // Show section in Styleguide
-        j('#styleguide .section[data-section="' + j('#styleguide-menu a').first().data('section') + '"]').show();
-
-        // Click on link with subheadings
-        j('#styleguide-menu .submenulink').click(function(event) {
-            event.preventDefault();
-            var jqCurSubmenu = j('[data-submenu="' + j(this).data('section') + '"]');
-            var isCurSubmenuOn = jqCurSubmenu.hasClass('on');
-            j('#styleguide-menu .on').removeClass('on');
-            if (!isCurSubmenuOn) {
-                jqCurSubmenu.addClass('on');
-                j(this).addClass('on');
-            }
-            showSection(j(this).data('section'));
-        });
-
-        // Click on link without subheadings
-        j('#styleguide-menu .sectionlink').click(function(event) {
-            event.preventDefault();
-            j('#styleguide-menu .on').removeClass('on');
-            j(this).addClass('on');
-            showSection(j(this).data('section'));
-        });
-
-        // Show/Hide sections
-        function showSection(section) {
-            j('#styleguide .section').hide();
-            var jqCurSections = j('#styleguide .section[data-section="' + section + '"]');
-            jqCurSections.show();
-        }
-    });
-</script>
-
 <div id="styleguide-menu">
 	<ul>
 	{{#each menu}}
@@ -76,12 +38,47 @@ <h1>{{section}}{{#if heading}}/{{heading}}{{/if}}</h1>
 
             {{#if markup}}
                 <div class="markup hljs">
-<pre>
-{{{markup}}}
-</pre>
+                    <pre><code>{{{markup}}}</code></pre>
                 </div>
             {{/if}}
 
 		</div>
 	{{/each}}
-</div>
+</div>
+{{> jquery}}
+<script>
+    var j = jQuery.noConflict(true);
+    j(function() {
+
+        // Show section in Styleguide
+        j('#styleguide .section[data-section="' + j('#styleguide-menu a').first().data('section') + '"]').show();
+
+        // Click on link with subheadings
+        j('#styleguide-menu .submenulink').click(function(event) {
+            event.preventDefault();
+            var jqCurSubmenu = j('[data-submenu="' + j(this).data('section') + '"]');
+            var isCurSubmenuOn = jqCurSubmenu.hasClass('on');
+            j('#styleguide-menu .on').removeClass('on');
+            if (!isCurSubmenuOn) {
+                jqCurSubmenu.addClass('on');
+                j(this).addClass('on');
+            }
+            showSection(j(this).data('section'));
+        });
+
+        // Click on link without subheadings
+        j('#styleguide-menu .sectionlink').click(function(event) {
+            event.preventDefault();
+            j('#styleguide-menu .on').removeClass('on');
+            j(this).addClass('on');
+            showSection(j(this).data('section'));
+        });
+
+        // Show/Hide sections
+        function showSection(section) {
+            j('#styleguide .section').hide();
+            var jqCurSections = j('#styleguide .section[data-section="' + section + '"]');
+            jqCurSections.show();
+        }
+    });
+</script>

template/theme.css

@@ -11,7 +11,7 @@
     box-shadow:         2px 2px 5px 0px rgba(50, 50, 50, 0.43);
 }
 
-#styleguide .result, 
+#styleguide .result,
 #styleguide .comment {
     padding: 1em;
     border: 1px solid #ddd;
@@ -33,7 +33,20 @@
 
 #styleguide .markup {
     border: 1px solid #ddd;
-    border-top: none;    
+    border-top: none;
+}
+
+#styleguide .markup pre {
+    overflow:  auto;
+    padding: 0;
+    width: 100%;
+}
+
+#styleguide .markup code {
+    display: block;
+    word-wrap: normal;
+    white-space: pre;
+    padding: 1em;
 }
 
 #styleguide code,
@@ -120,4 +133,3 @@
 #styleguide-menu a.on {
     background-color: rgba(0, 0, 0, 0.1);
 }
-