Technical Documentation Preoject Help - Code Snippets

HTML-CSS
1

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
2

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

3

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

4

How about textarea?

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

Happy coding

1 Like
5

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

6

Hi @Joseph1205

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

7

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

It also doesnt really help for styling

8 
<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.

9

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.

10

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

11

@Teller Still no good.

12

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.