vitepress icon indicating copy to clipboard operation
vitepress copied to clipboard

fix: markdown-it-attrs behaviour in pre wrapper plugin

Open LiamEderzeel opened this issue 1 year ago • 7 comments

I noticed that the markdown-it-attrs did not work on fences with ```md. It was also mentioned in #826. The proposed changes could resolve this issue.

I tested the changes on the following markdown and also checked for compatibility with the highligh lines syntax.

<style>
.yellow {
  background-color: yellow !important; 
}
.yellow span {
  color: black !important;
}
</style>


Fix attributes for internal `preWrapperPlugin`

```css
<style>
.yellow {
  background-color: yellow !important; 
}
.yellow span {
  color: black !important;
}
</style>
```

````md
```md {data-attribute="some data" .yellow}
````

```md {data-attribute="some data" .yellow}
I made some custom styling for this code block through markdown-it-attrs

Also i added a custom attribute "data-attribute"

```

````md
```md {1}{data-attribute="some data" .yellow}
````
```md {1}{data-attribute="some data" .yellow}
I made some custom styling for this code block through markdown-it-attrs

Also i added a custom attribute "data-attribute"

```

````md
```md {1}
````
```md {1}
I made some custom styling for this code block through markdown-it-attrs

Also i added a custom attribute "data-attribute"

```

I also tested if disabling markdown-it-attrs still gives the expected behaviour.

export const shared = defineConfig({
  markdown: {
    attrs: {
      disable
    }
}

Let me know if changes are required or if more information is needed.

Resolves: #826

LiamEderzeel avatar Jan 30 '24 23:01 LiamEderzeel

I managed to reproduce the issue that makes the tests fail, ```md {1} without a trailing space produces behind the } fails to render. If you add a trailing space like so ```md {1} it will render just fine. It also seems to work fine if any other characters are behind the } like ```md {1}{}, ```md {1} {}, ```md {1}[], ```md {1} [], ```md {1}active, and ```md {1} active.

I'll do some more investigation soon.

LiamEderzeel avatar Jan 31 '24 00:01 LiamEderzeel

preWrapper failed to render because it tried to render an invalid attribute. This attribute is added by the highlightLines syntax {0}.

The highlightLinesPlugin already captures the highlightLines value from the attributes if it was parsed by markdown-it-attrs and re-applied it on token.info for the highlighter.

The changes from the last commit resolve this issue by removing the invalid attribute from the token.attrs.

LiamEderzeel avatar Jan 31 '24 13:01 LiamEderzeel

It looks like samilar to #4128. While there were a className , the better way shall be using Token.attrJoin.

L30 should be token.attrJoin('class', classes) somthing else.

TheNorthMemory avatar Aug 12 '24 08:08 TheNorthMemory

Implemented changes suggested by @TheNorthMemory and rebased onto main to resolve a merge conflict.

LiamEderzeel avatar Aug 15 '24 20:08 LiamEderzeel