snf.wsring.net

Any Markdown / Pandoc mavens know how to tweak the HTML DOM generated for HTML pages?

I'm looking at one for an article which doesn't seem to generate

<

article> or elements, though if it did either, would make some layout / CSS issues a lot easier to deal with.

Problem now is that when I set additional margins within <blockquote> segements, they don't really or consistently differ from the adjacent <br> elements. I have a sad.

The CSS I'm using, in part (and yes, I can share the full stylesheet, though this seems to be the operative code):
body { 
  margin: 1rem auto; 
  max-width: 90rem; 
  padding: 0 4rem 0.5rem; 
  width: auto; 
  font-size: 1rem; 
  line-height: 1.4; 
} 

blockquote { 
    margin-left: 8em; 
    margin-right: 6em; 
} 

article, p, ol, ul, li, div { 
    width: auto; 
    max-width: 45rem; 
    margin: 0 auto; 
    line-height: 1.4; 
} 

p { 
    margin: 1em auto; 
}

What happens is that the blockquote margins are acting against the full page width, and push the blockquote block back and forth across the full page, rather than constraining it within the region bounded by the <br> blocks. Given that the blockquotes aren't within the <br> blocks, that makes sense, but it's not the effect I want.

I'd also like to preserve the option to be able to set elements (images, sidenotes, callouts) within the left or right margins.

I'm thinking that changing the DOM to include an article element would make that easier, as I could set the width of the article or main elements.

Present DOM:

* html
* head
* body
* header
* nav
* p
* blockquote
* p
* body /
* html /

That would better be:

* html
* head
* body
* header
* nav
* article
* p
* blockquote
* p
* article /
* body /
* html /

("element /" is being used for closing tags)

Looking at HTML5 semantic elements:

* \<section>
* \<nav>
* \<article>
* \<aside>
* \<hgroup>
* \<header>
* \<footer>
* \<time>
* \<mark>

... "article" is what I'm looking for.o

Though ... Dive in to HTML5 doesn't use these: <view-source:http://diveinto.html5doctor.com/past.html>

But yeah: if I could shim an <article> tag in there, I think I'd be happier.

And yes, I can (and probably will) CodePen this in a bit.

#pandoc #markdown #html #css
And this seems to be it:

So, for Debian, the default HTML5 template lives at:

/usr/share/pandoc/data/templates/default.html5

And within that you'll find:
$if(toc)$ 
<nav id="$idprefix$TOC"> 
$table-of-contents$ 
</nav> 
$endif$ 
$body$ 
$for(include-after)$ 
$include-after$ 
$endfor$ 
</body>

So an alternate template with a couple of <article> </article> tags thrown around $body$ should fix that for me.

Time to experiment.
... and that seems to have fixed it.

I've created ~/.pandoc/ and populated that with the same subdirs as are in /usr/share/pandoc/data/ including the templates subdirectory.

I've copied the system templates there, and edited both the HTML4 and HTML5 defaults to include <article> wrappers around the $body$.

Tweaking CSS now, with effects far closer to what I'd wanted.

(It's CSS, of course I'm not getting exactly what I wanted ;-)