This post shows how to add custom styles for blockquotes. Based on jekyll-gitbook implementation.

We decided to support the same custom blockquotes as in jekyll-gitbook, which are also found in a lot of other sites’ styles. The styles definitions can be found on the _base.scss file, more specifically:

    /* Tips, warnings, and dangers */
    .post .post-content blockquote {
      &.block-tip {
        border-color: var(--global-tip-block);
        background-color: var(--global-tip-block-bg);

        p {
          color: var(--global-tip-block-text);
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
          color: var(--global-tip-block-title);
        }
      }

      &.block-warning {
        border-color: var(--global-warning-block);
        background-color: var(--global-warning-block-bg);

        p {
          color: var(--global-warning-block-text);
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
          color: var(--global-warning-block-title);
        }
      }

      &.block-danger {
        border-color: var(--global-danger-block);
        background-color: var(--global-danger-block-bg);

        p {
          color: var(--global-danger-block-text);
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
          color: var(--global-danger-block-title);
        }
      }
    }

A regular blockquote can be used as following:

    > This is a regular blockquote
    > and it can be used as usual

> This is a regular blockquote and it can be used as usual

These custom styles can be used by adding the specific class to the blockquote, as follows:

    > ##### TIP
    >
    > A tip can be used when you want to give advice
    > related to a certain content.
    {: .block-tip }

> ##### TIP

> A tip can be used when you want to give advice related to a certain content.

    > ##### WARNING
    >
    > This is a warning, and thus should
    > be used when you want to warn the user
    {: .block-warning }

> ##### WARNING

> This is a warning, and thus should be used when you want to warn the user

    > ##### DANGER
    >
    > This is a danger zone, and thus should
    > be used carefully
    {: .block-danger }

> ##### DANGER

> This is a danger zone, and thus should be used carefully

## Enjoy Reading This Article?

Here are some more articles you might like to read next:

- Google Gemini updates: Flash 1.5, Gemma 2 and Project Astra
- Displaying External Posts on Your al-folio Blog
- a post with tabs
- a post with typograms
- a post that can be cited