Generating the author of a quote, blockquote

tips & tricks
1

Since default markdown does not have (2019) clean way to handle author of a quote, I use CSS to help with this task. From my snippet:

quote
quote990×366 24.8 KB

  1. Since any quote it is suppose to have a source, even if it is an unknown source.

  2. Since the markdown > Quote is rendered as <blockquote><p>Quote</p></blockquote> and

    > Quote1
    >
    > Quote2

    is rendered as

    <blockquote>
    <p>Quote1</p>
    <p>Quote2</p>
    </blockquote>

My solution to this is always take the last <p></p> as the source, the author, and handle it by CSS. The example bellow is SCSS, without the variables.

blockquote {
    p {
        display: inline;

        &:first-of-type {
            // Quote symbols
            quotes: '\201C' '\201D' '\2018' '\2019';

            &::before {
                content: open-quote;
                margin-right: 0.1rem;
            }
        }

        &:last-of-type {
            // Quote symbols
            quotes: '\201C' '\201D' '\2018' '\2019';
            font-style: italic;

            &::before {
                // \000A is the unicode new line character
                // \2014 is the unicode em dash character
                content: close-quote "\000A" "\2014" " ";
                white-space: pre;
                margin-left: 0.1rem;
                font-style: normal;
            }
        }

        // In case of a quote without a source, with only one p
        &:only-of-type {
            font-style: normal;
            quotes: '\201C' '\201D' '\2018' '\2019';

            &::before {
               content: open-quote;
               margin-right: 0.1rem;
            }

            &::after {
                content: close-quote;
                margin-left: 0.1rem;
            }
        }
    }
}

The source will show in the next line, if you want the source in the same line just replace the character \000A with some spaces, I suggest at least 3.

In this approach does not use any html code inside the content. Does not need any special template logic. The only thing is the browser must support the css properties.

2 Likes
2

I had a similar situation. I wanted a random quote to show up every day. I tried several things that I documented on my hugo blog: https://jimby.name/blog/2019/06/and-you-can-quote-me/

Basically, I gave up and used a server side include. Check the blog for more detail.

You can see the result on my homepage: https://www.jimby.name

Cheers,
Jim B.