TRENDS > MUSIC
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
- Common text formatting
- Links
- Bookmarks
- Header styles
- Coding styles
- Ordered lists
- Unordered, or bullet lists
- The "third" list type: definition lists
- Creating clickable image links in Markdown
- Tables
- Block quote
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:
Links
You type:
[HTML color names](https://htmlcolorcodes.com/color-names/)
It shows as:
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:
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
- Ordered lists have numeric sequences
- Even though you write
1in Markdown, - 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
- They were traumatized bybad PowerPoint
- Some peple actually like bullet lists
- You can indent bullet lists
- Just use tab, then one of the characters
*,+,-
- 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
- You can indent 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.
Creating clickable image links in Markdown
Remember that a Markdown link looks like this:
[Twitter](https://twitter.com)
And that an image link looks like this:
You can combine them to make a clickable image, like this:
[](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.