8000 feat: custom containers and GitHub alerts by brenoepics · Pull Request #3603 · vuejs/vitepress · GitHub
[go: up one dir, main page]
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.

Sign up for GitHub

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

Jump to bottom

feat: custom containers and GitHub alerts #3603

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

feat: custom containers and GitHub alerts #3603

wants to merge 6 commits into from

Conversation

brenoepics
Copy link
@brenoepics brenoepics commented Feb 25, 2024 •
edited
Loading

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
@github-actions github-actions bot added the stale label Jun 9, 2024
@github-actions github-actions bot removed the stale label Jul 17, 2024
@github-actions github-actions bot added the stale label Sep 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@brc-dd brc-dd

Labels
stale
Projects
None yet
Milestone
No milestone
2 participants
@brenoepics @brc-dd
0