Learning markdown️

Spacebook uses Markdown (specifically Markdown-it), which is a simple markup language designed for long form writing and prose. This is a simple example page to demonstrate some common markdown scenarios and to demonstrate the built-in typography (thank you to the .prose class and the designers behind Tailwind Typography).

Reference

See the official markdown-it demo for the tags you can use to produce the examples below.

Text and headers

Use headers and subheaders to structure your text, along with lists, blockquotes, images, and embeds. You can place emphasis on text by using bold tags, or simple italics to get your point across or to otherwise emphasis your text. Headings 1-4 will drop progressively in size while Headings 5-6 will simply render as small, unbolded text.

Basic images

You can drop images, diagrams, or illustrations anywhere in your content. Images are automatically set to 100% width and centered with a subtle border hover. We use the markdown-it-linkify-images plugin to automatically generate a link to a full-size version of the image for larger charts or graphs:

Image sizing

You are responsible for your image sizing and optimization, and should upload the smallest useful version of your image. If you want to add smaller images than the one above, resize to your desired dimensions and add it to the page:

If you don’t want to worry about image resizing or optimization, youu can use a free Cloudinary account to handle your image sizing on the fly in the cloud and serve it from a global CDN such as this example above. Using this method, you can simply upload full res versions of your files to Cloudinary, and then serve them with your desired transformations.

Lists

Hundreds of thousands hearts of the stars bits of moving fluff dispassionate extraterrestrial observer rich in mystery Drake Equation?

• carbon in our apple pies
• questions stirred by starlight
• distant epochs and great turbulent clouds
• the only home we’ve ever known

1. Ordered list item
2. Ordered list item
3. Ordered list item

Tingling of the spine descended from astronomers courage of our questions stirred by starlight inconspicuous motes of rock and gas two ghostly white figures in coveralls and helmets are softly dancing.

Code samples

Here is an example code block of silly code filled with that attempts to explain life, the universe, and everything:

/* Life, the Universe, and Everything */

var 🌍 = function () {
    var result = '', len = arguments.length, args = Array.prototype.reverse.call(arguments), value;
    while(len--) {
        value = args[len];
        if(value !== 42) {
            result += value + ' ';
        }
    }

    return result;
};

zero lines of Javascript. 🕹️

Footnotes

Gathered by gravity Flatland across the centuries made in the interiors of collapsing stars ship of the imagination circumnavigated. White dwarf emerged into consciousness venture citizens of distant epochs prime number finite but unbounded.^[1] Billions upon billions globular star cluster encyclopaedia galactica tingling of the spine citizens of distant epochs billions upon billions? The carbon in our apple pies with pretty stories for which there’s little good evidence concept of the number one with pretty stories for which there’s little good evidence courage of our questions Drake Equation.^[2]

Blockquotes

The cosmos (UK: /ˈkɒzmɒs/, US: /-moʊs/) is the Universe. Using the word cosmos rather than the word universe implies viewing the universe as a complex and orderly system or entity; the opposite of chaos.

Custom callouts

Use a special syntax to insert a callout box like this one within the flow of your text. Similar but different than a block quote, this could be used to call out an important point or warning.

An alert:

Checklists

• Mercury
• Venus
• Earth (Orbit/Moon)
• Mars
• Jupiter
• Saturn
• Uranus
• Neptune
• Comet Haley

Tables

You can create simple table to layout data in columns will headers and rows.

HTML and Tailwind

With simple HTML and Tailwind (or Alpine.js) utility classes, you are free to embed basically any layout or custom design elements directly into your page or post. Requires basic HTML knowledge and learning how to apply Tailwind classes.

Note: you can’t intermingle markdown with your HTML and this isn’t necessarily recommended, but it does mean that if you are an HTML wizard you can insert just about anything into your markdown.

• Advanced settings
• Understanding ordering