Kevin Powell - Community•2y ago

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

1 Reply

Jochem•2y ago

I don't generally like recommending libraries, but this is one of those cases where is just the best solution. Syntax highlighting is a hard problem. You'd have to build a parser for each language you want to support and then cut the contents of your code tag up to individually change the color of each part <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code >

: The Inline Code element - HTML: HyperText Markup Language | MDN

The HTML element displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code. By default, the content text is displayed using the user agent's default monospace font.

Gaming

Programming

Need help with <pre> tag styling