What's best way to style markdown on single pages

support
1

Hello all,

First off, thank you sincerely to you for reading this post. I genuinely appreciate your time and guidance in helping me improve my use of Hugo.

I’ve been gimping along with Hugo for a year now and I’ve discovered my own little way of making sites much faster at a far greater quality than building static page by page. Unfortunately, I’m not taking full advantage in a number of ways. I’ve improved my templating with baseof.html and creating custom front matter with variable inputs but now I’m dying to unlock the markdown of item detail pages, single pages.

I build nearly exclusively in AMP canonical websites. I don’t want to use the AMP output option on non-AMP pages. I’m looking for a simple way to use markdown with styling that affects those single pages.

What is the best or proper way to achieve the following using markdown:

My H1

<h1 class="h2 col-10 mx4 pb3 pt3">My H1</h1>

My paragraph.
<p class="col-10 mx3 pb1 pt1">My paragraph</p>

This next one I’d love to be able to define the variable inputs for the width and height. I have seen shortcodes may be the best for this next one. For simple h1 and p styling, shortcodes would be as long as the string of text.

My <amp-img>
![Image of Legal Team](https://firebasestorage.googleapis.com/v0/b/appsradix.appspot.com/o/images%2Fdrinking-and-driving.jpg?alt=media&token=0b420330-cc0b-4702-8d1e-bd3349ad52be "Legal Team")

to become:

<amp-img class="col-8 mx3 px2" src="https://firebasestorage.googleapis.com/v0/b/appsradix.appspot.com/o/images%2Fdrinking-and-driving.jpg?alt=media&token=0b420330-cc0b-4702-8d1e-bd3349ad52be" width="630" height="393" alt="Image of Legal Team" title="Legal Team" layout="responsive"></amp-img>

Right now… I’m literally dumping my HTML into .md pages I create… It’s a mess and not nearly as fast to add content albeit superior to making pages individually old school way.

Thank you for your guidance!

2

I’ll make some suggestions.

For your h1, I’d just style the title with those classes attached, in the template. But that’s easy, because h1 is always important, and most pages only have one. I’m not sure how to do the p though. I mean, I’d probably use replaceRE to replace those elements. But maybe your CSS framework has an alternative to setting columns, and you can put those on a main or article instead; that’s what I’d try.

For the images, use shortcodes. You can probably copy and make minor changes to the included figure shortcode.

1 Like