[hakyll] including CSS in markdown post file?

Discussion:

j***@gmail.com

2018-06-08 11:48:03 UTC

I'd like to be able to include some post-specific CSS code in my markdown
posts. I have a global CSS file too, but many of my posts tend to have
some local CSS snippets too, especially for using flexbox for image
layout. A global CSS becomes difficult to maintain.

Anyone have any good ideas or snippets on how I might include a CSS
fragment directly in my .md file so that it'd automatically be included for
that particular post? Ideally I'd like the CSS to be inlined in the
generated HTML.

I guess another option would be including some kind of a CSS library like
Bulma and using their column implementation. But IMO that's a bit overkill
when all I need is a couple of flexbox declarations.

Another thing I hit with Pandoc was that it seems to add some extra <p>'s
for raw HTML. E.g.,

<div class="foo">
<img ...>
</div>

This gets compiled into

<div class="foo">
<p>
<img ...>
</p>
</div>

(This breaks CSS rules unless I declare my CSS rules to incude that p
element.)

Anyone have a fix for this? It works fine (ie., doesn't add <p>) if I
write the raw HTML on a single line.

I realize this second question is more of a Pandoc question, but mentioning
it here anyway, in case someone's hit this and has a good way to deal with
that.

Janne

--
You received this message because you are subscribed to the Google Groups "hakyll" group.
To unsubscribe from this group and stop receiving emails from it, send an email to hakyll+***@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

'pdoherty' via hakyll

2018-06-08 14:18:46 UTC

Permalink

This doesn't address inlining the CSS, but should cover the most basic version of your use case.

https://gist.github.com/ethagnawl/00774256f446f542c3345527b6226279

PRD

âââââââ Original Message âââââââ

I'd like to be able to include some post-specific CSS code in my markdown posts. I have a global CSS file too, but many of my posts tend to have some local CSS snippets too, especially for using flexbox for image layout. A global CSS becomes difficult to maintain.
Anyone have any good ideas or snippets on how I might include a CSS fragment directly in my .md file so that it'd automatically be included for that particular post? Ideally I'd like the CSS to be inlined in the generated HTML.
I guess another option would be including some kind of a CSS library like Bulma and using their column implementation. But IMO that's a bit overkill when all I need is a couple of flexbox declarations.
Another thing I hit with Pandoc was that it seems to add some extra <p>'s for raw HTML. E.g.,
<div class="foo">
<img ...>
</div>
This gets compiled into
<div class="foo">
<p>
<img ...>
</p>
</div>
(This breaks CSS rules unless I declare my CSS rules to incude that p element.)
Anyone have a fix for this? It works fine (ie., doesn't add <p>) if I write the raw HTML on a single line.
I realize this second question is more of a Pandoc question, but mentioning it here anyway, in case someone's hit this and has a good way to deal with that.
Janne
--
You received this message because you are subscribed to the Google Groups "hakyll" group.
For more options, visit https://groups.google.com/d/optout.

Janne Hellsten

2018-06-09 20:59:30 UTC

Permalink

Thanks for the tip! This is a really easy way to implement most of what I
needed.

I eventually went for a slightly different approach. I prefer the
post-specific CSS declarations to reside in the same file as the post
markdown.

I went ahead and added some Pandoc transformations to do this exactly the
way I wanted it. Here's a commit that shows what I did, in case someone
else is looking for this type of thing:

https://github.com/nurpax/blog/commit/2af127eededb88a5ef25d4ada67a8c2abda9f84a

The added functionality works like this:

Add the following into a post written in .md:

8<
``` {.hakyll-inline-css}
div.css-test {
background-color: #00f;
}
```

<div class="css-test">
xyzzy
</div>
8<

During compilation, if Pandoc finds a code block with the
"hakyll-inline-css" class, it will stick that into that posts' <head>
inside a <style> element (through adding a Hakyll constField into postCtx
and some template mods). My pandoc compiler pipeline will also remove the
.hakyll-inline-css code blocks before it gets turned into HTML.

Janne

On Fri, Jun 8, 2018 at 5:18 PM, 'pdoherty' via hakyll <

Post by 'pdoherty' via hakyll
This doesn't address inlining the CSS, but should cover the most basic
version of your use case.
https://gist.github.com/ethagnawl/00774256f446f542c3345527b6226279
PRD
âââââââ Original Message âââââââ
I'd like to be able to include some post-specific CSS code in my markdown
posts. I have a global CSS file too, but many of my posts tend to have
some local CSS snippets too, especially for using flexbox for image
layout. A global CSS becomes difficult to maintain.
Anyone have any good ideas or snippets on how I might include a CSS
fragment directly in my .md file so that it'd automatically be included for
that particular post? Ideally I'd like the CSS to be inlined in the
generated HTML.
I guess another option would be including some kind of a CSS library like
Bulma and using their column implementation. But IMO that's a bit overkill
when all I need is a couple of flexbox declarations.
Another thing I hit with Pandoc was that it seems to add some extra <p>'s
for raw HTML. E.g.,
<div class="foo">
<img ...>
</div>
This gets compiled into
<div class="foo">
<p>
<img ...>
</p>
</div>
(This breaks CSS rules unless I declare my CSS rules to incude that p element.)
Anyone have a fix for this? It works fine (ie., doesn't add <p>) if I
write the raw HTML on a single line.
I realize this second question is more of a Pandoc question, but
mentioning it here anyway, in case someone's hit this and has a good way to
deal with that.
Janne
--
You received this message because you are subscribed to the Google Groups "hakyll" group.
To unsubscribe from this group and stop receiving emails from it, send an
For more options, visit https://groups.google.com/d/optout.
--
You received this message because you are subscribed to a topic in the
Google Groups "hakyll" group.
To unsubscribe from this topic, visit https://groups.google.com/d/
topic/hakyll/ztN822WgnH8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to
For more options, visit https://groups.google.com/d/optout.