how do you make "code snippets" look presentable?
Hey, i'm trying to learn how to structure code snippets using the
1. How would i add space between the text? On the example website, it seems like there's padding/margin above the elements but there is a mix of
2. On the example website, there's a
3. When highlighting the text on the example website, it's all in formation, however when i highlight the text in my example, it has space before each line and space above and below the content. How would i stop this from happening? (see third image for this example)
4. In the example website, the
I'd appreciate any insight and any tips anyone has regarding setting these layouts up, thanks in advance!
pre and code tag nicely. I'm referencing an example on this website as i'd like to know how some things are done (https://piccalil.li/blog/a-more-modern-css-reset/) and my attempt is here (https://codepen.io/deerCabin/pen/VwJvZMg). I have a few questions regarding this:1. How would i add space between the text? On the example website, it seems like there's padding/margin above the elements but there is a mix of
span tags and raw text, the raw text of which margin/padding top cannot be added to, so i'm not entirely sure if this is the method? I also don't see any margin/padding set whilst looking in the dev tools. (see the first image for this example.)2. On the example website, there's a
span tag containing the text "*, *::before, *::after" with each selector displaying underneath eachother on the page. I have a similar layout in my example however mine display next to eachother as that's how they're written. How would i allow them to wrap? perhaps text-wrap? (see second image for this example)3. When highlighting the text on the example website, it's all in formation, however when i highlight the text in my example, it has space before each line and space above and below the content. How would i stop this from happening? (see third image for this example)
4. In the example website, the
span container "*, *::before, *::after" and "{" are on different lines, which would make them display under eachother, which is the way it behaves on mine, however, they're next to eachother on the example website, how is this done? (see image 4 for this example)I'd appreciate any insight and any tips anyone has regarding setting these layouts up, thanks in advance!
