Markdown

Dr. Greg Bernstein

Updated August 6th, 2019

Markdown

References

What is it?

From the Commonmark home page:

It’s a plain text format for writing structured documents, based on formatting conventions from email and usenet.

My Take

Using raw HTML can be quite tedious for everyday types of writing or code documentation. In addition, taking the time to insert HTML tags can make the already painful task of writing even more horrible.

This is why I use markdown to generate the bulk of my HTML, but not HTML GUIs.

Who Uses It?

From Wikipedia

Sites such as GitHub, Bitbucket, Reddit, Diaspora, Stack Exchange, OpenStreetMap, and SourceForge use variants of Markdown to facilitate discussion between users.

More Uses

Markdown is very popular with static site generators. From the Wintersmith home page:

No more fiddling around with WYSIWYG editors. Once you start using Markdown to author your content you’ll never look back! Wintersmith’s markdown plugin allows you to use markdown as backing for all your sites content, not just blog posts.

GitHub and Markdown

  • GitHub renders the README.MD Markdown file for your repository.
  • This is how you will “submit” the write ups to your assignments.

Text Formatting

  • For italic surround with *, i.e., *CS351*, yields: CS351

  • For bold surround with **, i.e., **CS351**, yields CS351

  • Bold and italic? How about ***CS351***, yields CS351

Headings

You start a line with a # for an <h1>,

You start a line with ## for an <h2>,

Etc…

Paragraphs and Block Quotes

  • A new paragraph is started by skipping a line

  • A block quote is started with a > at the begining of a line.

Lists

  • Bullet lists start with * followed by a space.

  • Numbered lists start with a 1. followed by a space.

Let’s try it…

Go to online tester

What if I need more structure?

  • I want to use <section>, <aside>, <article> and other nice HTML5 elements.

  • The CommonMark specification allows you to put HTML blocks into your markdown document and have them interpreted as HTML!

  • This is how I add structure to the homework and other files.

Embedded HTML

<link href="hw2.css" rel="stylesheet">
<main>
<header>

# Assignment 3: DOM Practice, Restaurant Site -- Multiple Pages, More Style.

**Due**: Tuesday, September 11th, 2018 by 12 Midnight, 100 points.
</header>

<section class="weeklyQuestions">

## Weekly Questions

This week's questions are concerned with JavaScript and the DOM.

Node.js Library

Combined with Express

See file simpleMarkdownHandler.js

// Setup stuff
var commonmark = require('commonmark');
var reader = new commonmark.Parser();
var writer = new commonmark.HtmlRenderer();

// Later in function processing post
    let parsed = reader.parse(info.user_message);
    let niceMessage = writer.render(parsed);
    content += `${niceMessage}`;
// More stuff

In Action

Result

Not well styled!