Forum code formatting style

Meta
1

It’s not widely known, but there are two ways to add blocks of code on our forum, and the “code” </> button in the editor does only one of them.

If you have some code like this:

*fake_choice
    #choice 1
    #choice 2

You can paste it into the editor, select it, and click on the </> button in the editor, and it will indent it with four spaces per line, like this:

    *fake_choice
        #choice 1
        #choice 2

That will make the code look like code. But you can also type three backtick marks on a line by themselves at the beginning and end of your code, like this:

```
*fake_choice
    #choice 1
    #choice 2
```

That will do the same thing as indenting it. Those backticks are called “code fences.”

Right now the code button </> makes four-space indents, but it turns out that there’s an option to make the code button use code fences instead.

If we change that setting, you’ll still be able to use four-space indents to write code, if you prefer it that way; it will only change the behavior of the code button.

What do you think?

EDIT: I turn on the setting. We can turn it off if folks don’t like it.

8 Likes
2

I didn’t know about the code fences, but I think I would prefer them as the default for the code formatting button–largely because they seem wonderfully useful. It’s easier for me to edit a large block of code, or one with complex indentation, if I’m not also handling four extra spaces at the beginning of lines.

2 Likes
3

I’d to find the backtick on my keyboard. I didn’t know about that.

But yeah, no added indents sounds good.

4

OK, I’ve turned it on. Now if you paste some code, select it, and click the code button, it adds backtick code fences, or if you just click the code button without selecting anything, it adds this to your post:

```
type or paste code here
```

We can change it back if people don’t seem to like it. (Remember, four-space indent still works.)

2 Likes
5

What do you mean by four space indent?

6

Four space indent is when you add four spaces at the start of the line to make it look like code, like this:

    this is code
7

Ahhh! Okay got ya! I didn’t even know you could do that. :slight_smile:

8

It’s what the code button used to do for you.

1 Like
9

Will I need to change anything about

10

I think that looks good. Your post doesn’t say what exactly happens when you click the code button, only that it will make your code look like code, which it still does.

1 Like
11

Okay! Good good! :slight_smile:

Of course it’s only now I think “hey that’s a great idea, having an example of how it looks would have been a brilliant idea!” :slight_smile: