nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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?

Accepted answers

Stephen Sifers

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

All comments

Stephen Sifers

Hello Paul and welcome to the Community!

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!

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.

unknown

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

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

cloud

bitbucket

bitbucket-cloud

markdown

code

syntax