Implement highlighter and style it

This commit is contained in:
Hristo Nedelkov 2023-08-29 00:35:17 +03:00
parent 8175c60394
commit 6a821742be
2 changed files with 33 additions and 1 deletions

View File

@ -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

View File

@ -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>