placeholderfeatureplaceholdersliderplaceholderthumb

Subscribe to our newsletter and get weekly blasts on how to level up as an engineer and build better products.

    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.