Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

LiamEderzeel
Copy link
Contributor

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
Copy link
Contributor Author

LiamEderzeel commented Jan 31, 2024

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
Copy link
Contributor Author

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.

@brc-dd brc-dd self-assigned this Feb 4, 2024
@github-actions github-actions bot added the stale label Mar 7, 2024
@github-actions github-actions bot removed the stale label Apr 28, 2024
@github-actions github-actions bot added the stale label Jun 9, 2024
@github-actions github-actions bot removed the stale label Jul 17, 2024
@TheNorthMemory
Copy link

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.

@LiamEderzeel LiamEderzeel force-pushed the fix/markdown-it-attr-behaviour-in-pre-wrapper-plugin branch from 45668e6 to 8f0b2a0 Compare August 15, 2024 20:22
@LiamEderzeel
Copy link
Contributor Author

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

@LiamEderzeel
Copy link
Contributor Author

/publish

Copy link

pkg-pr-new bot commented Sep 24, 2024

pnpm add https://pkg.pr.new/vitepress@3519

commit: 8f0b2a0

@LiamEderzeel
Copy link
Contributor Author

@brc-dd I hosted a demo on stackblitz showing the changes in action.
Hope this makes reviewing it easier.
https://stackblitz.com/edit/vite-jqtjfg?file=docs%2Fexample.md

@github-actions github-actions bot added the stale label Oct 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

support adding attributes to code blocks
4 participants