Code colors (#592)

* render code htm with classes

* code highlight styles

* revert unneded gitignore change

Co-authored-by: Umputun <umputun@gmail.com>
Co-authored-by: Dmitry Verkhoturov <paskal.07@gmail.com>

frontend/app/components/raw-content/_theme/_dark/raw-content_theme_dark.scss

@@ -18,10 +18,6 @@
     }
   }
 
-  pre {
-    background-color: #393734;
-  }
-
   hr {
     border-color: #2d2d2c;
   }

frontend/app/components/raw-content/_theme/_light/raw-content_theme_light.scss

@@ -18,10 +18,6 @@
     }
   }
 
-  pre {
-    background-color: #f6f8fa;
-  }
-
   hr {
     border-color: #f6f8fa;
   }

frontend/app/remark.tsx

@@ -1,20 +1,22 @@
 /** @jsx createElement */
 import loadPolyfills from '@app/common/polyfills';
+
 import { createElement, render } from 'preact';
 import 'preact/debug';
-
+import { bindActionCreators } from 'redux';
 import { Provider } from 'react-redux';
+
 import { ConnectedRoot } from '@app/components/root';
 import { UserInfo } from '@app/components/user-info';
 import reduxStore from '@app/store';
 
 // importing css
+import '@app/styles/code-highlight.scss';
 import '@app/components/list-comments';
 
 import { NODE_ID, BASE_URL } from '@app/common/constants';
 import { StaticStore } from '@app/common/static_store';
 import api from '@app/common/api';
-import { bindActionCreators } from 'redux';
 import { fetchHiddenUsers } from './store/user/actions';
 import { restoreProvider } from './store/provider/actions';
 import { restoreCollapsedThreads } from './store/thread/actions';

frontend/app/styles/code-highlight.scss

@@ -0,0 +1,127 @@
+.chroma {
+  --chroma-bg: rgba(0, 0, 0, 0.05);
+  --chroma-base: #586e75;
+  --chroma-c: #7d7d7d;
+  --chroma-01: #589000;
+  --chroma-02: #cb4b16;
+  --chroma-03: #268bd2;
+  --chroma-04: #2aa198;
+  --chroma-05: #859900;
+  --chroma-06: #d33682;
+  --chroma-07: #00aee2;
+
+  .root_theme_dark & {
+    --chroma-bg: rgba(255, 255, 255, 0.1);
+    --chroma-base: #93a1a1;
+    --chroma-c: #586e75;
+    --chroma-01: #8ad200;
+    --chroma-03: #3af;
+    --chroma-05: #8eca03;
+    --chroma-06: #dc322f;
+    --chroma-07: #95d5e8;
+  }
+
+  color: var(--chroma-base);
+  background-color: var(--chroma-bg);
+
+  /* Comments */
+  .c1,
+  .cm,
+  .c,
+  .ch,
+  .cp,
+  .cpf,
+  .cs {
+    color: var(--chroma-c);
+  }
+
+  .ge {
+    font-style: italic;
+  }
+
+  .gr,
+  .gs {
+    font-weight: 700;
+  }
+
+  .kd {
+    color: var(--chroma-07);
+  }
+  .kn,
+  .k,
+  .kc,
+  .kp,
+  .kr,
+  .kt,
+  .ow {
+    color: var(--chroma-01);
+  }
+
+  .nb,
+  .nc {
+    color: var(--chroma-02);
+  }
+
+  .bp,
+  .n,
+  .na,
+  .fm,
+  .nd,
+  .ne,
+  .nf,
+  .ni,
+  .nl,
+  .nn,
+  .no,
+  .nt,
+  .nv,
+  .nx,
+  .py,
+  .vc,
+  .vg,
+  .vi,
+  .vm {
+    color: var(--chroma-03);
+  }
+
+  .dl,
+  .il,
+  .l,
+  .ld,
+  .m,
+  .mb,
+  .mf,
+  .mh,
+  .mi,
+  .mo,
+  .s,
+  .s1,
+  .s2,
+  .sa,
+  .sb,
+  .sc,
+  .sd,
+  .se,
+  .sh,
+  .si,
+  .sr,
+  .ss,
+  .sx {
+    color: var(--chroma-04);
+  }
+
+  .g,
+  .gd,
+  .ge,
+  .gh,
+  .gi,
+  .gl,
+  .go,
+  .gp,
+  .gr,
+  .gs,
+  .gt,
+  .gu {
+    color: var(--chroma-06);
+  }
+}