PLT-2619/PLT-2661 Removed line numbers from markdown code blocks (#2795)

* Changed .editorconfig to indent CSS files using spaces

* Removed line numbers from markdown code blocks and made them wrap when no language is specified

.editorconfig

@@ -7,7 +7,7 @@ end_of_line = lf
 insert_final_newline = false
 charset = utf-8
 
-[*.{go,scss}]
+[*.go]
 indent_style = tab
 
 [*.{js,jsx,json,html}]
@@ -25,3 +25,7 @@ indent_size = 2
 
 [Makefile]
 indent_style = tab
+
+[*.scss]
+indent_style = space
+indent_size = 4

webapp/sass/layout/_markdown.scss

@@ -21,7 +21,7 @@
     }
 }
 
-.post-body--code {
+.post-code {
     overflow-x: auto;
     overflow-y: hidden;
     position: relative;
@@ -32,7 +32,6 @@
         margin: 0;
         padding: 0px;
         text-align: left;
-        white-space: nowrap;
     }
 
     code {
@@ -45,12 +44,16 @@
         vertical-align: top;
     }
 
-    &:hover .post-body--code__language {
+    &:hover .post-code__language {
         @include opacity(1);
     }
+
+    &--wrap code {
+        white-space: pre-wrap;
+    }
 }
 
-.post-body--code__language {
+.post-code__language {
     @include opacity(0);
     @include translate3d(0, 0, 0);
     background: #21586d;
@@ -67,7 +70,7 @@
     z-index: 5;
 }
 
-.post-body--code__lineno {
+.post-code__lineno {
     border-right: 1px solid #aaa;
     color: #aaa;
     margin-right: .5em;
@@ -89,10 +92,6 @@
         padding: 0;
     }
 
-    code {
-        white-space: pre;
-    }
-
     .codespan__pre-wrap {
         code {
             white-space: pre-wrap;

webapp/utils/syntax_hightlighting.jsx

@@ -124,34 +124,40 @@ hlJS.registerLanguage('yaml', hljsYaml);
 const HighlightedLanguages = Constants.HighlightedLanguages;
 
 export function formatCode(lang, data, filename) {
-    var language = lang || '';
+    const language = lang.toLowerCase() || '';
-    var parsed;
+    let contents;
-    var header = '';
+    let header = '';
-
-    language = language.toLowerCase();
 
     if (HighlightedLanguages[language]) {
-        var name = HighlightedLanguages[language].name;
+        let name = HighlightedLanguages[language].name;
 
         if (filename) {
             const fname = decodeURIComponent(Utils.getFileName(filename));
             name = fname + ' - ' + name;
         }
 
-        header = '<span class="post-body--code__language">' + name + '</span>';
+        header = '<span class="post-code__language">' + name + '</span>';
 
         try {
-            parsed = hlJS.highlight(language, data).value;
+            contents = hlJS.highlight(language, data).value;
         } catch (e) {
-            parsed = TextFormatting.sanitizeHtml(data);
+            contents = TextFormatting.sanitizeHtml(data);
         }
     } else {
-        parsed = TextFormatting.sanitizeHtml(data);
+        contents = TextFormatting.sanitizeHtml(data);
     }
 
+    let className = 'post-code';
+    if (!language) {
+        // wrap when no language is specified
+        className += ' post-code--wrap';
+    }
+
+    if (filename) {
+        // add line numbers when viewing a code file preview
         const lines = data.match(/\r\n|\r|\n|$/g).length;
-    var strlines = '';
+        let strlines = '';
-    for (var i = 1; i <= lines; i++) {
+        for (let i = 1; i <= lines; i++) {
             if (strlines) {
                 strlines += '\n' + i;
             } else {
@@ -159,21 +165,26 @@ export function formatCode(lang, data, filename) {
             }
         }
 
-    return (
+        contents = (
-        '<div class="post-body--code">' +
-            header +
-            '<pre>' +
-                '<code class="hljs">' +
             '<table>' +
                 '<tbody>' +
                     '<tr>' +
-                                '<td class="post-body--code__lineno">' + strlines + '</td>' +
+                        '<td class="post-code__lineno">' + strlines + '</td>' +
                         '<td>' +
-                                    parsed +
+                            contents +
                         '</td>' +
                     '</tr>' +
                 '</tbody>' +
-                    '</table>' +
+            '</table>'
+        );
+    }
+
+    return (
+        '<div class="' + className + '">' +
+            header +
+            '<pre>' +
+                '<code class="hljs">' +
+                    contents +
                 '</code>' +
             '</pre>' +
         '</div>'