PhilipJonesplaceholderfeatureplaceholdersliderplaceholderthumb

Blockquotes - Shortcodes

Basic Markdown Blockquote

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;
}

Blockquote Paired Shortcode

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`.

Adding Emoji to Blockquotes (or anywhere you want)

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.

Share: