Implement diff highlight (#85)

* diff highlight

* update docs and function renaming

* fix

* simplify code

* lint code

* lint code

* rename classes

* solution through split func

* update code style

* remove line numbers testing

* Update main.css

public/dist/code-styling.css

@@ -1 +1,2 @@
 .hljs{display:block;background:#fff;padding:.5em;color:#333;overflow-x:auto}.hljs-comment,.hljs-meta{color:#969896}.hljs-emphasis,.hljs-quote,.hljs-string,.hljs-strong,.hljs-template-variable,.hljs-variable{color:#df5000}.hljs-keyword,.hljs-selector-tag,.hljs-type{color:#a71d5d}.hljs-attribute,.hljs-bullet,.hljs-literal,.hljs-symbol{color:#0086b3}.hljs-name,.hljs-section{color:#63a35c}.hljs-tag{color:#333}.hljs-attr,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-selector-pseudo,.hljs-title{color:#795da3}.hljs-addition{color:#55a532;background-color:#eaffea}.hljs-deletion{color:#bd2c00;background-color:#ffecec}.hljs-link{text-decoration:underline}
+.diff{display:inline-block;width:100%}.diff span{color:inherit!important}.diff--added{color:#277030;background-color:#e2fce7}.diff--added:before{content:"+";opacity:.4}.diff--removed{color:#ae363c;background-color:#ffe6e6}.diff--removed:before{content:"-";opacity:.4}

src/frontend/js/classes/codeStyler.js

@@ -4,6 +4,7 @@ import xml from 'highlight.js/lib/languages/xml';
 import json from 'highlight.js/lib/languages/json';
 import css from 'highlight.js/lib/languages/css';
 import style from 'highlight.js/styles/github-gist.css'; // eslint-disable-line no-unused-vars
+import diffStyles from '../../styles/diff.pcss'; // eslint-disable-line no-unused-vars
 
 /**
  * @class CodeStyles
@@ -47,6 +48,20 @@ export default class CodeStyler {
 
     Array.from(codeBlocks).forEach(block => {
       hljs.highlightBlock(block);
+      this.highlightDiffs(block);
     });
   }
+
+  /**
+   * Highlight lines started from + or -
+   * @param {Element} block
+   */
+  highlightDiffs(block){
+    let lines = block.innerHTML.split('\n').map((line, index) => {
+      return line.replace(/^\+(.*)$/ig, '<span class="diff diff--added">$1</span>')
+                 .replace(/^-(.*)$/ig, '<span class="diff diff--removed">$1</span>');
+    });
+
+    block.innerHTML = lines.join('\n');
+  }
 }

src/frontend/styles/components/page.pcss

@@ -193,14 +193,24 @@
   font-family: var(--font-mono);
   line-height: 1.7em;
   font-size: 13px;
+  overflow-x: auto;
+  margin: 15px 0;
 
   &__content {
+    display: inline-block !important;
     white-space: pre;
     word-wrap: normal;
-    overflow-x: auto;
     background: transparent !important;
     padding: 15px !important;
     color: #41314e !important;
+    min-width: 100%;
+    box-sizing: border-box;
+
+    .diff {
+      margin: 0 -15px;
+      padding-left: 15px;
+      padding-right: 15px;
+    }
   }
 
   .hljs-name,

src/frontend/styles/diff.pcss

@@ -0,0 +1,28 @@
+.diff {
+  display: inline-block;
+  width: 100%;
+
+  span {
+    color: inherit !important;
+  }
+
+  &--added {
+    color: #277030;
+    background-color: #e2fce7;
+
+    &::before {
+      content: '+';
+      opacity: 0.4;
+    }
+  }
+
+  &--removed {
+    color: rgb(174, 54, 60);
+    background-color: rgba(255, 230, 230, 1);
+
+    &::before {
+      content: '-';
+      opacity: 0.4;
+    }
+  }
+}