mirror of
https://github.com/filecoin-project/slate.git
synced 2024-09-11 22:07:08 +03:00
design system: update code block with jet brains mono and rainbowy code
This commit is contained in:
parent
20e13ba04a
commit
b4c11525b8
@ -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 = {
|
||||
|
@ -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,
|
||||
|
@ -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>
|
||||
);
|
||||
})}
|
||||
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
@ -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 }) {
|
||||
|
130
pages/css/prism.css
Normal file
130
pages/css/prism.css
Normal file
@ -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;
|
||||
}
|
||||
|
BIN
public/static/JetBrainsMono-Bold.woff
Normal file
BIN
public/static/JetBrainsMono-Bold.woff
Normal file
Binary file not shown.
BIN
public/static/JetBrainsMono-Regular.woff
Normal file
BIN
public/static/JetBrainsMono-Regular.woff
Normal file
Binary file not shown.
Loading…
Reference in New Issue
Block a user