Markdown Code Syntax Highlighting nested in List

[phbits]

Updating README.md I'm able to use a code fence. It produces a left justified code block with proper syntax highlighting.

```sql

select *

from data

```

However I'm unable to get the code fence to properly nest under a list. It will remain left justified and disrupt my ordered list. Using various combinations of spaces and tabs will at best include the code fence characters as part of the code block.

I can forego the code fence and use the space/tab technique for code but then I lose the syntax highlighting.

What's the best technique for achieving code syntax highlighting nested in a list?

[Stephen Sifers · Accepted solution]

Hello Paul and welcome to the Community!

I read through your post, and thank you for providing great amounts of detail, and attempting to recreate the issue within Bitbucket Cloud. From what I was able to recreate I am unsure if it is matching your desired output or not. Here is what I have done thus far:

I create the readme.md file and within then I added the following:

 

From this, the file is displayed as follows:

 

Is this similar to what you’re seeing as well? If not, can you please give us a sample of the readme.md file you’re using so we may test further with that to find the issue you’re seeing.

We look forward to your response so we may work together to resolve this issue.

Regards,
Stephen Sifers

[phbits]

Hi Stephen and thanks for the quick response! That's what I'm seeing except I have list items following the code fence. With the code being left justified, the numbering restarts for any list item after it.

Using tabs and spaces will at best make the code fence characters part of the code block causing syntax highlighting to be lost.

[Stephen Sifers]

Hello again Paul,

Thank you for the response and clarification. Reviewing you’re follow up and testing, I did find what the issue may be. Within the markdown itself, it is escaping when you enter the code block itself, this is why the code block will not indent with the list. The list will also be escaped (Using your example) Item number 3 will display as number 1 after the code block. You may also tab the code within the code block to indent, but the list will still be escaped. Here are examples here:

 

There is more information about the markdown at Daring Fireball | Code Block. Within there they explain the following:

Regular Markdown syntax is not processed within code blocks. E.g., asterisks are just literal asterisks within a code block. This means it’s also easy to use Markdown to write about Markdown’s own syntax.

This would explain the behavior of the markdown being escaped in the middle of the list due to the code block.

I hope this helps to clarify how the markdown functions and give you an option to indent your code into your list.

Regards,
Stephen Sifers

[phbits]

Looks like I'll indent the code block so not to disrupt the ordered list even though syntax highlighting will be lost.

Thanks for the thorough response Stephen!

[gbpackers225]

Stephen Sifers,

This isn't an answer.  This is an explanation of what is happening.  If anything, you should explicitly say "No, we do not currently support syntax coloring for code blocks embedded in a list."  You mention markdown syntax is not processed within code blocks but I believe that is obvious and is not related to what we are attempting to do.

I'm with Paul Hanson this is a desired capability.  I am running into the same limitation.  This syntax coloring via Pygments is a feature BitBucket has integrated into its display of Markdown which is fantastic but limited if you are not providing instructions with numbered steps.

If there is a way to continue the numbering of a list after a code block then that is desired.  My use case:  Writing installation instructions (ordered list) and would like to display a code block with colored syntax as 1 step.  Restarting the list numbering after the codeblock is unacceptable.

[Teshan Shanuka J]

Same use case here. Need to put ordered instructions in a list with code blocks.

Obviously nesting code block in a list, with the regular way does not work in bitbucket. Stephen is just saying "no it does not work here". But can we have a update fixing that?

[Andrew Newell]

I agree with the other commenters. Making markdown documentation hosted by bitbucket is an exercise in frustration. The answer should not have been accepted as it was an admission that there is a bug with the way markdown is processed. Code blocks should not break lists!

Edit: I have spent more time trying to get my code blocks to display in a list correctly than actually writing the documentation in the first place!

[genadijrazdorov]

I have similar a problem, with code blocks not formatted properly if inside a list. Same markdown README is working as expected on Github. Example:

1. Starting a list

    ```bash
    $ python -c "print('Hello world!')"

    Hello world!

    ```

1. Next element of the list

will produce:

1. Starting a list

   $ python -c "print('Hello world!')"Hello world!

2. Next element of the list

As you can see, different lines from code block are concatenated, which is not happening on Github.

[Khaled Zaidan]

Oh wow, the amount of time I've spent on this thinking I did something wrong.

Yes please, we need this, too.

In the Readme file, we often have a list of steps, and some steps would have a code snippet or a command. There's currently no way to format that!

The closest I could find to an acceptable layout is using blockquotes, but we lose the highlighting (and we get annoying double-quotes at the beginning and end of the code). Not ideal!

[Adam Segal]

This is clearly a bug, please fix, it works in other implementations of markdown.

[Iain Samuel McLean Elder]

There is open issue for this on the Bitbucket Cloud Jira.

https://jira.atlassian.com/browse/BCLOUD-6778

Please vote on it and comment on it with your use case.

[byub-del]

Well that issue has been open for over 7 years! I'm not sure commenting on it will make any difference. This is clearly a bug that should be fixed and is long over due.

[Thierry Guérin]

Thanks for the link. Such a simple (and available everywhere else) feature should not require to buy plugins.

[fazliddin2014]

just put 8 spaces before code line, seperate whole codes with new lines, do not use 3 quotes. I use + instead of spaces in my example, so that you could see whole pic

1. list item 1
++++++++
++++++++code here
++++++++
1. list item 2