Breaking change on v4.8.*

[dialex]

This is my live website. Now it's fine because I've fixed docsify's version on 4.7.1. However, if I change to 4.8.* several issues occur:

• The background custom color is ignored
• The style of the button disappears
• The sidebar links break

I've already compared my index.html with the latest template and it looks fine. I have no idea what causes that. Examples below.

4.7.1 (ok):

4.8.0 (not ok):

4.8.0 (broken sidebar):

Thoughts?

[cheng-kang]

Please update to 4.8.3 and see if the issues stay.

[dialex]

Yup, same broken behaviour 😢
Here's my index.html

[cheng-kang]

According to https://marked.js.org/#/README.md#specifications`marked` is following CommonMark. Space in link is not supported as per the specs.

Alternatively, for now, you could use <img data-origin="linear-gradient(to left bottom, #F0FD37 0%, #ACF260 100%)" alt="color">; so that you can still use latest version and have all other fixes applied to your site.

@QingWei-Li I guess we need to make a decision on whether or not to add support for space in link in Docsify.

[QingWei-Li]

@cheng-kang I think we should follow the rules.
But to be compatible with using space characters in custom background color.

@dialex About the sidebar, You should split the line between the html tag and the markdown content. I don't think this is a bug in docsify, it will also render errors on github.

[dialex]

@cheng-kang I followed your tip and replaced ![color](linear-gradient(to left bottom, #F0FD37 0%, #ACF260 100%)) with <img data-origin="linear-gradient(to left bottom, #F0FD37 0%, #ACF260 100%)" alt="color"> but it didn't solve the issue. 😢

As for the sidebar, you were right, it just needed a newline between the html code and the markdown. Amazing, thanks a lot! 👍

[cheng-kang]

@dialex sorry, this should do the trick: <p><img data-origin="linear-gradient(to left bottom, #F0FD37 0%, #ACF260 100%)" alt="color"></p>.

Will resolve the issue ASAP.

[extrapixel]

For this reason I openend #665 and #666 which both are not fixed (but closed).

[cheng-kang]

@extrapixel I think both are closed because they are fixed. Have you tried latest version?

Regarding background colour, the case here is different.

[extrapixel]

@cheng-kang yes, using the latest version. And no, for me it's exactly as described here by @dialex . Buttons not rendering, (custom) background-colon not showing.

[dialex]

@extrapixel if you use the latest Docsify (v4.8.4) and change the background colour declaration to something like: <p><img data-origin="linear-gradient(to left bottom, #F0FD37 0%, #ACF260 100%)" alt="color"></p> (like @cheng-kang suggested)...

• The correct background colour is displayed ✅
• And magically the button style gets also fixed ✅

Give it a try! I'll close this issue because it's fixed for me.
Thanks @cheng-kang !

[extrapixel]

Give it a try! I'll close this issue because it's fixed for me.

It's not fixed. If you want to fix it, at least update the documentation: https://docsify.js.org/#/cover?id=custom-background

[dialex]

I'm still not sure if @cheng-kang code snippet is the new way of setting a bkg colour or just a workaround. Anyway you're right, I could do a PR, here it is #724

[cheng-kang]

@extrapixel have you tried the latest version? I remember there was a fix released, and just checked v4.8.6, it's working as expected.

[extrapixel]

have you tried the latest version?

Of course, I'm on the head of unpkg.

it's working as expected.

What is expected? I expect to be able to set a custom background colour. I expect do be able to disable to ugly random colours. I expect it to be documented in the docs. I don't see any of it.

[cheng-kang]

@extrapixel chill...

Because I just tested again, created a new project with docsify-cli, using latest source code from unpkg. And this works:

![color](red)

Do you have a link for me to check?

[dialex]

@timaschew ,
as of the latest version (4.9.4) what is the proper way to set background colour use a gradient?

It used to be like this

![color](linear-gradient(to left bottom, #F0FD37 0%, #ACF260 100%))

But then 4.8.0 broke it. As a workaround we could (and still can on 4.9.4) use:

<p><img data-origin="linear-gradient(to left bottom, #F0FD37 0%, #ACF260 100%)" alt="color"></p>

Do we still need to use that workaround? Or is there a markdown way to do it? I don't see that feature listed in the official doc anymore.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.