Code blocks not working correctly?

Bug
1

Here’s a code block below showing how to do code blocks. It works

```JavaScript
function some(JavaScript, "code") {}
```

Then here’s the same code block without the indent. That works too

function some(JavaScript, "code") {}

Then here’s another code block of a code block just like the first one above. It is not working in fact it’s showing up directly inline in this paragraph for some reason

```
function some(JavaScript, "code");
```

And finally another unindented code block half works (not sure why it’s not highlighted the string same as 2 blocks up

function some(JavaScript, "code"){}

I can guess the second half issue is because I used JavaScript above and javascript below. I actually came here to propose and possibly implement that being case insensitive. Funny though, in my installation of discourse I get the opposite behavior. JavaScript has less highlighting than javascript.

#update

Let’s try this again

screenshot
screenshot3512×2278 537 KB

and here’s a screenshot of the issue. The red area on the left is functionally identical to the green area on the left but the green area is not getting converted to a code block the same as the red area

Here’s the raw content of the post so you can try it yourself.

Hopefully you’ll now see the bug

1 Like
2

Indent and triple-tick are alternate methods of making a code block. You shouldn’t have to use both.

3

You do have to use both if you’re describing how to use code blocks which is what I was doing when I ran into the bug

4

What?

No, you use <pre> tags.

How to use Code Blocks (code with backticks are in pre tags)

```
function some(JavaScript, "code"){}
```

Which will produce

function some(JavaScript, "code"){}

Or you can use 4 spaces (code with spaces are in pre tags)

    function some(JavaScript, "code"){}

which will produce

function some(JavaScript, "code"){}

You can also put them inline using a single back-tick

Example: (paragraph below with backticks are in pre tags)

This is an example of it being inline `function some(JavaScript, "code"){}` and more text can be added after too

Which produces:
This is an example of it being inline function some(JavaScript, "code"){} and more text can be added after too

And how to insert your pre tag

<pre>
    function some(JavaScript, "code"){}
</pre>
1 Like
5

And yet your “4 spaces” exemple is not working

6

Sorry, I forgot it required a blank line above it.

7

Great, now go back and look at the original post, I updated it to hopefully show the issue more clearly

8

I did, but you said you were trying to use both techniques to achieve a result that is best achieved using <pre> tags. (per my examples)

If you want to show someone how to use code blocks, use pre tags. Don’t try and embed code fences inside indents or indents inside code fences.

As for why the no highlight using indent, that may be a legit bug, but likely within highlight.js. I’m not sure why it isn’t figuring it out.

9

I took it to be behavior similar to single backticks vs. triple backticks.

<meta name="viewport" content="width=device-width,initial-scale=1" />

<meta name="viewport" content="width=device-width,initial-scale=1" />

I’ve always considered it more a problem of learning correct syntax rather than any given syntax not working as how one thinks it should work.

10

This is often because the user has entered an invalid language code in the backticks block. Several topics about that here already, this user error comes up a lot for some reason.

11

I’d be happy if you’d point out the invalid language code that’s breaking the example I posted because for some reason I’m blind to it. In fact the block that’s broken is indented so it doesn’t have a language code.

12

Not saying that is necessarily the case here but for some peculiar reason that scenario comes up constantly.

13

This is fully functional now:

Here’s a code block below showing how to do code blocks. It works

``` JavaScript
function some(JavaScript, "code") {}
```

Then here’s the same code block without the indent. That works too

function some(JavaScript, "code") {}

Then here’s another code block with an indent. It is not working in fact it’s showing up directly inline in this paragraph for some reason

```
function some(JavaScript, "code");
```

And finally another unindented code block half works (not sure why it’s not highlighted the string same as 2 blocks up

function some(JavaScript, "code"){}

I can guess the second half issue is because I used JavaScript above and javascript below. I actually came here to propose and possibly implement that being case insensitive. Funny though, in my installation of discourse I get the opposite behavior. JavaScript has less highlighting than javascript.

4 Likes
15

Note that you really need a space between the triple backticks block and the language. If we don’t teach people this it leads to some weird edge conditions internal to commonmark.