Trying to figure out if there’s a way to take the content being generated by the markdown and add css classes to it for the theme (asside from javascript). I mean I could write inline html in the content, but I’d rather the content remain semantic and have the final html contain the needed css classes.
Your best bet here is likely shortcodes. They allow you to keep your content nice and tidy while providing a nice intermediary between your markdown and templating layers.
I’m soliciting feedback if you have time to also check out a revamp of the docs that’s currently underway. Cheers.
well my understanding thus far is that this, {{ .Content }}, shortcode places the markdown comment, and I know there are pipes, but I have no idea how I would get from .Content to adding blockquote class to all blockquote elements
The {{.Content}} is a variable and not a shortcode. This variables is called inside templates.
A shortcode is a small snippet you can call within your content and not your templates. You could create a shortcode called layouts/shortcodes/bq.html with the following content:
<blockquote class="blockquote">
{{.Inner}}
</blockquote>
Then you can call the shortcode in your markdown files with the % syntax, which tells Hugo to run the inner content through the Blackfriday markdown parser:
{{% bq %}}
Without the fear of falling, there is no joy in flight.
{{% /bq %}}
At render, this would then output…
<blockquote class="blockquote">
<p>Without the fear of falling, there is no joy in flight.</p>
</blockquote>
But for something as simple as just appending that class to a group of block quotes inside your body copy, I don’t see too much harm in doing it on the client if your’e trying to keep *.md as commonmark-observant as possible. If it’s just a matter of styling, especially for an element that’s so basic, I would consider targeting it based on specificity in your stylesheets and not even worrying about the class in the first place.
As for next steps, I recommend starting with the introduction to shortcodes to see their role in content management. Then, once you get the concept, refer to the template documentation I gave you above. HTH
right but that would mean tracking down and maintaining the {{% bq %}} inside of the markdown, instead of just adding the class to the <blockquote> that the markdown generated from > my quote.
Yes, that was my point about the common mark spec. Please read my full comment since I also offered other options. You might want to check out Hugo’s other supported formats via external helpers since they may offer you more flexibility. HTH.
Search this forum about mmark
1 Like
I read it, currently to be common mark compliant the easiest way to solve this problem is actually, just writing this, though I don’t believe in putting html in markdown, it’s completely valid (Trying to get it converted into an extension, or otherwise optional though due to security issues). That seems a lot better than using a shortcode
<blockquote class="blockquote">
<p>Without the fear of falling, there is no joy in flight.</p>
</blockquote>
and yes, to styling obviously this can be resolved with css, issues have been reported to the theme (actually fixed already, but it probably means maintaining the patch in the theme) and bootstrap in regards to the silliness of this…
I was thinking you could postprocess the content with a pipe using xpath, or css selectors, to get the elements and then modify them. That said I haven’t found anything that suggests that there are any css/xpath or dom manipulation API’s accessible in shortcode.
The bq is an example of how a shortcode works and not an example of a recommended implementation. It’s a foo-bar-baz kind of thing in response to the following:
Trying to figure out if there’s a way to take the content being generated by the markdown and add css classes to it for the theme (asside [sic] from javascript).
I am interested in this next comment, however, and would like to help:
If you are leveraging Hugo’s template lookup order, you can make modifications easily while maintaining compatibility with the upstream. I am not sure why you feel you need to maintain the patch, but a good recommendation to any theme author would be to allow for additional stylesheets to come at the bottom of the cascade for “last in wins.” CSS selectors in your own source stylesheet–especially if you’re only worried about <blockquotes>–is still your best bet here, although you already mentioned that it’s been fixed in whatever theme it is you are using.
Postprocessing to manage visual styling of a single element is just going to give you an unnecessary headache, FWIW.
Agreed that you should check out mmark. Thanks @Mikhail 
I am not sure why you feel you need to maintain the patch
you’re misunderstanding, if bootstrap changes its implementation (likely) the author of the theme would probably find it desirable to change his. Also since I’m not submoduling I’d have to reimport.
Oh and you don’t realize it, but I’ve read everything you’ve linked, largely in a skimming speed reading form, but I haven’t found any of it useful for solving this kind of problem.
The theme patch will work for me for now. Have a nice day.
Glad it all worked out 