Markdown Cheatsheet

Geoff — Thu, 16 Feb 2023 18:16:42 +0000

A large collection of code samples which have been tested against GitHub's markdown parser... so you don't have to.

Code Examples with Preview

Block Elements

Code Preview

Paragraph

This is a paragraph.

This is a paragraph.

Headers (Sextext-style)

Header 1
========

Header 2
--------

Header 1

Header 2

Headers (Atx-style)

# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

Headers (Atx-style closed)

# Header 1 #
## Header 2 ##
### Header 3 ###
#### Header 4 ####
##### Header 5 #####
###### Header 6 #####

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

Blockquote

> Lorem ipsum dolor sit amet [...]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

Blockquote with nested elements

> ## This is a header.
> 1. This is the first list item.
> 2. This is the second list item.
>
> Here's some example code:
>
>     Markdown.generate();

This is a header.

This is the first list item.

This is the second list item.

Here's some example code:
Markdown.generate();

List

- Red
- Green
- Blue

+ Red
+ Green
+ Blue

* Red
* Green
* Blue

Red
Green
Blue

Ordered List

1. Buy flour and salt
1. Mix together with water
1. Bake

Buy flour and salt
Mix together with water
Bake

Code Block

Normal paragraph.
    Code

Normal paragraph.

Code

Horizontal Rules

* * *

***

*****

- - -

---------------------------------------

Inline Elements

Code	Preview
Links
`This is [an example](http://example.com "Example") link. [This link](http://example.com) has no title attr. This is [an example] [id] reference-style link. [id]: http://example.com "Optional Title"`	This is an example link. This link has no title attr. This is an example reference-style link.
Emphasis
`single asterisks _single underscores_ double asterisks __double underscores__`	single asterisks single underscores double asterisks double underscores
Code
This paragraph has some `code` in it.	This paragraph has some `code` in it.
Image
`![Alt Text](https://get.svg.workers.dev/?s=64&f=gray "Image Title")`

if you want to add static website forms
to your website I recommend you look at https://fabform.io

static website forms

Geoff — Thu, 16 Feb 2023 00:19:35 +0000

If you are using a static website generator (SSG) like Hugo, Jekyll, eleventy or many of the others, to create static websites (only plain HTML, CSS, Javascript) you may we wondering how can you can create a contact form and collect all the form submissions if there is not website backend.

This is were the use of a forms back-end comes into play.

I will be showing you in this quick tutorial a very good static website forms backed called Fabform.

First create a free account at https://fabform.io

From there, click on Create Endpoint and give it any name you like.

Make a note of the form_id for your newly created endpoint.

In your website, you create your HTML contact form in the usual way.

The only difference will be you point the forms action method to your newly created endpoint on fabform

<form action="https://fabform.io/f/{form_id}" method="post">
  <label for="email">Your Email</label>
  <input name="Email" id="email" type="email">
  <button type="submit">Submit</button>
</form>

Voila! That's it folks. You have a fully working static website contact form that will collect all your contact form submissions.

DEV Community: Geoff

Markdown Cheatsheet

Code Examples with Preview

Block Elements

Header 1

Header 2

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

This is a header.

Inline Elements

static website forms