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

feat: custom containers and GitHub alerts #3603

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

Conversation

brenoepics
Copy link

@brenoepics brenoepics commented Feb 25, 2024

This is a useful feature if users want custom containers with not only custom icons/labels but also custom colors or styles.
currently, they would have to disable the GitHub flavored plugin and enable it with new code to support it or add another containers plugin with custom containers only.

fixes #3591
fixes #3602

Usage Example:

Custom Container

You may set custom containers globally by adding the following content in site config:

// config.ts
export default defineConfig({
  // ...
  markdown: {
    container: {
      //...
      customContainers: {
        example: 'Example Label'
      }
    }
  }
  // ...
})

And add your custom style:

/* override.css */
.custom-block.example {
  border-color: var(--vp-c-brand-1);
  color: var(--vp-c-brand-2);
  background-color: var(--vp-c-brand-3);
}

.custom-block.example a,
.custom-block.example code {
  color: var(--vp-c-brand-1);
}

.custom-block.example a:hover,
.custom-block.example a:hover > code {
  color: var(--vp-c-brand-2);
}

.custom-block.example code {
  background-color: var(--vp-c-brand-1);
}

@brc-dd brc-dd self-assigned this Mar 7, 2024
@github-actions github-actions bot added the stale label Apr 12, 2024
@github-actions github-actions bot removed the stale label Apr 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants