Skip to content

Instantly share code, notes, and snippets.

@aamnah
Last active June 27, 2024 12:47
Show Gist options
  • Select an option

  • Save aamnah/b329285b615db89275ec833308a28b35 to your computer and use it in GitHub Desktop.

Select an option

Save aamnah/b329285b615db89275ec833308a28b35 to your computer and use it in GitHub Desktop.
An exhibit of Markdown
title date draft tags
Typography sample
2024-06-26
true
sample

A lead or excerpt should go here. two or three lines are good. About 320 chars is also fine.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, in dolores maxime eveniet saepe libero eum consequatur, commodi enim eos ab doloremque ratione illum quaerat voluptas ipsa explicabo corrupti laborum excepturi. Adipisci, dolores, recusandae! Sit tempora dolorum, ipsum cupiditate libero.

This note demonstrates some of what Markdown is capable of doing.

Note: Feel free to play with this page. Unlike regular notes, this doesn't automatically save itself.

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

Basic formatting

Paragraphs can be written like so. A paragraph is the basic block of Markdown. A paragraph is what text will turn into when there is no reason it should become anything else.

Paragraphs must be separated by a blank line. Basic formatting of italics and bold is supported. This can be nested like so. We can also Strikethrough.

// syntax highlighted code block
let name = 'Aamnah'
let hobby = 'DIY'

console.info(`${name} loves ${hobby})

Lists

Ordered list

  1. Item 1
  2. A second item
  3. Number 3

Note: the fourth item uses the Unicode character for Roman numeral four.

Unordered list

  • An item
  • Another item
  • Yet another item
  • And there's more...

Paragraph modifiers

Code block

Code blocks are very useful for developers and other people who look at code or other things that are written in plain text. As you can see, it uses a fixed-width font.

You can also make inline code to add code into other things. Let's add another line to see how the inline code looks with the current line height

Another Code Block

public static string[] SplitComma(string s)
{
  return s.Split(',')
          .Select(s => s.Trim())
          .Where(s => s != string.Empty)
          .ToArray();
}

Quote

Here is a quote. What this is should be self explanatory. Quotes are automatically indented when they are used.

This is a **block** quote Moi

Headings

There are six levels of headings. They correspond with the six levels of HTML headings. You've probably noticed them already in the page. Each level down uses one more hash character.

Headings can also contain formatting

They can even contain inline code

Of course, demonstrating what headings look like messes up the structure of the page.

I don't recommend using more than three or four levels of headings here, because, when you're smallest heading isn't too small, and you're largest heading isn't too big, and you want each size up to look noticeably larger and more important, there there are only so many sizes that you can use.

URLs

URLs can be made in a handful of ways:

Horizontal rule

A horizontal rule is a line that goes across the middle of the page.


It's sometimes handy for breaking things up.

Images

Markdown can also contain images. I'll need to add something here sometime.

image from the web

Tables

Name Age Balance
Ali 24 $1600
Fatima 12 $12
Lily 40 $1

Table cells can be aligned too. Left aligned is default (for ltr layouts), ---: means right aligned and :---: means centered aligned text.

Tables Are Cool
col 1 is left-aligned $1600
col 2 is centered $12
col 3 is right-aligned $1

Here is an HTML table with more attributes like <caption>, <thead>, <tbody> and <tfoot>. Yes, you can have HTML right inside Markdown and it will render just fine.

Front-end web developer course 2021
Person Most interest in Age
Chris HTML tables 22
Dennis Web accessibility 45
Sarah JavaScript frameworks 29
Karen Web performance 36
Average age 33

Finally

There's actually a lot more to Markdown than this. See the official introduction and syntax for more information. However, be aware that this is not using the official implementation, and this might work subtly differently in some of the little things.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment