mirror of https://github.com/lukechilds/docs.git
Thomas Osmonson
4 years ago
19 changed files with 1131 additions and 208 deletions
@ -1,100 +0,0 @@ |
|||||
import React, { useContext } from 'react'; |
|
||||
import { LiveProvider, LiveContext, LivePreview } from 'react-live'; |
|
||||
import { |
|
||||
Flex, |
|
||||
Button, |
|
||||
Box, |
|
||||
CodeBlock as BaseCodeBlock, |
|
||||
space, |
|
||||
useClipboard, |
|
||||
BoxProps, |
|
||||
} from '@blockstack/ui'; |
|
||||
import { CodeEditor } from '@components/code-editor'; |
|
||||
import { Text } from '@components/typography'; |
|
||||
import { border } from '@common/utils'; |
|
||||
|
|
||||
const Error = () => { |
|
||||
const { error } = useContext(LiveContext); |
|
||||
|
|
||||
return error ? <BaseCodeBlock mt={space('base')} code={error} /> : null; |
|
||||
}; |
|
||||
|
|
||||
export const liveEditorStyle = { |
|
||||
fontSize: 14, |
|
||||
marginBottom: 24, |
|
||||
marginTop: 24, |
|
||||
overflowX: 'auto', |
|
||||
fontFamily: 'Menlo,monospace', |
|
||||
borderRadius: 10, |
|
||||
}; |
|
||||
|
|
||||
export const liveErrorStyle = { |
|
||||
fontFamily: 'Fira Mono, monospace', |
|
||||
fontSize: 14, |
|
||||
padding: '1em', |
|
||||
overflowX: 'auto', |
|
||||
color: 'white', |
|
||||
marginTop: '16px', |
|
||||
border: '1px solid var(--colors-border)', |
|
||||
backgroundColor: 'var(--colors-bg-light)', |
|
||||
}; |
|
||||
|
|
||||
export const LiveCodePreview = (props: any) => ( |
|
||||
<Box fontFamily="body"> |
|
||||
<Box |
|
||||
as={LivePreview} |
|
||||
boxShadow="mid" |
|
||||
border={border()} |
|
||||
borderRadius="6px" |
|
||||
p={space('base')} |
|
||||
mb={space('base')} |
|
||||
{...props} |
|
||||
/> |
|
||||
</Box> |
|
||||
); |
|
||||
|
|
||||
const Label = (props: BoxProps) => ( |
|
||||
<Text fontWeight={500} fontFamily="body" fontSize="12px" {...props} /> |
|
||||
); |
|
||||
|
|
||||
export const JsxEditor = ({ liveProviderProps, editorCode, handleCodeChange, language }) => { |
|
||||
const { hasCopied, onCopy } = useClipboard(editorCode); |
|
||||
return ( |
|
||||
<LiveProvider {...liveProviderProps}> |
|
||||
<Box mb={space('extra-tight')}> |
|
||||
<Label>Preview</Label> |
|
||||
</Box> |
|
||||
<LiveCodePreview /> |
|
||||
|
|
||||
<Flex justify="space-between" fontFamily="'Inter'" align="flex-end" mb={space('tight')}> |
|
||||
<Label>Editable example</Label> |
|
||||
<Button onClick={onCopy} size="sm" mode="secondary"> |
|
||||
{hasCopied ? 'Copied!' : 'Copy example code'} |
|
||||
</Button> |
|
||||
</Flex> |
|
||||
<CodeEditor value={editorCode} onChange={handleCodeChange} language={language} /> |
|
||||
<Error /> |
|
||||
</LiveProvider> |
|
||||
); |
|
||||
}; |
|
||||
|
|
||||
export const Preview = ({ liveProviderProps }) => ( |
|
||||
<Box> |
|
||||
<LiveProvider {...liveProviderProps}> |
|
||||
<LiveCodePreview /> |
|
||||
</LiveProvider> |
|
||||
</Box> |
|
||||
); |
|
||||
|
|
||||
export const SimpleCodeBlock = ({ editorCode, language, ...rest }) => ( |
|
||||
<BaseCodeBlock |
|
||||
borderTop={'1px solid rgb(39, 41, 46)'} |
|
||||
borderBottom={'1px solid rgb(39, 41, 46)'} |
|
||||
borderLeft={['none', '1px solid rgb(39, 41, 46)', '1px solid rgb(39, 41, 46)']} |
|
||||
borderRight={['none', '1px solid rgb(39, 41, 46)', '1px solid rgb(39, 41, 46)']} |
|
||||
borderRadius={['unset', 'unset', '12px', '12px']} |
|
||||
code={editorCode} |
|
||||
language={language} |
|
||||
{...rest} |
|
||||
/> |
|
||||
); |
|
||||
@ -0,0 +1,230 @@ |
|||||
|
import React from 'react'; |
||||
|
import Highlight from 'prism-react-renderer'; |
||||
|
import { Box, Flex, space, useTheme } from '@blockstack/ui'; |
||||
|
import { GrammaticalToken, GetGrammaticalTokenProps, RenderProps, Language } from './types'; |
||||
|
import Prism from 'prism-react-renderer/prism'; |
||||
|
import { theme } from '@components/highlighter/prism-theme'; |
||||
|
import './language-definition'; |
||||
|
import { css } from '@styled-system/css'; |
||||
|
|
||||
|
const startPad = (n: number, z = 2, s = '0') => |
||||
|
(n + '').length <= z ? ['', '-'][+(n < 0)] + (s.repeat(z) + Math.abs(n)).slice(-1 * z) : n + ''; |
||||
|
|
||||
|
const LINE_NUMBER_WIDTH = 50; |
||||
|
const getLineNumber = (n: number, length: number) => startPad(n + 1, length.toString().length); |
||||
|
|
||||
|
const Tokens = ({ |
||||
|
tokens, |
||||
|
getTokenProps, |
||||
|
showLineNumbers, |
||||
|
...rest |
||||
|
}: { |
||||
|
tokens: GrammaticalToken[]; |
||||
|
getTokenProps: GetGrammaticalTokenProps; |
||||
|
showLineNumbers?: boolean; |
||||
|
}) => { |
||||
|
const bsTheme = useTheme(); |
||||
|
const pl = showLineNumbers |
||||
|
? [`calc(${LINE_NUMBER_WIDTH}px + ${(bsTheme as any).sizes['base']})`] |
||||
|
: ['unset', 'unset', 'base', 'base']; |
||||
|
|
||||
|
return ( |
||||
|
<Box pl={pl} pr="base" position="relative" zIndex={2} {...rest}> |
||||
|
{tokens.map( |
||||
|
(token, key) => |
||||
|
token.content !== '// highlight' && ( |
||||
|
<Box py="2px" display="inline-block" {...getTokenProps({ token, key })} /> |
||||
|
) |
||||
|
)} |
||||
|
</Box> |
||||
|
); |
||||
|
}; |
||||
|
const LineNumber = ({ number, length, ...rest }: { number: number; length: number }) => ( |
||||
|
<Flex |
||||
|
textAlign="right" |
||||
|
pr={space('tight')} |
||||
|
pl={space('tight')} |
||||
|
width={LINE_NUMBER_WIDTH} |
||||
|
borderRight="1px solid" |
||||
|
borderRightColor="inherit" |
||||
|
color="ink.400" |
||||
|
flexShrink={0} |
||||
|
style={{ userSelect: 'none' }} |
||||
|
position="absolute" |
||||
|
left={0} |
||||
|
height="100%" |
||||
|
align="baseline" |
||||
|
justify="center" |
||||
|
zIndex={1} |
||||
|
css={css({ |
||||
|
color: 'rgba(255,255,255,0.6)', |
||||
|
whiteSpace: 'pre', |
||||
|
fontFamily: 'Fira Code, Consolata, monospace', |
||||
|
fontSize: '14.556040756914118px', |
||||
|
lineHeight: '24px', |
||||
|
padding: '2px 0', |
||||
|
'::before': { |
||||
|
content: "''", |
||||
|
marginTop: '-0.47483499999999995em', |
||||
|
display: 'block', |
||||
|
height: 0, |
||||
|
}, |
||||
|
'::after': { |
||||
|
content: "''", |
||||
|
marginBottom: '-0.493835em', |
||||
|
display: 'block', |
||||
|
height: 0, |
||||
|
}, |
||||
|
})} |
||||
|
{...rest} |
||||
|
> |
||||
|
{getLineNumber(number, length)} |
||||
|
</Flex> |
||||
|
); |
||||
|
|
||||
|
const Line = ({ |
||||
|
tokens, |
||||
|
getTokenProps, |
||||
|
index, |
||||
|
length, |
||||
|
showLineNumbers, |
||||
|
hideLineHover, |
||||
|
highlighted, |
||||
|
...rest |
||||
|
}: { |
||||
|
tokens: GrammaticalToken[]; |
||||
|
index: number; |
||||
|
length: number; |
||||
|
getTokenProps: GetGrammaticalTokenProps; |
||||
|
showLineNumbers?: boolean; |
||||
|
hideLineHover?: boolean; |
||||
|
highlighted?: boolean; |
||||
|
}) => { |
||||
|
const highlightedStyle = { |
||||
|
bg: ['unset', 'unset', 'ink.900'], |
||||
|
borderColor: ['ink.900', 'ink.900', 'ink.600'], |
||||
|
}; |
||||
|
const hasHighlightComment = !!tokens.find(token => token.content === '// highlight'); |
||||
|
const isHighlighted = highlighted || hasHighlightComment; |
||||
|
const highlighedProps = isHighlighted ? highlightedStyle : {}; |
||||
|
|
||||
|
return ( |
||||
|
<Flex |
||||
|
height="loose" |
||||
|
align="baseline" |
||||
|
borderColor="ink.900" |
||||
|
_hover={hideLineHover ? undefined : highlightedStyle} |
||||
|
position="relative" |
||||
|
{...highlighedProps} |
||||
|
{...rest} |
||||
|
> |
||||
|
{showLineNumbers ? <LineNumber number={index} length={length} /> : null} |
||||
|
<Tokens showLineNumbers={showLineNumbers} getTokenProps={getTokenProps} tokens={tokens} /> |
||||
|
</Flex> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
const Spacer = ({ showLineNumbers }: { showLineNumbers?: boolean }) => ( |
||||
|
<Flex height="base-loose" bg="ink" width="100%"> |
||||
|
{showLineNumbers && ( |
||||
|
<Box |
||||
|
height="base-loose" |
||||
|
borderRight="1px solid" |
||||
|
borderRightColor="ink.900" |
||||
|
width={`${LINE_NUMBER_WIDTH}px`} |
||||
|
/> |
||||
|
)} |
||||
|
</Flex> |
||||
|
); |
||||
|
const Lines = ({ |
||||
|
tokens: lines, |
||||
|
getLineProps, |
||||
|
getTokenProps, |
||||
|
className, |
||||
|
showLineNumbers, |
||||
|
hideLineHover, |
||||
|
highlightedLines, |
||||
|
}: { |
||||
|
showLineNumbers?: boolean; |
||||
|
hideLineHover?: boolean; |
||||
|
highlightedLines?: number[]; |
||||
|
} & RenderProps) => { |
||||
|
return ( |
||||
|
<Box display="block" className={className}> |
||||
|
<Box display="block" style={{ fontFamily: 'Fira Code' }}> |
||||
|
<Spacer showLineNumbers={showLineNumbers} /> |
||||
|
{lines.map((tokens, i) => ( |
||||
|
<Box |
||||
|
css={css({ |
||||
|
'& > *': { |
||||
|
fontFamily: 'Fira Code, Consolata, monospace', |
||||
|
fontSize: '14.556040756914118px', |
||||
|
lineHeight: '24px', |
||||
|
padding: '0.05px 0', |
||||
|
'::before': { |
||||
|
content: "''", |
||||
|
marginTop: '-0.47483499999999995em', |
||||
|
display: 'block', |
||||
|
height: 0, |
||||
|
}, |
||||
|
'::after': { |
||||
|
content: "''", |
||||
|
marginBottom: '-0.493835em', |
||||
|
display: 'block', |
||||
|
height: 0, |
||||
|
}, |
||||
|
}, |
||||
|
})} |
||||
|
> |
||||
|
<Line |
||||
|
index={i} |
||||
|
tokens={tokens} |
||||
|
getTokenProps={getTokenProps} |
||||
|
length={lines.length + 1} |
||||
|
showLineNumbers={showLineNumbers} |
||||
|
highlighted={ |
||||
|
highlightedLines?.length && !!highlightedLines.find(lineNumber => lineNumber === i) |
||||
|
} |
||||
|
hideLineHover={hideLineHover || lines.length < 3} |
||||
|
{...getLineProps({ line: tokens, key: i })} |
||||
|
/> |
||||
|
</Box> |
||||
|
))} |
||||
|
<Spacer showLineNumbers={showLineNumbers} /> |
||||
|
</Box> |
||||
|
</Box> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export interface HighlighterProps { |
||||
|
code: string; |
||||
|
language?: Language; |
||||
|
showLineNumbers?: boolean; |
||||
|
hideLineHover?: boolean; |
||||
|
highlightedLines?: number[]; |
||||
|
} |
||||
|
|
||||
|
export const Highlighter = React.memo( |
||||
|
({ |
||||
|
code, |
||||
|
language = 'clarity', |
||||
|
showLineNumbers, |
||||
|
hideLineHover, |
||||
|
highlightedLines, |
||||
|
}: HighlighterProps) => { |
||||
|
return ( |
||||
|
<Highlight Prism={Prism} theme={theme} code={code} language={language as any}> |
||||
|
{props => ( |
||||
|
<Lines |
||||
|
showLineNumbers={showLineNumbers} |
||||
|
highlightedLines={highlightedLines} |
||||
|
hideLineHover={hideLineHover} |
||||
|
{...props} |
||||
|
/> |
||||
|
)} |
||||
|
</Highlight> |
||||
|
); |
||||
|
} |
||||
|
); |
||||
|
|
||||
|
Highlighter.displayName = 'Highlighter'; |
||||
@ -0,0 +1,117 @@ |
|||||
|
// @ts-nocheck
|
||||
|
import Prism from 'prism-react-renderer/prism'; |
||||
|
|
||||
|
(function (Prism) { |
||||
|
// Functions to construct regular expressions
|
||||
|
// simple form
|
||||
|
// e.g. (interactive ... or (interactive)
|
||||
|
function simple_form(name) { |
||||
|
return RegExp('(\\()' + name + '(?=[\\s\\)])'); |
||||
|
} |
||||
|
// booleans and numbers
|
||||
|
function primitive(pattern) { |
||||
|
return RegExp('([\\s([])' + pattern + '(?=[\\s)])'); |
||||
|
} |
||||
|
|
||||
|
// Patterns in regular expressions
|
||||
|
|
||||
|
// Open parenthesis for look-behind
|
||||
|
const par = '(\\()'; |
||||
|
const endpar = '(?=\\))'; |
||||
|
// End the pattern with look-ahead space
|
||||
|
const space = '(?=\\s)'; |
||||
|
|
||||
|
const language = { |
||||
|
// Three or four semicolons are considered a heading.
|
||||
|
heading: { |
||||
|
pattern: /;;;.*/, |
||||
|
alias: ['comment', 'title'], |
||||
|
}, |
||||
|
comment: /;;.*/, |
||||
|
string: [ |
||||
|
{ |
||||
|
pattern: /"(?:[^"\\]|\\.)*"/, |
||||
|
greedy: true, |
||||
|
}, |
||||
|
{ |
||||
|
pattern: /0x[0-9a-fA-F]*/, |
||||
|
greedy: true, |
||||
|
}, |
||||
|
], |
||||
|
symbol: { |
||||
|
pattern: /'[^()#'\s]+/, |
||||
|
greedy: true, |
||||
|
}, |
||||
|
keyword: [ |
||||
|
{ |
||||
|
pattern: RegExp( |
||||
|
par + |
||||
|
'(?:or|and|xor|not|begin|let|if|ok|err|unwrap\\!|unwrap-err\\!|unwrap-panic|unwrap-err-panic|match|try\\!|asserts\\!|\ |
||||
|
map-get\\?|var-get|contract-map-get\\?|get|tuple|\ |
||||
|
define-public|define-private|define-constant|define-map|define-data-var|\ |
||||
|
define-fungible-token|define-non-fungible-token|\ |
||||
|
define-read-only)' + |
||||
|
space |
||||
|
), |
||||
|
lookbehind: true, |
||||
|
}, |
||||
|
{ |
||||
|
pattern: RegExp(par + '(?:is-eq|is-some|is-none|is-ok|is-er)' + space), |
||||
|
lookbehind: true, |
||||
|
}, |
||||
|
{ |
||||
|
pattern: RegExp( |
||||
|
par + |
||||
|
'(?:var-set|map-set|map-delete|map-insert|\ |
||||
|
ft-transfer\\?|nft-transfer\\?|nft-mint\\?|ft-mint\\?|nft-get-owner\\?|ft-get-balance\\?|\ |
||||
|
contract-call\\?)' + |
||||
|
space |
||||
|
), |
||||
|
lookbehind: true, |
||||
|
}, |
||||
|
{ |
||||
|
pattern: RegExp( |
||||
|
par + |
||||
|
'(?:list|map|filter|fold|len|concat|append|as-max-len\\?|to-int|to-uint|\ |
||||
|
buff|hash160|sha256|sha512|sha512/256|keccak256|true|false|none)' + |
||||
|
space |
||||
|
), |
||||
|
lookbehind: true, |
||||
|
}, |
||||
|
{ |
||||
|
pattern: RegExp( |
||||
|
par + |
||||
|
'(?:as-contract|contract-caller|tx-sender|block-height|at-block|get-block-info\\?)' + |
||||
|
space |
||||
|
), |
||||
|
lookbehind: true, |
||||
|
}, |
||||
|
{ |
||||
|
pattern: RegExp(par + '(?:is-eq|is-some|is-none|is-ok|is-err)' + space), |
||||
|
lookbehind: true, |
||||
|
}, |
||||
|
], |
||||
|
boolean: /(?:false|true|none)/, |
||||
|
number: { |
||||
|
pattern: primitive('[-]?u?\\d+'), |
||||
|
lookbehind: true, |
||||
|
}, |
||||
|
address: { |
||||
|
pattern: /([\s()])(?:\'[0123456789ABCDEFGHJKMNPQRSTVWXYZ]{28,41})(?=[()\s]|$)/, |
||||
|
lookbehind: true, |
||||
|
}, |
||||
|
operator: { |
||||
|
pattern: /(\()(?:[-+*\/]|[<>]=?|=>?)(?=[()\s]|$)/, |
||||
|
lookbehind: true, |
||||
|
}, |
||||
|
function: { |
||||
|
pattern: /(\()[^()'\s]+(?=[()\s]|$)/, |
||||
|
lookbehind: true, |
||||
|
}, |
||||
|
punctuation: /[()']/, |
||||
|
}; |
||||
|
|
||||
|
if (Prism && Prism.languages) { |
||||
|
Prism.languages.clarity = language; |
||||
|
} |
||||
|
})(Prism); |
||||
@ -0,0 +1,205 @@ |
|||||
|
code[class*="language-"], |
||||
|
pre[class*="language-"] { |
||||
|
text-align: left; |
||||
|
white-space: pre; |
||||
|
word-spacing: normal; |
||||
|
word-break: normal; |
||||
|
word-wrap: normal; |
||||
|
color: #eee; |
||||
|
background: #2f2f2f; |
||||
|
font-family: Roboto Mono, monospace; |
||||
|
font-size: 1em; |
||||
|
line-height: 1.5em; |
||||
|
|
||||
|
-moz-tab-size: 4; |
||||
|
-o-tab-size: 4; |
||||
|
tab-size: 4; |
||||
|
|
||||
|
-webkit-hyphens: none; |
||||
|
-moz-hyphens: none; |
||||
|
-ms-hyphens: none; |
||||
|
hyphens: none; |
||||
|
} |
||||
|
|
||||
|
code[class*="language-"]::-moz-selection, |
||||
|
pre[class*="language-"]::-moz-selection, |
||||
|
code[class*="language-"] ::-moz-selection, |
||||
|
pre[class*="language-"] ::-moz-selection { |
||||
|
background: #363636; |
||||
|
} |
||||
|
|
||||
|
code[class*="language-"]::selection, |
||||
|
pre[class*="language-"]::selection, |
||||
|
code[class*="language-"] ::selection, |
||||
|
pre[class*="language-"] ::selection { |
||||
|
background: #363636; |
||||
|
} |
||||
|
|
||||
|
:not(pre) > code[class*="language-"] { |
||||
|
white-space: normal; |
||||
|
border-radius: 0.2em; |
||||
|
padding: 0.1em; |
||||
|
} |
||||
|
|
||||
|
pre[class*="language-"] { |
||||
|
overflow: auto; |
||||
|
position: relative; |
||||
|
margin: 0.5em 0; |
||||
|
padding: 1.25em 1em; |
||||
|
} |
||||
|
|
||||
|
.language-css > code, |
||||
|
.language-sass > code, |
||||
|
.language-scss > code { |
||||
|
color: #fd9170; |
||||
|
} |
||||
|
|
||||
|
[class*="language-"] .namespace { |
||||
|
opacity: 0.7; |
||||
|
} |
||||
|
|
||||
|
.token.atrule { |
||||
|
color: #c792ea; |
||||
|
} |
||||
|
|
||||
|
.token.attr-name { |
||||
|
color: #ffcb6b; |
||||
|
} |
||||
|
|
||||
|
.token.attr-value { |
||||
|
color: #a5e844; |
||||
|
} |
||||
|
|
||||
|
.token.attribute { |
||||
|
color: #a5e844; |
||||
|
} |
||||
|
|
||||
|
.token.boolean { |
||||
|
color: #c792ea; |
||||
|
} |
||||
|
|
||||
|
.token.builtin { |
||||
|
color: #ffcb6b; |
||||
|
} |
||||
|
|
||||
|
.token.cdata { |
||||
|
color: #80cbc4; |
||||
|
} |
||||
|
|
||||
|
.token.char { |
||||
|
color: #80cbc4; |
||||
|
} |
||||
|
|
||||
|
.token.class { |
||||
|
color: #ffcb6b; |
||||
|
} |
||||
|
|
||||
|
.token.class-name { |
||||
|
color: #f2ff00; |
||||
|
} |
||||
|
|
||||
|
.token.comment { |
||||
|
color: #616161; |
||||
|
} |
||||
|
|
||||
|
.token.constant { |
||||
|
color: #c792ea; |
||||
|
} |
||||
|
|
||||
|
.token.deleted { |
||||
|
color: #ff6666; |
||||
|
} |
||||
|
|
||||
|
.token.doctype { |
||||
|
color: #616161; |
||||
|
} |
||||
|
|
||||
|
.token.entity { |
||||
|
color: #ff6666; |
||||
|
} |
||||
|
|
||||
|
.token.function { |
||||
|
color: #c792ea; |
||||
|
} |
||||
|
|
||||
|
.token.hexcode { |
||||
|
color: #f2ff00; |
||||
|
} |
||||
|
|
||||
|
.token.id { |
||||
|
color: #c792ea; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.token.important { |
||||
|
color: #c792ea; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.token.inserted { |
||||
|
color: #80cbc4; |
||||
|
} |
||||
|
|
||||
|
.token.keyword { |
||||
|
color: #c792ea; |
||||
|
} |
||||
|
|
||||
|
.token.number { |
||||
|
color: #fd9170; |
||||
|
} |
||||
|
|
||||
|
.token.operator { |
||||
|
color: #89ddff; |
||||
|
} |
||||
|
|
||||
|
.token.prolog { |
||||
|
color: #616161; |
||||
|
} |
||||
|
|
||||
|
.token.property { |
||||
|
color: #80cbc4; |
||||
|
} |
||||
|
|
||||
|
.token.pseudo-class { |
||||
|
color: #a5e844; |
||||
|
} |
||||
|
|
||||
|
.token.pseudo-element { |
||||
|
color: #a5e844; |
||||
|
} |
||||
|
|
||||
|
.token.punctuation { |
||||
|
color: #89ddff; |
||||
|
} |
||||
|
|
||||
|
.token.regex { |
||||
|
color: #f2ff00; |
||||
|
} |
||||
|
|
||||
|
.token.selector { |
||||
|
color: #ff6666; |
||||
|
} |
||||
|
|
||||
|
.token.string { |
||||
|
color: #a5e844; |
||||
|
} |
||||
|
|
||||
|
.token.symbol { |
||||
|
color: #c792ea; |
||||
|
} |
||||
|
|
||||
|
.token.tag { |
||||
|
color: #ff6666; |
||||
|
} |
||||
|
|
||||
|
.token.unit { |
||||
|
color: #fd9170; |
||||
|
} |
||||
|
|
||||
|
.token.url { |
||||
|
color: #ff6666; |
||||
|
} |
||||
|
|
||||
|
.token.variable { |
||||
|
color: #ff6666; |
||||
|
} |
||||
@ -0,0 +1,140 @@ |
|||||
|
import { PrismTheme } from 'prism-react-renderer'; |
||||
|
|
||||
|
export const theme: PrismTheme = { |
||||
|
plain: { |
||||
|
color: 'rgba(255,255,255,1)', |
||||
|
backgroundColor: '#0f111a', |
||||
|
}, |
||||
|
styles: [ |
||||
|
{ |
||||
|
types: ['string'], |
||||
|
style: { |
||||
|
color: 'rgb(195, 232, 141)', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
types: ['boolean'], |
||||
|
style: { |
||||
|
color: 'rgb(255, 156, 172)', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
types: ['number', 'keyword', 'operator'], |
||||
|
style: { |
||||
|
color: 'rgb(247, 140, 108)', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
types: ['comment'], |
||||
|
style: { |
||||
|
color: 'rgba(255,255,255,0.6)', |
||||
|
fontStyle: 'italic', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
types: ['punctuation', 'builtin'], |
||||
|
style: { |
||||
|
color: 'rgb(137, 221, 255)', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
types: ['tag'], |
||||
|
style: { |
||||
|
color: 'rgb(240, 113, 120)', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
types: ['attr-name'], |
||||
|
style: { |
||||
|
color: 'rgb(255, 203, 107)', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
types: ['function'], |
||||
|
style: { |
||||
|
color: 'rgb(130, 170, 255)', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
types: ['constant'], |
||||
|
style: { |
||||
|
color: 'rgb(137, 221, 255)', |
||||
|
fontStyle: 'italic', |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
// export const theme: PrismTheme = {
|
||||
|
// plain: {
|
||||
|
// color: '#fff',
|
||||
|
// backgroundColor: 'transparent',
|
||||
|
// },
|
||||
|
// styles: [
|
||||
|
// {
|
||||
|
// types: ['prolog'],
|
||||
|
// style: {
|
||||
|
// color: 'rgb(0, 0, 128)',
|
||||
|
// },
|
||||
|
// },
|
||||
|
// {
|
||||
|
// types: ['comment', 'punctuation'],
|
||||
|
// style: {
|
||||
|
// color: 'rgb(106, 153, 85)',
|
||||
|
// },
|
||||
|
// },
|
||||
|
// {
|
||||
|
// types: ['builtin', 'tag', 'changed', 'function', 'keyword'],
|
||||
|
// style: {
|
||||
|
// color: 'rgb(86, 156, 214)',
|
||||
|
// },
|
||||
|
// },
|
||||
|
// {
|
||||
|
// types: ['number', 'variable', 'inserted'],
|
||||
|
// style: {
|
||||
|
// color: '#A58FFF',
|
||||
|
// },
|
||||
|
// },
|
||||
|
// {
|
||||
|
// types: ['operator'],
|
||||
|
// style: {
|
||||
|
// color: 'rgb(212, 212, 212)',
|
||||
|
// },
|
||||
|
// },
|
||||
|
// {
|
||||
|
// types: ['constant'],
|
||||
|
// style: {
|
||||
|
// color: 'rgb(100, 102, 149)',
|
||||
|
// },
|
||||
|
// },
|
||||
|
// {
|
||||
|
// types: ['attr-name'],
|
||||
|
// style: {
|
||||
|
// color: 'rgb(156, 220, 254)',
|
||||
|
// },
|
||||
|
// },
|
||||
|
// {
|
||||
|
// types: ['car'],
|
||||
|
// style: {
|
||||
|
// color: 'rgb(156, 220, 254)',
|
||||
|
// },
|
||||
|
// },
|
||||
|
// {
|
||||
|
// types: ['deleted', 'string'],
|
||||
|
// style: {
|
||||
|
// color: '#FF7B48',
|
||||
|
// },
|
||||
|
// },
|
||||
|
// {
|
||||
|
// types: ['class-name'],
|
||||
|
// style: {
|
||||
|
// color: 'rgb(78, 201, 176)',
|
||||
|
// },
|
||||
|
// },
|
||||
|
// {
|
||||
|
// types: ['char'],
|
||||
|
// style: {
|
||||
|
// color: '#FF7B48',
|
||||
|
// },
|
||||
|
// },
|
||||
|
// ],
|
||||
|
// };
|
||||
@ -0,0 +1,90 @@ |
|||||
|
import * as React from 'react'; |
||||
|
|
||||
|
export interface GrammaticalToken { |
||||
|
types: string[]; |
||||
|
content: string; |
||||
|
empty?: boolean; |
||||
|
} |
||||
|
|
||||
|
export interface StyleObj { |
||||
|
[key: string]: string | number | null; |
||||
|
} |
||||
|
|
||||
|
export interface GrammaticalTokenOutputProps { |
||||
|
key?: React.Key; |
||||
|
style?: StyleObj; |
||||
|
className: string; |
||||
|
children: string; |
||||
|
[otherProp: string]: any; |
||||
|
} |
||||
|
|
||||
|
export interface GrammaticalTokenInputProps { |
||||
|
key?: React.Key; |
||||
|
style?: StyleObj; |
||||
|
className?: string; |
||||
|
token: GrammaticalToken; |
||||
|
[otherProp: string]: any; |
||||
|
} |
||||
|
|
||||
|
export interface LineInputProps { |
||||
|
key?: React.Key; |
||||
|
style?: StyleObj; |
||||
|
className?: string; |
||||
|
line: GrammaticalToken[]; |
||||
|
[otherProp: string]: any; |
||||
|
} |
||||
|
|
||||
|
export interface LineOutputProps { |
||||
|
key?: React.Key; |
||||
|
style?: StyleObj; |
||||
|
className: string; |
||||
|
[otherProps: string]: any; |
||||
|
} |
||||
|
|
||||
|
export interface RenderProps { |
||||
|
tokens: GrammaticalToken[][]; |
||||
|
className: string; |
||||
|
style: StyleObj; |
||||
|
getLineProps: (input: LineInputProps) => LineOutputProps; |
||||
|
getTokenProps: (input: GrammaticalTokenInputProps) => GrammaticalTokenOutputProps; |
||||
|
} |
||||
|
|
||||
|
export type GetGrammaticalTokenProps = ( |
||||
|
input: GrammaticalTokenInputProps |
||||
|
) => GrammaticalTokenOutputProps; |
||||
|
|
||||
|
export type Language = |
||||
|
| 'markup' |
||||
|
| 'bash' |
||||
|
| 'clarity' |
||||
|
| 'clike' |
||||
|
| 'c' |
||||
|
| 'cpp' |
||||
|
| 'css' |
||||
|
| 'javascript' |
||||
|
| 'jsx' |
||||
|
| 'coffeescript' |
||||
|
| 'actionscript' |
||||
|
| 'css-extr' |
||||
|
| 'diff' |
||||
|
| 'git' |
||||
|
| 'go' |
||||
|
| 'graphql' |
||||
|
| 'handlebars' |
||||
|
| 'json' |
||||
|
| 'less' |
||||
|
| 'lisp' |
||||
|
| 'makefile' |
||||
|
| 'markdown' |
||||
|
| 'objectivec' |
||||
|
| 'ocaml' |
||||
|
| 'python' |
||||
|
| 'reason' |
||||
|
| 'sass' |
||||
|
| 'scss' |
||||
|
| 'sql' |
||||
|
| 'stylus' |
||||
|
| 'tsx' |
||||
|
| 'typescript' |
||||
|
| 'wasm' |
||||
|
| 'yaml'; |
||||
Loading…
Reference in new issue