Markdown plugin for pull quotes which can be used in a Pelican site
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Pull Quote - Markdown Plugin

Pull Quote

Pull Quotes are seen in magazines to draw the attention of the reader to important excerpts of the article. This extension can be used as a Markdown plugin or in a Pelican site, to easily implement pull quotes.

The left half of the figure below shows the markdown syntax and the right half shows the corresponding web page. The generated HTML markup is quite clean and non-repetitive as CSS3 is used. But note that the excerpt is an exact copy of the body text and shown quite close to it.

side by side comparison


Usage instructions as applicable to Pelican.

Copy the mdx_pullquote directory into the plugins directory inside your pelican project.

Next open your and add 'pullquote' to the MD_EXTENSIONS list, as follows:

    MD_EXTENSIONS = ['codehilite', 'pullquote']

Finally, ensure that your site's CSS recognises and display the pull quote correctly. There are several ways of achieving this. A sample CSS code could be:

    div[data-pullquote]:before, span[data-pullquote]:before {
	    content: attr(data-pullquote);
        display: block;
	    float: right;
	    width: 200px;
	    margin: 0 0 0.5em 30px;
	    padding: 0;
	    font-size: 1.5em;
	    line-height: 1.4em;

        font-style: italic;
        text-align: left;
        color: #0000AA;

Now, you are all set!

To use pulldown in your markdown posts, you will need to use markdown's hyperlink syntax with + symbol instead of the URL. For e.g.

	This text is before the quote. I would say,[this part 
    will appear as a pull quote](+). This text is after the quote.  


This content is released under the ( MIT License.