Added syntax highlighting support to pages and component descriptions.

NoDivide · Sep 5, 2016 · 9a7e979 · 9a7e979
1 parent 4df3d6c
commit 9a7e979
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 9 deletions.
diff --git a/_template/app/css/styles.css b/_template/app/css/styles.css
@@ -1026,7 +1026,13 @@
 .ndpl-component__code .ndpl-pre {
     margin: 0;
 }
+
+/* We apply the same code styling to page, description and component elements. */
+.ndpl-page pre code,
+.ndpl-component__description pre code,
 .ndpl-component__code .ndpl-code {
+    box-sizing: border-box;
+    color: #616367;
     font-size: 12px;
     line-height: 18px;
     opacity: 0.75;
@@ -1035,7 +1041,13 @@
     -ms-overflow-style: -ms-autohiding-scrollbar;
     padding: 36px 12px;
     white-space: pre;
+    width: 100%;
 }
+.ndpl-page pre code,
+.ndpl-component__description pre code {
+    padding: 12px;
+}
+
 .ndpl-component__code-toggle {
     border-bottom: 1px solid transparent;
     color: #B0B1B3;
@@ -1066,11 +1078,17 @@
         border: 1px solid #E0E6ED;
         border-top: none;
     }
+    .ndpl-page pre code,
+    .ndpl-component__description pre code,
     .ndpl-component__code .ndpl-code {
         font-size: 15px;
         line-height: 21px;
         padding: 36px;
     }
+    .ndpl-page pre code,
+    .ndpl-component__description pre code {
+        padding: 12px;
+    }
     .ndpl-component__code-toggle {
         border-left: 1px solid transparent;
         border-right: 1px solid transparent;

diff --git a/_template/app/css/styles.min.css b/_template/app/css/styles.min.css
diff --git a/_template/app/js/main.js b/_template/app/js/main.js
@@ -37,12 +37,11 @@ var ndplComponent = Vue.extend({
 
     watch: {
         'component.html': function() {
+            var _this = this;
 
             // Apply syntax highlighting when component html is loaded
             if(this.component.html.length) {
-                var block = this.$el.querySelector('pre code');
-
-                hljs.highlightBlock(block);
+                _this.$root.applySyntaxHighlighting(_this.$el);
             }
         }
     },
@@ -74,9 +73,7 @@ var ndplComponent = Vue.extend({
         });
 
         if (_this.component.html) {
-            var block = this.$el.querySelector('pre code');
-
-            hljs.highlightBlock(block);
+            _this.$root.applySyntaxHighlighting(_this.$el);
         }
     },
 
@@ -447,6 +444,25 @@ new Vue({
 
     methods: {
 
+        /**
+         * Apply syntax highlighting to pre code elements
+         * within passed element.
+         *
+         * @param el
+         */
+        applySyntaxHighlighting: function(el) {
+
+            setTimeout(function() {
+                var blocks = el.querySelectorAll('pre code');
+
+                for(var i = 0; i < blocks.length; i++) {
+                    var block = blocks[i];
+
+                    hljs.highlightBlock(block);
+                }
+            }, 0);
+        },
+
         /**
          * Reads the data.json file.
          */
@@ -786,6 +802,8 @@ new Vue({
 
             _this.$http.get(page.file + '?cb=' + new Date()).then(function (response) {
                 _this.$set('active_page.markup', marked(response.data));
+
+                _this.applySyntaxHighlighting(document);
             });
 
             _this.updateHash(page.name);