Tag Archives: markdown

Glow — Render Markdown on the CLI

Glow is a terminal based markdown reader designed from the ground up to bring out the beauty — and power — of the CLI.

Installation per Homebrew

brew install glow

Once installed, you can open files in several ways:

# Read from file
glow README.md

# Read from stdin
glow -

# Fetch README from GitHub / GitLab
glow github.com/charmbracelet/glow

# Fetch markdown from HTTP
glow https://host.tld/file.md

Glow — Render markdown on the CLI, with pizzazz! 💅🏻 →

Render styleable Markdown in your HTML with <md-block>

To render Markdown on web pages, Lea Verou created <md-block>. It’s a zero-dependency Custom Element that, unlike other solutions, renders the content in the light DOM which allows you to style the output easily.

There are many web components these days to render Markdown to HTML. However, all render the resulting Markdown in Shadow DOM, making it painful to style like a regular part of the page, which my use cases required.

I also wanted a few more things existing web components didn’t have.

So I made my own. Feel free to use it. Or don’t. 🤷🏽‍♀️ I primarily wrote it to scratch my own itch anyway! 😊

Projects that grow out of a personal necessity are the best ones 🙂

~

Load it in via a <script> tag, or import the proper classes.

<script type="module" src="https://md-block.verou.me/md-block.js"></script>
import { MarkdownBlock, MarkdownSpan, MarkdownElement } from "https://md-block.verou.me/md-block.js";

Both methods self-register the <md-block> Custom Element, which can then be used as follows:

<md-block>
	# Heading

	Text **bold text** *italic text* ~strike~

	```js
	test.foo();
	```

	```html
	&lt;foo&gt;
	```

	* List item 1
	* List item 2
</md-block>

~

In addition to the simple example above, it also supports rendering externally loaded markdown, allows customisation of the start heading level, has syntax highlighting (powered by Prism), can auto-link the headings, etc. Also comes with a <md-span> Custom Element (which is also registered upon loading).

In order to get to the final result, some heavy “Yak Shaving” was involved though. Now that sounded a wee bit too familiar to be honest … 😅

<md-block> →
On Yak Shaving and <md-block>, a new HTML element for Markdown →

ibis — A PHP tool that helps you write eBooks in markdown and convert to PDF

Mohamed Said recently wrote the book “Laravel Queues in Action”. To create the book he wrote it Markdown and then used his self-created tool ibis to generated the PDF and ePub versions.

Installation per Composer:

composer global require themsaid/ibis

After which you start a new project with ibis init

Check out the preview of “Laravel Queues in Action” to get an idea of what is being generated.

themsaid/ibis →
Laravel Queues in Action Preview (Light) →
Laravel Queues in Action Preview (Dark) →

mermaid – Generation of diagram and flowchart from text in a similar manner as markdown

Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.

The code for the sequence diagram at the top is this:

sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?

💁‍♂️ Note that this library does not render to a flattened image, but to an SVG with text nodes and such.

Also supports Decision Trees, Pie Charts, Gantt Charts, Class Diagrams, … A CLI version is also available/

mermaid →
mermaid-cli →

Convert a Google Doc to Markdown or HTML with “Docs to Markdown”

Now this comes in handy:

Docs to Markdown (GD2md-html) converts Google Docs to simple, readable Markdown or HTML.

This add-on allows you to create documents using the excellent editing and collaborative features of Google Docs, but publish as Markdown or HTML that you can store as text files using a version-control system.

Docs to Markdown on GSuite Marketplace →
Docs to Markdown Docs (GitHub Wiki) →

Hat tip, Katie!

Typora – a minimal markdown reading & writing app

Typora will give you a seamless experience as both a reader and a writer. It removes the preview window, mode switcher, syntax symbols of markdown source code, and all other unnecessary distractions. Replace them with a real live preview feature to help you concentrate the content itself.

Looks great! Not sure if it’s still actively developed though … it’s been around since March 2015, and it looks like it hasn’t received any big updates ever since. Available on all platforms.

Typora – a minimal markdown reading & writing app →

Rendering Markdown using Custom Elements v1

Inspired upon a v0 implementation, I’ve recreated a Markdown renderer in Custom Elements v1. The result is <custom-markdown>.

The code itself is pretty straightforward: other than some (contained) styling the custom element uses showdown to convert the Markdown to HTML. This conversion is triggered in the connectedCallback().

class Markdown extends HTMLElement {
  
  constructor() {
    super();
    const shadowRoot = this.attachShadow({mode: 'closed'});
    shadowRoot.innerHTML = `
      <style>
        :host { display: block; font-family: monospace; }
      </style>
      <div class="output"></div>
    `;
    this.output = shadowRoot.querySelector('.output');
    this.converter = new showdown.Converter();
  }

  connectedCallback() {
    this.output.innerHTML = this.converter.makeHtml(this.innerHTML);
  }
  
};

customElements.define('custom-markdown', Markdown);

Here’s a working example (if your browser supports it):

See the Pen Custom Elements v1: Render Markdown with <custom-markdown> by Bramus (@bramus) on CodePen.

Related: Introducing Custom Elements →