Instant HTML5 webviews for any markdown content – Notes by Dan Untenzu (pixelbrackets)

tl;dr Convert Markdown text to a minimal, styled HTML5 page with one line of PHP — lightweight, clean, and no fuss.

If you're working with Markdown and need a quick way to convert it into a styled HTML5 page, the pixelbrackets/markdown-mini-page package offers a straightforward solution.

This PHP package transforms Markdown content into a complete HTML5 document with minimal styling, making it ideal for generating simple web pages without the overhead of a full templating engine or static site generators.

Motivation

The markdown-mini-page package is based upon my existing package html5-mini-template, which I use to provide a minimalistic, HTML5 template for quick rendering of status pages, TOC pages, or any other single-serving site.

Require the package, pass a text, optionally select a stylesheet, done.

Using markdown I may simplify this setup even more, which is pretty rad whenever a script is generating text & data and I want to avoid wrapping HTML markup during this process. Adding some hashtags, asterisk and brackets, is sufficient and the generator will do the rest.

This is also the next reason for this package. Other Markdown scripts only translate the pure content 1:1 into HTML. But I want a complete HTML5 page, with header, title, metatags and footer. And above all, it should look a bit pretty. So I don't want to use standard browser styles, but I also don't want to have to load a big CSS framework like Bootstrap just to make a heading and two lists look nice.

Example Usage

Here's how you can use markdown-mini-page to convert Markdown content into a styled HTML5 page:

<?php
// composer require pixelbrackets/markdown-mini-page
require 'vendor/autoload.php';

use Pixelbrackets\MarkdownMiniPage\MarkdownMiniPage;

$markdownContent = <<<EOD
# Welcome

This is a simple *Markdown* to _HTML_ example.
EOD;

$page = (new MarkdownMiniPage())
    ->setContent($markdownContent)
    ->getMarkup();

echo $page;

This script will output a complete HTML5 page with the converted Markdown content. By default, it applies the minimal stylesheet gfm (GitHub Flavored Markdown Stylesheet), which renders the output just like README pages on GitHub.

But you can customize the appearance by specifying a different stylesheet, like mui (MUI - Material Design CSS Framework), skeleton (Skeleton), or even custom ones (👉 see available options).

$page = (new MarkdownMiniPage())
    ->setContent($markdownContent)
    ->setStylesheet('skeleton')
    ->getMarkup();

This flexibility allows you to tailor the output to match your desired look and feel, and still be very, very lightweight to use.

For more information and to access the source code, check out the package repository markdown-mini-page.

Feel free to explore and integrate it into your projects to streamline Markdown to HTML conversions.

Update: You don't want to load the stylesheet from an external source due to GDPR privacy concerns? Use the option setStylesheetMode to fetch and render the given stylesheet inline.

Update: The package now includes the barebone stylesheet. The Barebone Stylesheet is designed to provide “just enough styles to make a website look good everywhere”.

Utilizing browser styles it adds just enough CSS styles to make your content look neat and readable, without introducing the filesize and complexity that often comes with larger CSS frameworks. If you're looking for a simple, clean, and very, very minimal set of styles, this is the perfect solution.

Check out the demo or use the barebone keyword within the markdown page package:

$page = (new MarkdownMiniPage())
    ->setContent($markdownContent)
    ->setStylesheet('barebone')
    ->getMarkup();