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.

GitBook: Build beautiful interactive books using Git and Markdown

gitbook

Write your books and courses using Markdown, GitBook will convert it to a complete static website.

Installable using npm. A companion app (pictured below) to create your books – in case you want a live preview along your edits – is also available.

gitbook

Building the book to a PDF/eBook is also possible … strongly considering to rewrite my course materials, already freely available online.

GitBook: Build beautiful interactive books using GitHub/Git and Markdown →
Example Book: Learn Markdown →

Sublime Text Markdown Syntax Highlighting

Instructions for use with SublimeText3 in the comments below

sublime-markdown

One of the features I find lacking in Sublime Text is the default support for Markdown syntax highlighting. Fortunately Sublime Text can be customized and we can define a color scheme of our own.

To get the results as shown in the screenshot above, edit your theme file (~/Library/Application Support/Sublime Text 2/Packages/Color Scheme - Default/Monokai.tmTheme) and paste in the code below (which is inspired upon this gist) just before the </array>

<dict>
	<key>name</key>
	<string>Markdown: Linebreak</string>
	<key>scope</key>
	<string>text.html.markdown meta.dummy.line-break</string>
	<key>settings</key>
	<dict>
		<key>background</key>
		<string>#A57706</string>
		<key>foreground</key>
		<string>#E0EDDD</string>
	</dict>
</dict>
<dict>
	<key>name</key>
	<string>Markdown: Raw</string>
	<key>scope</key>
	<string>text.html.markdown markup.raw.inline</string>
	<key>settings</key>
	<dict>
		<key>foreground</key>
		<string>#269186</string>
	</dict>
</dict>
<dict>
	<key>name</key>
	<string>Markdown: Punctuation for Inline Block</string>
	<key>scope</key>
	<string>punctuation.definition.raw.markdown</string>
	<key>settings</key>
	<dict>
		<key>foreground</key>
		<string>#269186</string>
	</dict>
</dict>
<dict>
	<key>name</key>
	<string>Markup: Heading</string>
	<key>scope</key>
	<string>markup.heading</string>
	<key>settings</key>
	<dict>
		<key>fontStyle</key>
		<string>bold</string>
		<key>foreground</key>
		<string>#cb4b16</string>
	</dict>
</dict>
<dict>
	<key>name</key>
	<string>Markup: Italic</string>
	<key>scope</key>
	<string>markup.italic</string>
	<key>settings</key>
	<dict>
		<key>fontStyle</key>
		<string>italic</string>
		<key>foreground</key>
		<string>#839496</string>
	</dict>
</dict>
<dict>
	<key>name</key>
	<string>Markup: Bold</string>
	<key>scope</key>
	<string>markup.bold</string>
	<key>settings</key>
	<dict>
		<key>fontStyle</key>
		<string>bold</string>
		<key>foreground</key>
		<string>#586e75</string>
	</dict>
</dict>
<dict>
	<key>name</key>
	<string>Markdown: Punctuation for Bold, Italic</string>
	<key>scope</key>
	<string>punctuation.definition.bold.markdown, punctuation.definition.italic.markdown</string>
	<key>settings</key>
	<dict>
		<key>foreground</key>
		<string>#586e75</string>
	</dict>
</dict>
<dict>
	<key>name</key>
	<string>Markup: Underline</string>
	<key>scope</key>
	<string>markup.underline</string>
	<key>settings</key>
	<dict>
		<key>fontStyle</key>
		<string>underline</string>
		<key>foreground</key>
		<string>#839496</string>
	</dict>
</dict>
<dict>
	<key>name</key>
	<string>Markup: Quote</string>
	<key>scope</key>
	<string>markup.quote</string>
	<key>settings</key>
	<dict>
		<key>fontStyle</key>
		<string>italic</string>
		<key>foreground</key>
		<string>#268bd2</string>
	</dict>
</dict>
<dict>
	<key>name</key>
	<string>Markup: Separator</string>
	<key>scope</key>
	<string>meta.separator</string>
	<key>settings</key>
	<dict>
		<key>background</key>
		<string>#eee8d5</string>
		<key>fontStyle</key>
		<string>bold</string>
		<key>foreground</key>
		<string>#268bd2</string>
	</dict>
</dict>

Once you’ve saved the theme you should get the same results as seen in the screenshot above (no need for a restart) when viewing markdown files

Whilst you are at it you can also install Markdown Preview which lets you preview your files in the browser (and thus convert it to HTML)