1 reply

Need help with <pre> tag styling

I want to style a <pre> tag with some JSX code, the final result I want it to be like one of the codeblocks in the https://react.dev website as shown in the image below. I dont mind the color scheme of the syntax highlighting as long as it is understandable JSX. The code I want to use in the pre tag will be this

<Scale
    labels = true
    half = false
    start = 'C'
    pressed = [0,1,2,3,4,5,6,7,8]
    color_black = '#ff0055' 
    color_white = '#aa0044'
    width = '600px'
/>

<Scale
    labels = true
    half = false
    start = 'C'
    pressed = [0,1,2,3,4,5,6,7,8]
    color_black = '#ff0055' 
    color_white = '#aa0044'
    width = '600px'
/>

I am using vanilla CSS and typescript to implement the component

React

The library for web and native user interfaces

KP-C

Kevin Powell - Community•3y ago•

1 reply

Senra

Need help with <pre> tag styling

<Scale
    labels = true
    half = false
    start = 'C'
    pressed = [0,1,2,3,4,5,6,7,8]
    color_black = '#ff0055' 
    color_white = '#aa0044'
    width = '600px'
/>

<Scale
    labels = true
    half = false
    start = 'C'
    pressed = [0,1,2,3,4,5,6,7,8]
    color_black = '#ff0055' 
    color_white = '#aa0044'
    width = '600px'
/>

I am using vanilla CSS and typescript to implement the component

React

The library for web and native user interfaces

Need help with <pre> tag styling

Similar Threads

Need help with <pre> tag styling

Similar Threads

Similar Threads

Similar Threads