Below is a basic blockquote in Markdown.
> this is a blockquote. this is a blockquote.
Which generates this:
this is a blockquote. this is a blockquote.
The minimal styling is managed in /src/assets/css/tailwind.css
which sets left padding and margins of 1rem (16px) and a left border of 4px colored gray-500:
blockquote {
@apply pl-4 m-4 border-l-4 border-gray-500;
}
With a simple bq
shortcode, you can override the default CSS and style it however you like. For example:
{% bq "p-4 border-red-500 italic text-blue-500 border-t-4 bg-gray-200" %}
this is another blockquote via the `bq` paired shortcode located in `/utils/paired-shorcodes.js`.
{% endbq %}
Generates the customized blockquote below:
this is another blockquote via the `bq` paired shortcode located in `/utils/paired-shorcodes.js`.
Because this system uses markdown-it-emoji we can insert Emojis anywhere by using their :code:
as in the exmaple below:
> :bulb: **NOTE:** A blockquote with a nice Emoji to draw attention.
Generates the following blockquote:
💡 NOTE: A blockquote with a nice Emoji to draw attention.