Merge pull request #69 from filecoin-project/@tarafanlin/makerainbow

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,
@@ -214,3 +224,127 @@ export const injectGlobalStyles = () => css`
     }
   }
 `;
+
+/* prettier-ignore */
+export const injectCodeBlockStyles = () => css`
+  @font-face {
+    font-family: 'jet-brains-regular';
+    src: url('/static/JetBrainsMono-Regular.woff');
+  }
+
+  code[class*="language-javascript"],
+  pre[class*="language-javascript"] {
+    color:"#e5e5e5";
+    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;
+  }
+`;

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,18 @@ 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 +60,9 @@ export class CodeBlock extends React.Component {
           return (
             <div css={STYLES_PADDING}>
               <div css={STYLES_PRE}>{index}</div>
-              <div css={STYLES_CODE}>{element}</div>
+              <pre css={STYLES_CODE} className="language-javascript">
+                <code>{element}</code>
+              </pre>
             </div>
           );
         })}

package.json

@@ -53,6 +53,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",
@@ -63,9 +64,9 @@
     "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",
     "electron": "^9.0.5",
     "electron-builder": "^22.7.0",

pages/_app.js

@@ -7,6 +7,7 @@ import App from "next/app";
 import {
   injectGlobalStyles,
   injectTooltipStyles,
+  injectCodeBlockStyles,
 } from "~/common/styles/global";
 
 // NOTE(wwwjim):
@@ -16,6 +17,7 @@ function MyApp({ Component, pageProps }) {
     <CacheProvider value={cache}>
       <Global styles={injectGlobalStyles()} />
       <Global styles={injectTooltipStyles()} />
+      <Global styles={injectCodeBlockStyles()} />
       <Component {...pageProps} />
     </CacheProvider>
   );