References

• The CommonMark 60 second syntax guide, Use the syntax in the first column for this class!

• Commonmark home page

• Markdown on Wikipedia

• Online Markdown previewer/HTML converter

Poll

How many have used something like Markdown, ReStructured Test (RST), …

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 content, 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.

How to Practice

A number of choices

• Online Markdown previewer/HTML converter
• My interactive classroom App
• Most Code editors/IDEs have Markdown rendering plugins (Brackets, VSC, Atom…)
• GitHub will automatically render your README.md file when you push it to your repo

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…

Links and Images

• Link: [text stuff](url)

• Image ![image text](url)

Lists

• Bullet lists start with * followed by a space.

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

Paragraphs and Block Quotes

• A new paragraph is started by skipping a line

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

Code 1

• Inline code uses “backticks” `a = 3;` gives a=3;
• For a block of code with syntax highlighting use

    ```html
    <p>Some HTML code <span>highlighted</span></p>
    <p>Another Paragraph</p>
    ```

Code 2

Syntax Highlighted Code

<p>Some HTML code <span>highlighted</span></p>
<p>Another Paragraph</p>

Practice Question

If time permits we’ll do a practice question together!

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.