Technical Documentation Preoject Help - Code Snippets

I’ve started my technical documentation project and need a little help. I’m trying to create a code snippet and am not sure how to go about it. I need it to be formated like it would in a pre element, but pre elements add unwanted indentation and spacing around the text. I don’t know what’s the best way to go about this. Please help!

2 Likes

You can use the code element with the style attribute set to “white-space: pre-line;” to achieve a preformatted look without extra indentation. This will maintain line breaks and spaces as in your original code.

Html  example:
<code style="white-space: pre-line;">
  Your code here
</code>

In css you can code white-space: pre-line.
@Joseph1205

I’ve tried it, but It doesnt keep ANY indentation which isnt really what I want.

How about textarea?

You could also use it with span and different classes to create coloured text.

Happy coding

1 Like

I’m not really sure how I would do it with textarea. Could you explain a little more please?

Hi @Joseph1205

Place your code snippets between the textarea tags.
The indentation and spacing will not change.

@Teller It doesnt seem to work. Could you provide an example please?

It also doesnt really help for styling

<textarea>
  function hello() {
   console.log("Hello World");
}

hello();
</textarea>

To style the code you could use span elements, with various classes.
textarea preserves lines, indentation, and spacing.

I tested it and it worked the same as pre. It adds extra indentation in-front of the text. Wrapping it around a pre is no good either.

Try giving it a width and height a little bit bigger than you need.

@Teller Still no good.