design system: update code block with jet brains mono and rainbowy code

common/constants.js

@@ -20,6 +20,8 @@ export const font = {
   monoBold: `'mono-bold', monaco, monospace`,
   monoCode: `'fira-code-regular', mono, monospace`,
   monoCodeBold: `'fira-code-bold', mono-bold, monospace`,
+  code: `'jet-brains-regular', mono, monospace`,
+  codeBold: `'jet-brains-bold', mono, monospace`,
 };
 
 export const typescale = {

common/styles/global.js

@@ -176,6 +176,16 @@ export const injectGlobalStyles = () => css`
     src: url('/static/FiraCode-Bold.woff');
   }
 
+  @font-face {
+    font-family: 'jet-brains-regular';
+    src: url('/static/JetBrainsMono-Regular.woff');
+  }
+
+  @font-face {
+    font-family: 'jet-brains-bold';
+    src: url('/static/JetBrainsMono-Bold.woff');
+  }
+
   html, body, div, span, applet, object, iframe,
   h1, h2, h3, h4, h5, h6, p, blockquote, pre,
   a, abbr, acronym, address, big, cite, code,

components/system/components/CodeBlock.js

@@ -2,10 +2,11 @@ import * as React from "react";
 import * as Constants from "~/common/constants";
 
 import { css } from "@emotion/react";
+import Prism from "prismjs";
 
 const STYLES_CODE_BLOCK = css`
   box-sizing: border-box;
-  font-family: ${Constants.font.monoCode};
+  font-family: ${Constants.font.code};
   background-color: ${Constants.system.pitchBlack};
   color: ${Constants.system.white};
   border-color: ${Constants.system.yellow};
@@ -27,7 +28,7 @@ const STYLES_PADDING = css`
 const STYLES_PRE = css`
   box-sizing: border-box;
   color: #666;
-  font-family: ${Constants.font.monoCode};
+  font-family: ${Constants.font.code};
   flex-shrink: 0;
   min-width: 32px;
   user-select: none;
@@ -36,13 +37,16 @@ const STYLES_PRE = css`
 const STYLES_CODE = css`
   box-sizing: border-box;
   background-color: ${Constants.system.pitchBlack};
-  font-family: ${Constants.font.monoCode};
+  font-family: ${Constants.font.code};
   color: ${Constants.system.gray};
   width: 100%;
   padding-left: 16px;
 `;
 
 export class CodeBlock extends React.Component {
+  componentDidMount() {
+    Prism.highlightAll();
+  }
   render() {
     const codeBlockContent = this.props.children + "";
     const codeBlockToken = codeBlockContent.split("\n");
@@ -54,7 +58,7 @@ export class CodeBlock extends React.Component {
           return (
             <div css={STYLES_PADDING}>
               <div css={STYLES_PRE}>{index}</div>
-              <div css={STYLES_CODE}>{element}</div>
+              <div css={STYLES_CODE}><pre><code className="language-javascript">{element}</code></pre></div>
             </div>
           );
         })}

package.json

@@ -29,10 +29,10 @@
     }
   },
   "dependencies": {
+    "@babel/plugin-transform-runtime": "^7.10.4",
     "@babel/preset-env": "^7.10.4",
     "@babel/register": "^7.10.4",
     "@babel/runtime": "^7.10.4",
-    "@babel/plugin-transform-runtime": "^7.10.4",
     "@emotion/babel-preset-css-prop": "^10.0.27",
     "@emotion/cache": "11.0.0-next.12",
     "@emotion/core": "^10.0.28",
@@ -52,6 +52,7 @@
     "isomorphic-fetch": "^2.2.1",
     "moment": "^2.27.0",
     "next": "^9.4.4",
+    "prismjs": "^1.20.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-draggable": "^4.4.3",
@@ -62,15 +63,17 @@
     "ws": "^7.3.0"
   },
   "devDependencies": {
-    "@rollup/plugin-json": "^4.1.0",
     "@babel/plugin-transform-runtime": "^7.10.4",
     "@babel/preset-env": "^7.10.4",
+    "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^8.1.0",
+    "css-loader": "^3.6.0",
     "electron": "^9.0.5",
     "electron-builder": "^22.7.0",
     "rollup": "^2.18.1",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-terser": "^6.1.0"
+    "rollup-plugin-terser": "^6.1.0",
+    "style-loader": "^1.2.1"
   }
 }

pages/_app.js

@@ -9,6 +9,8 @@ import {
   injectTooltipStyles,
 } from "~/common/styles/global";
 
+import "./css/prism.css";
+
 // NOTE(wwwjim):
 // https://nextjs.org/docs/advanced-features/custom-app
 function MyApp({ Component, pageProps }) {

pages/css/prism.css

@@ -0,0 +1,130 @@
+/* PrismJS 1.20.0
+https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript */
+/**
+ * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
+ * Based on https://github.com/chriskempson/tomorrow-theme
+ * @author Rose Pritchard
+ */
+
+@font-face {
+	font-family: 'jet-brains-regular';
+	src: url('/static/JetBrainsMono-Regular.woff');
+}
+
+code[class*="language-javascript"],
+pre[class*="language-javascript"] {
+	color:"#e5e5e5";
+	background: none;
+	font-family: 'jet-brains-regular', Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	font-size: 12px;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+
+}
+
+/* Code blocks */
+pre[class*="language-javascript"] {
+	padding: none;
+	margin: none;
+	overflow: auto;
+}
+
+:not(pre) > code[class*="language-javascript"],
+pre[class*="language-javascript"] {
+	background:none;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-javascript"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.block-comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #999;
+}
+
+.token.punctuation {
+	color: #ccc;
+}
+
+.token.tag,
+.token.attr-name,
+.token.namespace,
+.token.deleted {
+	color: #e2777a;
+}
+
+.token.function-name {
+	color: #6196cc;
+}
+
+.token.boolean,
+.token.number,
+.token.function {
+	color: #f08d49;
+}
+
+.token.property,
+.token.class-name,
+.token.constant,
+.token.symbol {
+	color: #f8c555;
+}
+
+.token.selector,
+.token.important,
+.token.atrule,
+.token.keyword,
+.token.builtin {
+	color: #cc99cd;
+}
+
+.token.string,
+.token.char,
+.token.attr-value,
+.token.regex,
+.token.variable {
+	color: #7ec699;
+}
+
+.token.operator,
+.token.entity,
+.token.url {
+	color: #67cdcc;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+.token.inserted {
+	color: green;
+}
+