Implement highlighter and style it
This commit is contained in:
parent
8175c60394
commit
6a821742be
|
@ -0,0 +1,28 @@
|
|||
import { YStack } from 'tamagui'
|
||||
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
|
||||
import { solarizedlight } from 'react-syntax-highlighter/dist/esm/styles/prism';
|
||||
type SyntaxHighlighterBoxProps = {
|
||||
rows: string[]
|
||||
}
|
||||
|
||||
const customStyle = {
|
||||
...solarizedlight,
|
||||
'pre[class*="language-"]': {
|
||||
...solarizedlight['pre[class*="language-"]'],
|
||||
backgroundColor: 'white',
|
||||
}
|
||||
};
|
||||
const SyntaxHighlighterBox = ({ rows }: SyntaxHighlighterBoxProps) => {
|
||||
return (
|
||||
<YStack style={{ borderRadius: '15px' }}>
|
||||
<SyntaxHighlighter
|
||||
language="bash"
|
||||
style={customStyle}
|
||||
showLineNumbers={true}
|
||||
>
|
||||
{`${rows.join('\n')}`}
|
||||
</SyntaxHighlighter>
|
||||
</YStack>
|
||||
)
|
||||
}
|
||||
export default SyntaxHighlighterBox
|
|
@ -2,6 +2,7 @@ import { XStack, Stack, YStack } from 'tamagui'
|
|||
import { InformationBox, Text } from '@status-im/components'
|
||||
import { CloseCircleIcon } from '@status-im/icons'
|
||||
import OsCard from './OsCard'
|
||||
import SyntaxHighlighterBox from './SyntaxHighlighter'
|
||||
|
||||
const ValidatorSetupInstall = () => {
|
||||
return (
|
||||
|
@ -52,11 +53,14 @@ const ValidatorSetupInstall = () => {
|
|||
</Text>
|
||||
</YStack>
|
||||
{/* Cards */}
|
||||
<XStack justifyContent={'space-between'} space={'$3'}>
|
||||
<XStack justifyContent={'space-between'} space={'$3'} margin={'50px 0px'}>
|
||||
<OsCard icon="/icons/MAC.png" name="Mac" isSelected={true}></OsCard>
|
||||
<OsCard icon="/icons/Linux.png" name="Linux"></OsCard>
|
||||
<OsCard icon="/icons/windows.png" name="Windows"></OsCard>
|
||||
</XStack>
|
||||
<SyntaxHighlighterBox
|
||||
rows={['brew tap ethereum/ethereum', 'brew install ethereum']}
|
||||
></SyntaxHighlighterBox>
|
||||
</YStack>
|
||||
</Stack>
|
||||
</YStack>
|
||||
|
|
Loading…
Reference in New Issue