Code snippets not properly indented if included in numbered lists w/o empty newline

[adamlui]

Bug Report

When code snippets are included in numbered lists without an empty newline separating numbered heading & snippet, indents become single spaces:

Steps to reproduce

In the doc, write a code snippet after numbered item without using an empty newline:

4. In scripts that use `chatgpt.js` (foreground or background), structure like so:
```js
(async () => {
    const { chatgpt } = await import(chrome.runtime.getURL('lib/chatgpt.js'));    
    // Your code here...
})();
```

What is current behaviour

4-space indents in code block become 1-space

What is the expected behaviour

4-space indents remain 4-space

Other relevant information

The bug is live @ https://chatgpt.js.org

While inserting an empty newline between the numbered item & the code block restores proper indentation, it strangely removes the vertical gap between the two when rendered, so omitting empty newline is less unpleasing aesthetically (relative to whole site vs. merely code blocks being off)

• Bug does still occur when all/other plugins are disabled?

• Your OS: Windows 10

• Node.js version: 18.15.0

• npm/yarn version: 9.5.0

• Browser version: Firefox 111.0

• Docsify version: 4.13.0

• Docsify plugins:

Please create a reproducible sandbox

The codesandbox.io site keeps giving error when I try to upload files (https://github.com/chatgptjs/chatgpt.js/tree/main/docs)

Mention the docsify version in which this bug was not present (if any)

[Koooooo-7]

Hi @adamlui , IIUC, it seems the md parser default syntax , either in github comments. i.e

• 1-space

4. In scripts that use `chatgpt.js` (foreground or background), structure like so:
```js
(async () => {
    const { chatgpt } = await import(chrome.runtime.getURL('lib/chatgpt.js'));    
    // Your code here...
})();

Result
4. In scripts that use chatgpt.js (foreground or background), structure like so:

(async () => {
    const { chatgpt } = await import(chrome.runtime.getURL('lib/chatgpt.js'));    
    // Your code here...
})();

---

• 4-space

4.    In scripts that use `chatgpt.js` (foreground or background), structure like so: 
```js
(async () => {
    const { chatgpt } = await import(chrome.runtime.getURL('lib/chatgpt.js'));    
    // Your code here...
})();

Result
4. In scripts that use chatgpt.js (foreground or background), structure like so:

(async () => {
    const { chatgpt } = await import(chrome.runtime.getURL('lib/chatgpt.js'));    
    // Your code here...
})();

[adamlui]

Hey @Koooooo-7 I tested your theory and added 4 spaces after 4. but it still displays as 1-space indent:

[Koooooo-7]

Hey @Koooooo-7 I tested your theory and added 4 spaces after 4. but it still displays as 1-space indent:

Yep. I meant that it seems the parser common behavior in both docsify and github as I pasted above, they have the same render result which make the 4 spaces to 1.

If you wanna keep the 4-spece, the &emsp could be a workaround.

[adamlui]

@Koooooo-7 where should I insert the &emsp?

[Koooooo-7]

@Koooooo-7 where should I insert the &emsp?

Normally, it should be in the html content. but in the case you mentioned, it seems not work :(.
I suppose that you may need adjust your content to match the common parser rules according to the Markdown style guide and markdown lint.

[adamlui]

Yep. I meant that it seems the parser common behavior in both docsify and github as I pasted above, they have the same render result which make the 4 spaces to 1.

Actually your pastes render properly in GitHub as 4-space:

Only in Docsify do code blocks without vertical space between numbered item header & code block as described do they become 1-space:

Source: https://chatgpt.js.org/#/?id=-chrome

On GitHub, this same markdown results in 4-space:

Source: https://github.com/chatgptjs/chatgpt.js#-chrome

The reason this glitch is occurring, there is logic in Docsify that strips extra whitespace down to 1-space to uniformly indent numbered items, but does not account for code blocks (which need more than 1 often) like GitHub does, so it needs to add a condition only if backticks aren't detected (not just newlines)

[Koooooo-7]

Hi @adamlui , I final understand this now. I found that it is the marked.js issue (our markdown render dependency) . I think you need add a newline ahead the code block to make it work as ur expect. 😅 Once we upgrade the marked.js to the latest version, it gonna be fixed (fixed in mardk.js >= v4.0.17 markedjs/marked#2483 ).

Test on marked.js demo .

4. In scripts that use `chatgpt.js` (foreground or background), structure like so:


```js
(async () => {
    const { chatgpt } = await import(chrome.runtime.getURL('lib/chatgpt.js'));    
    // Your code here...
})();

[adamlui]

It does properly indent when newline is added, but the gap between numbered heading and code block shrinks, so it doesn't look right is why I sacrificed and let just one code block look weird. Do you know when marked.js will be upgraded?

[Koooooo-7]

It does properly indent when newline is added, but the gap between numbered heading and code block shrinks, so it doesn't look right is why I sacrificed and let just one code block look weird. Do you know when marked.js will be upgraded?

Actually, we do discuss on the marked.js upgrade stuff and I already merge it #1993. But it may broken the support for IE11 since marked.js drop IE11... so...I m not sure when we have a clear plan when/how to release this changes.