NEED HELP_DOCUMENTATION PAGE. Try to MAKE A CODESNIPPET IN IT

1

Hello everyone, hope someone can help me out! i tried several things myself, but with no result.

The problem? i try to give my best for the projects, and i want to make a code snippet, with colors. via mdn webdocs, i try to learn it, via inspect element. "here screenshot for wat i want to reach’

aniway, i search up: how to make a <code snippet for a documentation page exc~ no results. i got stuck, and also verry weird is the code txt, that is actually just normal span txt, doesn’t enlarge. also no result setting !important after it, so i hope someone can help me.

this is the source for my documentation page. : https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes#Syntax

and the project: https://codepen.io/Den96/pen/NWqqGOp?editors=1100

Hope someone can help me out, and maybe i can help you with something you struggle with. thnx in advance!! :pray:

help
help1144×476 20.1 KB

2

Welcome back @Den96. Multi-line <code> snippets should nest in <pre> </pre> tags to preserve whitespace and line breaks. So you want something like this;

<pre>
  <code>
    @keyframes slidein {
      from {
        transform: translateX(0%);
      to }
      
      {
        transform: translateX(100%);
      }
    }
  </code>
</pre>
1 Like
3

You can also do code { white-space: pre; } in your CSS and skip the <pre> tag.

2 Likes
4

Thnx for the answers! @Roma brings me already a bit closer to the result, and i find out thnx to Roma’s hint ‘<code’ on mdn webdocs the code inline element, and also a redirect page wat pre does.
@chuckadams i try your alternative same helpfull solution too. thnx for the help!!! so that is actually like <center,
or so as in css, same function, but only then specified via css: text-align: center? So pre have 2 ways to be specified? Find out today about the code, and pre tag. Thnx for the Helpfull support, really appreciate it!!!~

:pray:
Love!!

5

I imagine the CSS property was named like that in order to behave like the <pre> tag, yes. Most CSS properties don’t line up that neatly though. The <center> tag is long deprecated; in fact I don’t think it even exists in HTML5.

6

Thnkyou verry much!!! i can only select one as solution, but infact you both give the solution!!!
@chuckadams, thnx for specifying the css way. implemented it, and it’s just how i wanted it! the pre text element, just hold the position, how you have written it! it’s all in shape now!

Wat a great community! THNX BOTH OF YOU!!! :pray:

love!!