rorty rorty - 1 month ago 5
CSS Question

How to automatically style HTML output of kramdown converter?

I'm writing notes in kramdown, then using the

kramdown
converter to get an html file to read locally (not on a server).

$ kramdown notes.txt > notes.html


My workflow is to continually update
notes.txt
, then render
notes.html
quickly to view it.

I want to style the notes, so I made a CSS file
notes_style.css
that formats the HTML body:

body {
...
}


I added a
<head>
tag to
notes.txt
and put in a link to my stylesheet. Then I put
<body>
tags around the contents of
notes.txt
:

<head>
<link rel="stylesheet" type="txt/css" href="themes/notes_style.css" />
</head>
<body>
...
</body>


I then realized that, since
kramdown
ignores HTML blocks, nothing in
<body>
is converted to HTML. How am I supposed to style the contents of
<body>
while being able to convert the kramdown to HTML? I don't want to manually add in
<body>
tags every time I use
kramdown
.

I suspect that something's wrong with my workflow, but not sure what the right way to do it is.

Answer

Kramdown has the parse_block_html option that causes it to parse the contents of HTML elements. You can use it like this:

$ kramdown --parse-block-html notes.txt > notes.html

Alternatively, Kramdown also looks for a special markdown attribute on HTML elements. If it is set to '1', then Kramdown will parse the contents of that element as markdown. So you could do this (you need the quotes around 1, Kramdown’s HTML parser is quite strict):

<head>
  <link rel="stylesheet" type="txt/css" href="themes/notes_style.css" />
</head>
<body markdown='1'>
Content here will be parsed _as Markdown_.
</body>

In both cases, your body content needs to be left aligned as normal, you can’t indent it as you might naturally do writing HTML nested inside an element.