Want full-bleed backgrounds and images that templates can’t fulfill? But hate mixing Markdown/Liquid with HTML? Here’s a simple method!
In order to remove clunky HTML from your Markdown file, we need to put them in a separate file that we can include using Liquid.
Create a styles.md file in your includes folder (or whatever you want to name it). This is where you’ll put your HTML blocks. Create a corresponding _styles.scss.
Liquid has a nifty feature called capture that, as the name suggests, captures a string into a variable. Here, I’m capturing my div tags into ‘writing’ and ‘end_block.’
Be sure to include markdown=”1” in your tags. This retains Markdown rendering within the HTML blocks, and you’ll see the correct syntax highlighting in your text editor.
Style your HTML accordingly in your SCSS or CSS file and capture as many HTML blocks as you want in styles.md. Don’t forget to capture closing tags!
Include in your posts
At the beginning of your .markdown posts, include styles.md:
Now, you’re ready to use the HTML blocks throughout your post! Use Liquid output to start and end the block, like this:
You can easily insert full-bleed color backgrounds into your posts. Define .color-wrapper and .beige classes in your CSS:
Capture the HTML in styles.md:
And use it in your post!
Mix it up with full-bleed images and fitted images.
Fitted images are great for vertical designs so it’s easier to see all the details with minimal scrolling.
And of course, you can still mix HTML into your posts if you need to.