how do you make "code snippets" look presentable?
Hey, i'm trying to learn how to structure code snippets using the
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!Piccalilli
A (more) Modern CSS Reset
7 Replies
when you double click on the text in your inspector, you'll see it has normal line breaks between the selectors.
page source
Oh that makes more sense, thank you
could anyone help with remainder of the questions please?
1. they are using line-height to create spacing between the lines.
3.make sure all the leading spaces are removed from your html. Everything inside <code> will show, also linebreaks and spaces
https://codepen.io/MarkBoots/pen/JjQYKPx
ah that really helps, thank you. Doesn't not indenting the tags cause semantic issues? or does the browser sort that out?
no, you could remove every space of the whole document, the browser doesn't care. as you can see in the inspector, the browser knows what to do
ah good to know, thanks for the help