Technical Doc. Page - Code snippets?


I would like to use a code snippet within a “paragraph” as an example.

When i researched, I found something like this ( see last lines of code! ):

But, as you see it doesn’t make it appear as text on my page ( which is what I want to achieve).

How could I make that code snippet show as text on my page?

You need to escape the HTML to remove special characters like this:

  • " is replaced with "
  • & is replaced with &
  • < is replaced with &lt;
  • > is replaced with &gt;

Thankfully there are online tools to do that!

Also put <pre> around your <code> that will make the code appear on separate lines and with the same whitespace that you have typed.

Thank you!! :grinning:

1 Like

Another question: How can I prevent the preview from scrolling up to the start of the page??
Every time I insert a new tag in the editor, this happens.

That’s just how Codepen works I think. It reloads the page when you add/change something, so the pages starts from the top. It gets annoying for long pages like the technical doc. page. I put in the nav bar right away so that I could use it instead of scrolling! :sweat_smile:

Actually there’s a way, I just remembered. Go to Settings>Behavior then disable Auto-Updating Preview. That way you will have to click Run to get your page to update.

Ah of course the nav bar :see_no_evil: !

But I went to settings instead…thanks again.

1 Like