6335474075
Added some custom blockquotes `tip`, `warning`, and `danger` as seen in [jekyll-gitbook](https://sighingnow.github.io/jekyll-gitbook/jekyll/2022-06-30-tips_warnings_dangers.html), and a blog post showcasing them. Light look:  Dark look:  --------- Signed-off-by: George Araujo <george.gcac@gmail.com>
111 lines
2.5 KiB
Markdown
111 lines
2.5 KiB
Markdown
---
|
|
layout: post
|
|
title: a post with custom blockquotes
|
|
date: 2023-05-12 15:53:00-0400
|
|
description: an example of a blog post with custom blockquotes
|
|
categories: sample-posts blockquotes
|
|
giscus_comments: true
|
|
related_posts: true
|
|
---
|
|
This post shows how to add custom styles for blockquotes. Based on [jekyll-gitbook](https://github.com/sighingnow/jekyll-gitbook) implementation.
|
|
|
|
We decided to support the same custom blockquotes as in [jekyll-gitbook](https://sighingnow.github.io/jekyll-gitbook/jekyll/2022-06-30-tips_warnings_dangers.html), which are also found in a lot of other sites' styles. The styles definitions can be found on the [_base.scss](https://github.com/alshedivat/al-folio/blob/master/_sass/_base.scss) file, more specifically:
|
|
|
|
```scss
|
|
/* 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:
|
|
|
|
```markdown
|
|
> 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:
|
|
|
|
```markdown
|
|
> ##### 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.
|
|
{: .block-tip }
|
|
|
|
```markdown
|
|
> ##### 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
|
|
{: .block-warning }
|
|
|
|
```markdown
|
|
> ##### 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
|
|
{: .block-danger }
|