feat: Add four new prompts

[huanyushi]

The author has designed 4 prompts, but their styles are relatively simple, so I designed 4 new prompts (or colorboxes, alerts). Because you know, there are really many definitions, theorems and propositions in mathematics.

You can find a mathematics note I wrote here to see the effect.

SCSS

You can add the following code to the file assets/css/jekyll-theme-chirpy.scss:

/* colorbox style */
/* define box-info, box-tip, box-warning, box-danger 4 colorboxes */
@mixin colorbox($border-color, $icon-color, $icon-content, $bg-color, $fa-style: 'solid') {
    border-left: .2rem solid $border-color;
    border-radius: 0.25rem;
    color: var(--text-color);
    padding: .6rem 1rem .6rem 1.5rem;
    box-shadow: var(--language-border-color) 1px 1px 2px 1px;
    position: relative;
    margin-bottom: 1rem;
  
    > div.title::before {
      content: $icon-content;
      color: $icon-color;
      font: var(--fa-font-#{$fa-style});
      text-align: center;
      width: 3rem;
      position: absolute;
      left: .2rem;
      margin-top: .4rem;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
    }
  
    > div.title {
      background-color: $bg-color;
      color: $icon-color;
      padding: .5rem .6rem .5rem 3rem; 
      margin: -.6rem -1rem .6rem -1.5rem;
      font-weight: 600;
    }
    
    > p:last-child{
        margin-bottom: 0;
    }
}
  
/* box-info blue */
.box-info {
@include colorbox(
    var(--prompt-info-icon-color),
    var(--prompt-info-icon-color),
    "\f06a",
    var(--prompt-info-bg)
);
}

/* box-tip green */
.box-tip {
@include colorbox(
    var(--prompt-tip-icon-color),
    var(--prompt-tip-icon-color),
    "\f0eb",
    var(--prompt-tip-bg),
    'regular'
);
}

/* box-warning yellow */
.box-warning {
@include colorbox(
    var(--prompt-warning-icon-color),
    var(--prompt-warning-icon-color),
    "\f06a",
    var(--prompt-warning-bg)
);
}

/* box-danger red */
.box-danger {
@include colorbox(
    var(--prompt-danger-icon-color),
    var(--prompt-danger-icon-color),
    "\f071",
    var(--prompt-danger-bg)
);
}

Examples

You can use html in your post ( .md file), see the following examples:

<div class="box-info">
<div class="title"> Shakespeare </div>
To be or not to be. That is a question.
</div>

<div class="box-tip">
<div class="title"> Shakespeare </div>
To be or not to be. That is a question.
</div>

<div class="box-warning">
<div class="title"> Shakespeare </div>
To be or not to be. That is a question.
</div>

<div class="box-danger" markdown="1">
<div class="title"> Shakespeare </div>
> To be or not to be. That is a question.  
> --- Shakespeare

$$x^2 + y^2 =z^2$$

</div>

Of course you can also delete the title:

<div class="box-info">
To be or not to be. That is a question.
</div>

<div class="box-tip">
To be or not to be. That is a question.
</div>

<div class="box-warning">
To be or not to be. That is a question.
</div>

<div class="box-danger">
To be or not to be. That is a question.
</div>

The specific effect can be seen in the following figures:

Light	Dark

Anything else?

Fix #1195.

[huanyushi]

I didn't know if this was worth a theme change, so I didn't submit a PR and just shared it as an idea.

But this has a serious disadvantage. It is more troublesome to type every time. If you have any suggestions on how to improve it, I will be grateful.

[zhang-nianqiang]

I think it would be best to be compatible with GitHub alerts.

[huanyushi]

Any idea？

[zhang-nianqiang]

I'm not good at programming, but I think I can have two ideas.
First, as a plug-in。like https://github.com/Adamkadaban/jekyll-alerts-plugin
Second, theme native support。
Of course, I suggest that it be done in whatever form. It's a good idea to support GitHub alerts on all。
Based on GitHub's influence, GitHub alerts are easily compatible with various software.
When the workflow is to use other software to work with GitHub, it saves a lot of time.

[huanyushi]

1. GitHub doesn't support liquid language. So it is not possible to implement alerts in GitHub and Jekyll blog at the same time.
2. I think that there is not much difference between writing liquid language and HMTL language.

Anyway, thanks for your suggestions.

[NichtsHsu]

Personally, I don't like inserting HTML tags in markdown files. Instead I prefer IAL.

e.g.:

> Shakespeare
> {:.title}
>
> To be or not to be. That is a question.
{:.box-info}

This will be built as:

<blockquote class="box-info">
  <p class="title">Shakespeare</p>
  <p>To be or not to be. That is a question.</p>
</blockquote>

[huanyushi]

@NichtsHsu Thanks. In fact, I don't like to insert too many HTML tags into Markdown either. The IAL you provided is indeed a convenient method, but it requires the block-level element blockquote. Because of the existence of too many >, it is inconvenient for me to enter other content (such as a large number of equations).

I referred to the plugin @zhang-nianqiang provided, and using Liquid markup language to create HTML tags should be a better choice.

Creat a new file in _plugins, e.g. _plugins/colorbox.rb:

module Jekyll
    class ColorBoxes < Liquid::Block
      def initialize(tag_name, markup, tokens)
        super
        # Check if the markup contains a space, indicating both tag type and title
        if markup.strip.include?(" ")
          @box_type, @title = markup.strip.split(" ", 2)
          @title = @title&.gsub(/^"(.*)"$/, '\1')
        else
          # If no space, treat the markup as only tag type and set title to nil
          @box_type = markup.strip
          @title = nil
        end
      end
  
      def render(context)
        content = super
        # Generate HTML for the title if it exists, otherwise leave it empty
        title_html = @title ? "<div class=\"title\">#{@title}</div>" : ""
        # Render the appropriate box type with the title HTML and content
        case @box_type
        when "info"
            "<div class=\"box-info\" markdown=\"1\">#{title_html}#{content}</div>"
        when "tip"
            "<div class=\"box-tip\" markdown=\"1\">#{title_html}#{content}</div>"
        when "warning"
            "<div class=\"box-warning\" markdown=\"1\">#{title_html}#{content}</div>"
        when "danger"
            "<div class=\"box-danger\" markdown=\"1\">#{title_html}#{content}</div>"
        else
            # If the tag type is unknown, it renders without any additional styling
        end
      end
    end
  end
  
Liquid::Template.register_tag('box', Jekyll::ColorBoxes)

Then just enter the Liquid tags in a markdown file, e.g. :

{% box info "Shakespeare" %}
To be or not to be. That is a question.
{% endbox %}

{% box tip "Shakespeare" %}
To be or not to be. That is a question.
{% endbox %}

{% box warning "Shakespeare" %}
To be or not to be. That is a question.
{% endbox %}

{% box danger "Shakespeare" %}
> To be or not to be. That is a question.  
> --- Shakespeare

$$x^2 + y^2 =z^2$$

{% endbox %}

{% box info %}
To be or not to be. That is a question.
{% endbox %}

{% box tip %}
To be or not to be. That is a question.
{% endbox %}

{% box warning %}
To be or not to be. That is a question.
{% endbox %}

{% box danger %}
To be or not to be. That is a question.
{% endbox %}

The results they produce are the same as the pictures I provided at the beginning.

What do you think these changes?

[kungfux]

GitHub Alerts

It would be great to have a standalone plugin, but since

GitHub Pages is powered by Jekyll. All GitHub Pages sites are generated using the --safe option to disable plugins (with the exception of some whitelisted plugins) for security reasons. Unfortunately, this means your plugins won't work if you’re deploying via GitHub Pages.

So, here is a pure CSS solution that can be easily integrated into any blog.

Demo

How to use

1. Create assets/css/github-alerts.css file

Content of github-alerts.css

.gh-alert {
  padding: 0.5rem 1rem;
  border-left-width: 0.25em;
  border-left-style: solid;

  &::before {
    display: block;
    height: 1rem;
    padding-top: 0.1rem;
    padding-bottom: 2rem;
    padding-left: 1.5rem;
    background-size: 16px 16px;
    background-position: left;
    background-repeat: no-repeat;
  }

  &.note {
    border-left-color: #1f6feb;

    &::before {
      content: 'Note';
      color: #1f6feb;
      background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20width%3D%2216%22%20height%3D%2216%22%20aria-hidden%3D%22true%22%3E%3Cpath%20fill%3D%22%231f6feb%22%20d%3D%22M0%208a8%208%200%201%201%2016%200A8%208%200%200%201%200%208m8-6.5a6.5%206.5%200%201%200%200%2013%206.5%206.5%200%200%200%200-13M6.5%207.75A.75.75%200%200%201%207.25%207h1a.75.75%200%200%201%20.75.75v2.75h.25a.75.75%200%200%201%200%201.5h-2a.75.75%200%200%201%200-1.5h.25v-2h-.25a.75.75%200%200%201-.75-.75M8%206a1%201%200%201%201%200-2%201%201%200%200%201%200%202%22%2F%3E%3C%2Fsvg%3E');
    }
  }

  &.tip {
    border-left-color: #238636;

    &::before {
      content: 'Tip';
      color: #238636;
      background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20width%3D%2216%22%20height%3D%2216%22%20aria-hidden%3D%22true%22%3E%3Cpath%20fill%3D%22%23238636%22%20d%3D%22M8%201.5c-2.363%200-4%201.69-4%203.75%200%20.984.424%201.625.984%202.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621%201.49a.75.75%200%200%201-1.484.211c-.04-.282-.163-.547-.37-.847a9%209%200%200%200-.542-.68l-.268-.32C3.201%207.75%202.5%206.766%202.5%205.25%202.5%202.31%204.863%200%208%200s5.5%202.31%205.5%205.25c0%201.516-.701%202.5-1.328%203.259q-.142.172-.268.319c-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751%200%200%201-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848l.213-.253c.561-.679.985-1.32.985-2.304%200-2.06-1.637-3.75-4-3.75M5.75%2012h4.5a.75.75%200%200%201%200%201.5h-4.5a.75.75%200%200%201%200-1.5M6%2015.25a.75.75%200%200%201%20.75-.75h2.5a.75.75%200%200%201%200%201.5h-2.5a.75.75%200%200%201-.75-.75%22%2F%3E%3C%2Fsvg%3E');
    }
  }

  &.important {
    border-left-color: #8957e5;

    &::before {
      content: 'Important';
      color: #8957e5;
      background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20width%3D%2216%22%20height%3D%2216%22%20aria-hidden%3D%22true%22%3E%3Cpath%20fill%3D%22%238957e5%22%20d%3D%22M0%201.75C0%20.784.784%200%201.75%200h12.5C15.216%200%2016%20.784%2016%201.75v9.5A1.75%201.75%200%200%201%2014.25%2013H8.06l-2.573%202.573A1.458%201.458%200%200%201%203%2014.543V13H1.75A1.75%201.75%200%200%201%200%2011.25Zm1.75-.25a.25.25%200%200%200-.25.25v9.5c0%20.138.112.25.25.25h2a.75.75%200%200%201%20.75.75v2.19l2.72-2.72a.75.75%200%200%201%20.53-.22h6.5a.25.25%200%200%200%20.25-.25v-9.5a.25.25%200%200%200-.25-.25Zm7%202.25v2.5a.75.75%200%200%201-1.5%200v-2.5a.75.75%200%200%201%201.5%200M9%209a1%201%200%201%201-2%200%201%201%200%200%201%202%200%22%2F%3E%3C%2Fsvg%3E');
    }
  }

  &.warning {
    border-left-color: #9e6a03;

    &::before {
      content: 'Warning';
      color: #9e6a03;
      background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20width%3D%2216%22%20height%3D%2216%22%20aria-hidden%3D%22true%22%3E%3Cpath%20fill%3D%22%239e6a03%22%20d%3D%22M6.457%201.047c.659-1.234%202.427-1.234%203.086%200l6.082%2011.378A1.75%201.75%200%200%201%2014.082%2015H1.918a1.75%201.75%200%200%201-1.543-2.575Zm1.763.707a.25.25%200%200%200-.44%200L1.698%2013.132a.25.25%200%200%200%20.22.368h12.164a.25.25%200%200%200%20.22-.368Zm.53%203.996v2.5a.75.75%200%200%201-1.5%200v-2.5a.75.75%200%200%201%201.5%200M9%2011a1%201%200%201%201-2%200%201%201%200%200%201%202%200%22%2F%3E%3C%2Fsvg%3E');
    }
  }

  &.caution {
    border-left-color: #da3633;

    &::before {
      content: 'Caution';
      color: #da3633;
      background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20width%3D%2216%22%20height%3D%2216%22%20aria-hidden%3D%22true%22%3E%3Cpath%20fill%3D%22%23da3633%22%20d%3D%22M4.47.22A.75.75%200%200%201%205%200h6c.199%200%20.389.079.53.22l4.25%204.25c.141.14.22.331.22.53v6a.75.75%200%200%201-.22.53l-4.25%204.25A.75.75%200%200%201%2011%2016H5a.75.75%200%200%201-.53-.22L.22%2011.53A.75.75%200%200%201%200%2011V5c0-.199.079-.389.22-.53Zm.84%201.28L1.5%205.31v5.38l3.81%203.81h5.38l3.81-3.81V5.31L10.69%201.5ZM8%204a.75.75%200%200%201%20.75.75v3.5a.75.75%200%200%201-1.5%200v-3.5A.75.75%200%200%201%208%204m0%208a1%201%200%201%201%200-2%201%201%200%200%201%200%202%22%2F%3E%3C%2Fsvg%3E');
    }
  }
}

2. Load it from assets/css/jekyll-theme-chirpy.scss like

@import 'github-alerts.css';

3. Use in markdown

> This is a note.
{: .gh-alert.note }

> This is a tip.
{: .gh-alert.tip }

> This is an important note.
{: .gh-alert.important }

> This is a warning.
{: .gh-alert.warning }

> This is a caution.
{: .gh-alert.caution }