WebTrash

Markdown

This document describes how the HTML output of the markdown rendering functionality in WebTrash works, how to approach writing CSS for the HTML layout, and other details.

Overall Document Structure

When generating HTML files from Markdown, WebTrash tries its best to generate a valid HTML document. This is the HTML produced by WebTrash from a blank file (whitespace may differ).

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <main>
        </main>
    </body>
</html>

You may notice that it automatically fills in the language as en. This value is currently not configurable, as the primary target language is currently English. This may change in the future though. It also automatically sets the charset to UTF-8. This limitation is completely intentional, since other encodings have become largely obsolete, especially on the web. Finally, it sets the viewport variables such that dealing with mobile-friendly CSS is a little easier.

All content from the Markdown document is inserted inside the <main> element, the custom header supported by WebTrash modifies other parts of the document normally not accessible or configurable from Markdown.

Custom headers and metadata

The custom header supported by WebTrash has a very simple structure. For the most part, it's just a list of key-value pairs, one on each line. For navigation (explained later), the value can be further split into another pair separated by ->. The header is delimited by lines containing only ===== at the start and the end. The header supports the following configuration.

TODO

Basic HTML Structure

In terms of the document content, WebTrash behaves exactly like cmark-gfm for the most part. The only difference is support for footnotes in the resulting documents.

Specifically, text like the following:

# Heading 1

Some text.

## Heading 2

Some more text.

Will result in output roughly like this (modulo whitespace):

<h1>Heading 1</h1>
<p>Some text.</p>
<h2>Heading 2</h2>
<p>Some more text.</p>