Inline code blocks in code fence mode

In the default mode of the code </> button, when you select some text in the middle of a line and click the code button, it wraps that text in single backticks, like `this`.

We learned about the “code formatting style = code-fences” mode from today’s blog post and turned it on right away, but I was surprised to find that selecting a word inline and clicking the code button no longer wraps it in single backticks; it wraps it in triple backticks and adds newlines before and after the selected word.

Users can delete the newlines to get the intended result (which is to say, you can write ```triple backticks``` on a single line and it DTRT) but I don’t think it’s correct to add newlines to selected text.

This is a bug, right? (Or is it by design for some reason?)

4 Likes

Possibly a bug, particularly if the behavior changes with that site setting. @tgxworld can you have a look?

1 Like

Fixed in
https://github.com/discourse/discourse/commit/f32d8e28824e7e839df01a9621bb1202869dd10b

We were missing “code fences” test so I added them in as well

5 Likes

The message of that commit doesn’t sound right to me. On our (hosted) site, using code formatting style=code-fences would always add newlines before and after the text, when the behavior for 4-spaces-indent would indent multiline selections and add single backticks around single-line selections.

Is there somewhere I can try the fix out? (I guess I can try it out on our hosted site in a couple of weeks or something?)

:sweat_smile: I was trying to make the commit message concise so some of the more specific details are lost.

You can try it on try.discourse.org. :slight_smile:

I can’t try it there because it uses the default 4-space indent setting, right? (Would you mind changing it to use code fences so I can give it a whirl?)

1 Like

Sure I just switched try.discourse.org to use code fences.

1 Like

If your fix did anything, I don’t see it!

Let me clarify how I think the code </> button works (should work) in 4SI (4-space indent) mode and in CF (code fences) mode.

In 4SI mode, the </> button has two very different behaviors, one where you select just part of a line (Example 1), and another different behavior where you select multiple lines (Example 2).

Example 1 (single-line)
Input: one two three select the word “two”
4SI Output: one `two` three

Example 2 (multi-line)
Input: select all three lines:

multi
line
text

4SI Output:

    multi
    line
    text

4SI works as expected in both examples. CF mode works as expected in Example 2 (multi-line); CF mode does not work correctly in Example 1 (single-line) on try.discourse.org right now.

Input: one two three select the word “two”
4SI Output: one `two` three
CF Expected Output: one `two` three (same as 4SI)
CF Actual Output:

one
```
two
```
three

The only difference between 4SI and CF is (should be) how they behave in Example 2 (multi-line). They should behave exactly the same in Example 1 (single-line).

Hmm I’m not following here. Why should it be the same as the 4 spaces ident format? According to the example on common mark, the backticks are not supposed to be on the same line.

def method; puts “yay”; end

def method; puts "yay"; end

VS

 ```def method; puts "yay"; end```

def method; puts "yay"; end

Because inline code style is what’s desired in that case. It’s just when selecting the whole line, or multiple lines, that the behavior should change based on the setting.

4 Likes

Ah ic. Let me fix it now

Just to be crystal clear, let me lay out the four outputs side by side. I’ll put Example 2 first because I think it’s the least controversial.

Example 2 (multi-line)
Input: select all three lines:

multi
line
text

4SI Output: (working as designed)

    multi
    line
    text

CF Output: (working as designed)

```
multi
line
text
```

Example 1 (single-line)

Input: one two three select the word “two”

4SI Output:
one `two` three
CF Expected Output:
one `two` three (same as 4SI)

You quoted an example of a alternative output for inline code stile with code fences:

CF Alternative Output: one ```two``` three

“CF Expected Output” and “CF Alternative Output” render identically:
one two three
one two three

I could accept the “CF Alternative Output”, but that’s not what’s happening right now. Right now, instead of applying any kind of inline styling, it’s adding newlines.

Definitely Incorrect CF Output: (the current behavior for partial line selections)

one
```
two
```
three

That renders like this, which is not what’s desired:

one

two

three

3 Likes

Actually I don’t think this is true. Looking back at the code now, we’ve always added new lines after/before the opening/closing backticks.

Are you saying that this issue was “always” present in 4SI mode? Specifically, are you saying that what I called “Example 1 4SI Output” is not correct? You can try it yourself right here on meta.

one two three

Or are you saying that the issue was “always” present in CF mode? CF mode is a relatively new mode, off by default; we shouldn’t care very much about how CF mode “always” used to be.

As it stands today, if forum admins enable CF mode, there’s no way to click the code button tot get inline code styling. We don’t want that, right?

Why is this confusing?

  • If you select text that is less than a single line use single ticks for inline code. Regardless of the setting, single ticks is correct for inline code with no carriage returns or line feeds in it.

  • if you select multiple lines of text, use either triple back ticks or indent method depending on site setting.

4 Likes

Not at all. I was just confused because the bug was “single line code selection generated multiline code fences” but the existing code was intentionally doing so. All cleared up now though :smile:

1 Like

@dfabulich Fixed :slight_smile:

https://github.com/discourse/discourse/commit/90571f036465c95591689b45eca34de1b18b4f98

5 Likes

Cool! Can you make the fix available on try.discourse.org (and re-enable CF if necessary) so I can verify it?

2 Likes

The changes have been deployed to try.discourse.org. :slight_smile:

1 Like

Looks great! The bug appears to be fixed. Thanks!

4 Likes