Markdown Blog Template

The motivation behind this system is quite simple: What if you could just write how you normally would in a markdown program (in my case Byword), copy the text into HTML and paste that HTML straight into a template, that would handle all the layout?

I know this is not rocket science, but there are a few components that go into making that a reality. For one, you have to have your CSS setup to be very generic, as the writing program only gives you simple elements with no tags like this:

<h1>Markdown Blog Template</h1>

This means that the CSS has to look something like this:

h2 {
    font-size: 1.5rem;
}

p, pre, ol, ul {
    word-spacing: .1rem;
    margin-bottom: 1.5rem;
}

ol, ul {
    padding-left: 3.5rem;
}

This way of tailoring a stylesheet around a consistent HTML outcome from the writing program can take you pretty far to something that looks a lot like a more advanced blog.

Variations

Very few writers are satisfied with a completely uniform expression on the Internet and variations of image layouts is something that seem particularly popular. So I had to come up with a way to let a writer set the layout of the image in the document itself.

I worked with three different image variations:

Inline
Breaker
Full-bleed

When embedding an image into Byword, writers use the markdown formula:

![caption](path-to-image)

I figured that the caption space could be used to write short “tags”, indicating what kind of layout you wanted for the image. The system would have to be rather rigid: always write the tag before the actual caption, like this:

![inline: Here is an inline image!](path)

With Javascript and jQuery, the tags are then accessed and replaced at runtime. All of them are identified using this selector:

$(`img[alt*='${tag}'`)

That simply selects all <img> elements in the DOM with an alt attribute that includes one of the predefined tags. Then a function is run to remove the tag from the caption itself and add custom classes to the <img> and <figure>elements themselves:

const applyVariations = tag => {
    $(`img[alt*='${tag}'`).addClass(`img-${tag}`);
    $(`img[alt*='${tag}'`).parent().addClass(`fig-${tag}`);
    $(`img[alt*='${tag}'`).next().text($(`img[alt*='${tag}'`).next().text().replace(`${tag}:, ''));
}

And finally the applyVariations function is run for all the tags defined in an array:

const tags = ['fullbleed', 'breaker', 'inline'];

const applyAllVariations = () => {
    for (var i = tags.length - 1; i >= 0; i--) {
        applyVariations(tags[i]);
        removeTag(tags[i]);
    }
}

Here are the examples of the different image variations:

That is really it. Altogether, this allows a writer with a basic understanding of HTML and CSS to quickly self publish writing in a way that is simple but allows for a bit of variation. The system could of course be expanded in many ways.

Have a look below for more stylings of the raw HTML to get a sense of what this template would look like in its entirety.

Heading 2

“Generic quote goes here, pretty right?”
– Matt Patricia

Biodiesel pug helvetica next level enamel pin slow-carb, leggings venmo quinoa etsy everyday carry farm-to-table af kogi humblebrag. Photo booth godard gentrify seitan gluten-free. Direct trade VHS enamel pin synth, bespoke affogato plaid meh paleo health goth. Tumeric typewriter vice, +1 gentrify glossier microdosing.

Take 1
Take 2
Take 3

Kale chips ugh ramps umami bicycle rights fashion axe. Retro shabby chic humblebrag tattooed, YOLO brunch brooklyn. Tumblr selfies salvia pour-over, migas PBR&B pabst single-origin coffee tbh pop-up green juice beard kale chips sriracha. Selfies master cleanse lyft, salvia pour-over bespoke williamsburg intelligentsia offal gochujang trust fund copper mug beard polaroid. Shoreditch woke truffaut, wayfarers YOLO readymade man bun kickstarter 3 wolf moon fingerstache forage squid. Fixie ethical distillery swag. Cronut vaporware waistcoat salvia poke beard lomo, hashtag fap bushwick celiac mixtape leggings echo park hot chicken.

Heading 3

Sriracha lo-fi brunch, bespoke raclette four dollar toast humblebrag subway tile chillwave. Vape street art yr deep v echo park, coloring book meh. Wolf raw denim dreamcatcher, intelligentsia mumblecore viral quinoa activated charcoal iceland hell of chartreuse authentic 90’s. Biodiesel pug helvetica next level enamel pin slow-carb, leggings venmo quinoa etsy everyday carry farm-to-table af kogi humblebrag. Photo booth godard gentrify seitan gluten-free. Direct trade VHS enamel pin synth, bespoke affogato plaid meh paleo health goth. Tumeric typewriter vice, +1 gentrify glossier microdosing.

Butcher artisan brooklyn lo-fi, flannel cold-pressed try-hard synth church-key jianbing skateboard. Tbh brooklyn chia banjo photo booth, kogi tousled iceland. Tacos tilde whatever, yr woke vinyl meditation stumptown keytar post-ironic. Fanny pack four loko fixie, kogi wayfarers meh sriracha biodiesel. Tote bag pickled dreamcatcher, umami art party williamsburg snackwave thundercats retro lumbersexual green juice. Pitchfork raw denim fashion axe swag kale chips, mlkshk celiac kogi chia raclette meggings godard poutine man braid vaporware. Chillwave ramps copper mug, trust fund fam deep v helvetica flexitarian.

Readymade hexagon enamel pin, church-key forage butcher helvetica tbh flexitarian fixie bushwick PBR&B pabst. Migas irony narwhal jianbing aesthetic. Vape cornhole tumblr truffaut, yr church-key venmo beard mixtape banh mi ethical distillery twee dreamcatcher sriracha. Actually XOXO sriracha, ugh truffaut cornhole cray retro. Copper mug hell of art party, typewriter la croix vape cray iceland pug narwhal freegan raw denim hammock migas direct trade. Butcher air plant bushwick, live-edge beard squid chartreuse. Authentic glossier venmo raw denim, microdosing normcore godard.