Based on the work of Maykel Loomans
Created
June 19, 2011 02:52
-
-
Save imathis/1033704 to your computer and use it in GitHub Desktop.
Jekyll Pullquote plugin for Octopress
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.has-pullquote:before { | |
/* Reset metrics. */ | |
padding: 0; | |
border: none; | |
/* Content */ | |
content: attr(data-pullquote); | |
/* Pull out to the right, modular scale based margins. */ | |
float: right; | |
width: 45%; | |
margin: 1em 0 1em 1.5em; | |
/* Baseline correction */ | |
position: relative; | |
top: 6px; | |
font-size: 1.4em; | |
line-height: 1.45em; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# | |
# Author: Brandon Mathis | |
# Lisence: MIT | |
# Based on the sematic pullquote technique by Maykel Loomans at http://miekd.com/articles/pull-quotes-with-html5-and-css/ | |
# | |
# Outputs a span with a data-pullquote attribute set from the marked pullquote. Example: | |
# | |
# {% pullquote %} | |
# When writing longform posts, I find it helpful to include pullquotes, which help those scanning a post discern whether or not a post is helpful. | |
# It is important to note, {" pullquotes are merely visual in presentation and should not appear twice in the text. "} That is why it is prefered | |
# to use a CSS only technique for styling pullquotes. | |
# {% endpullquote %} | |
# ...will output... | |
# <p> | |
# <span data-pullquote="pullquotes are merely visual in presentation and should not appear twice in the text."> | |
# When writing longform posts, I find it helpful to include pullquotes, which help those scanning a post discern whether or not a post is helpful. | |
# It is important to note, pullquotes are merely visual in presentation and should not appear twice in the text. This is why a CSS only approach # for styling pullquotes is prefered. | |
# </span> | |
# </p> | |
# | |
module Jekyll | |
class PullquoteTag < Liquid::Block | |
PullQuoteMarkup = /\{(.+)\}/i | |
def initialize(tag_name, markup, tokens) | |
super | |
end | |
def render(context) | |
output = super | |
if output.join =~ /\{"\s*(.+)\s*"\}/ | |
@quote = $1 | |
"<span class='has-pullquote' data-pullquote='#{@quote}'>#{output.join.gsub(/\{"\s*|\s*"\}/, '')}</span>" | |
else | |
return "Surround your pullquote like this {! text to be quoted !}" | |
end | |
end | |
end | |
end | |
Liquid::Template.register_tag('pullquote', Jekyll::PullquoteTag) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment