Photo of old-fashioned record player

Image credit: Photo by Suzy Hazelwood from Pexels

Retro is Really Back, Baby

By Tom Campbell | Staff reporter | Dec 14, 2020

(Dateline: Hollywoodland, CA) Is retro really back? "With a lot of producers, it's all about analog," says Seattle producer Mox Chehalis. "Not exclusively but it's one of the paints in my palette, for reals. I have a lot of vintage equipment because it just gives a feel you can't get any other way. God knows I've tried."

Mox: It's all about analog

Others agree.

Textual is elastic---its header and footer stretch with the web page width. When you create a Markdown source file and don't specify a theme, Textual is the one that's chosen. Likewise, when you create a new theme or pagetype, that new theme will be based on Textual if you don't choose otherwise.

Click to try different versions of this theme live

No sidebar Sidebar
Light theme Left Right
Dark theme Left Right

Metabuzz Markdown quick reference

Table of contents

Markdown syntax

Here's how markdown appears in the textual theme:

Common text formatting

You type:

Normal body text, **strong**, ~~strikethrough~~, and with *emphasis*.

It shows as:

Normal body text, strong, strikethrough, and with emphasis.

Horizontal rule:

You type:

---

It shows as:


You type:

[HTML color names](https://htmlcolorcodes.com/color-names/)

It shows as:

HTML color names

Bookmarks

Suppose you want to link to a particular location inside a page. As long as there's an id attribute in the document's HTML you can cause a link to jump directly to that part of the page by specifing the link following a # character.

Linking inside a document

We'll loosely call them anchors or bookmarks, although the HTML specification simply calls it the id attribute.

Here's a demonstration. If you type:

Jump to the [tables](#tables) section.

The result will be this (click the link, then use your browser's Back button to return here):

Jump to the tables section.

All headers are automatically bookmarks too

Metabuzz automatically generates an id attribute for each header from h1 to h6 by taking the text of the link itself, reducing it to lowercase, and either replacing spaces and other non-letter characters with hyphens, or removing them altogether. If you look at the HTML for this page you'll see the Tables header looks like this:

<h2 id="tables">Tables</h2>

The Coding styles header uses a hyphen to replace the space:

<h2 id="coding-styles">Coding styles</h2>

And the more complicated example of the header named The "third" list type: definition lists:

<h3 id="the-third-list-type-definition-lists">The "third" list type: definition lists</h3>

Bookmarks must be unique in an HTML document

The id attribute must be unique within a document. Notice how on this page there are many headers simply called You type:? Metabuzz keeps track of them and turns each of them into unique IDs by naming them you-type-1, you-type-2, and so forth.

How to create bookmarks manually

Suppose you want a bookmark that's not a header? You can insert one anywhere by starting a Markdown line with the pure HTML code for anchors. (HTML is allowed in Markdown with a few restrictions).

You type:

<a name="jump-here"></a>

Then you create a link to it by adding the #jump-here portion to a link, which is noted by the web browser but not displayed:

[Learn about blockquotes](#jump-here)

Try it now: Learn about blockquotes

Linking to bookmarks on other websites

You can also link to an anchor to other websites, if they have anchors. Here's a link to the history of futbol on Wikipedia:

You type:

[History of futbol](https://en.wikipedia.org/wiki/Association_football#History)

It takes you right there:

History of futbol

Header styles

You type:

# h1
## h2
### h3
#### h4
##### h5
###### h6

It shows as:

h1

h2

h3

h4

h5
h6

Coding styles

You can format text inline as code by surrounding text with `tick marks`, or go block style by enclosing the lines of code in a "fenced code block", which begin and end with 3 tickmarks:

You can format text inline as `code`, or go block style:

Choosing the programming language

You can specify a color scheme for a particular programming language by including its name after the first 3 tick marks of the code block.

You type:

```python
print ("This is a code block")
```

It shows as:

print ("This is a code block")

If you're a Go programmer, you type:

```go
fmt.Println("This is a code block")
```

It shows as:

fmt.Println("This is a code block")

There are 2 or 3 kinds of list types

You type:

### Ordered lists

1. Ordered lists have numeric sequences
1. Even though you write `1` in Markdown,
1. The numbers display properly on output

It shows as:

Ordered lists

  1. Ordered lists have numeric sequences
  2. Even though you write 1 in Markdown,
  3. The numbers display properly on output

Unordered, or bullet lists

You type:

Reasons people hate bullet lists

* They were traumatized bybad PowerPoint
* Some peple actually like bullet lists
  + You can indent bullet lists
    - Just use tab, then one of the characters `*`, `+`, `-`
  + The `+` isn't required. It's just for clarity
    - Most Metabuzz themes go up to 3 visible levels
    - Any more levels than 3 makes it hard for the reader
      + Therefore the Metabuzz theme framework seldom covers indentation levels as deep as this bullet point

It shows as:

Reasons people hate bullet lists

The "third" list type: definition lists

A definition list lets you display things like an item and its meaning in a distinct way:

You type:

Definition list
: A way to show a visual relationship between a word or phrase
and an explanation for it

Markdown
: A convention for generating HTML from a more human-readable 
source format.

It shows as:

Definition list
A way to show a visual relationship between a word or phrase and an explanation for it
Markdown
A convention for generating HTML from a more human-readable source format.

Remember that a Markdown link looks like this:

[Twitter](https://twitter.com)

And that an image link looks like this:

![Twitter logo](twitter-32x32-black.png)

You can combine them to make a clickable image, like this:

[![Twitter logo](twitter-32x32-black.png)](https://twitter.com)

Tables

Use this method of creating tables. Columns are normally left-aligned, but :| on the row of dashes right-aligns a column, and |:--:| center-aligns a column. Headers are always centered.

You type:


| Left-justified Contents |  Centered Contents   | Right-justified Contents   |
| ------------------------ |:--------------------:| --------------------------:|
| Row 1, Col 1             | Row 1, Col 2         | Row 1, Col 3               |
| Row 2, Col 1             | Row 2, Col 2         | Row 2, Col 3               |

And here's what results from the table markdown shown above:

It shows as:

Left-justified Contents Centered Contents Right-justified Contents
Row 1, Col 1 Row 1, Col 2 Row 1, Col 3
Row 2, Col 1 Row 2, Col 2 Row 2, Col 3

Block quote

You type:

>Hypocrisy waits silently for us all. 

It shows as:

Hypocrisy waits silently for us all.

Return to the bookmarks section