Hi all 👋

Just a boring page to review all the Markdown styles for this Nuxt website.

Markdown is a lightweight markup language that uses plain text formatting syntax, making it easy to write and read formatted documents.

Titles

How to write titles.

ids are auto generated, so Boring Title, will be id="boring-title".

In regular MD, If you'd like a custom id the do this → # Boring Title {#boring}.

But in Nuxt Content you'll need to warp in brackets → # [Boring Title]{#boring}.

Boring H1 Title

# Boring H1 Title

Humdrum H2 Title

## Humdrum H2 Title

Dull H3 Title

### Dull H3 Title

Monotonous H4 Title

#### Monotonous H4 Title

Stale H5 Title

##### Stale H5 Title

Tiresome H6 Title

###### Tiresome H6 Title

Basic formatting

Input → **This is Strong Text**
Output → This is Strong Text

Input → *This is Emphasized Text*
Output → This is Emphasized Text

Input → ~~This is Strikethrough~~
Output → This is Strikethrough

Input → `This is code`
Output → This is code

Input → **`This`** ~~is **combo**~~ ***formatting***
Output → This is combo formatting

Blockquotes

> This is a *Blockquote*. Write > to use it

This is a Blockquote. Write > to use it

> Cruelty has a human heart,  
> And Jealousy a human face;  
> Terror the human form divine,  
> And Secresy the human dress.
> 
>> The human dress is forged iron,
>>
>>> The human form a fiery forge,
>>
>> The human face a furnace sealed,
>>
> The human heart its hungry gorge.

A Divine Image By William Blake

Lists

Ordered List

1. Ordered list item
2. Another ordered list item
   1. Indented item
      • The First
      • The Second
   2. Another indented item.
   
   Additional text for indented item
3. Yet another ordered list item ^footnote.
   Additional text for item

Unordered List

• Ordered list item
• Another ordered list item
  • Indented item.
    • Another indent
      1. The First
      2. The Second
    • Another item in that indent
  • Another indented item.

  Love is all you need
  

  
  Text for indented item
• Yet another ordered list item ^footnote.
  !> Blockquote in a list

Code Snippets

Input ↓

    ```
    This is a Preformatted tag (pre). Warp with ``` to use
    ```

    Or just use a tab indent

Output ↓

This is a Preformatted tag (pre). Warp with ``` to use

Or just use a tab indent

CSS

Input ↓

    ```css
    /* css comment */
    p { 
        color: red;
    }
    ```

Output ↓

/* css comment */
p { 
    color: red;
}

Javascript

Input ↓

    ```js
    // js comment
    export default { 
        props: {
            showMeLove: { default: true },
        }
    };
    ```

Output ↓

// js comment
export default { 
    props: {
        showMeLove: { default: true },
    }
};

Images

In order to have the image caption right there should be 2 things:

Syntax ↓

![alt](src)

Input ↓

![Night Thoughts](/misc/night-thoughts.webp)

Output ↓

To add a nice looking subtitle

• No space between the image and the caption
• The caption should have an *, i.e be an em tag

Input ↓

![Night Thoughts](/misc/night-thoughts.webp)
*Night Thoughts by William Blake, Watercolor*

Output ↓Night Thoughts by William Blake, Watercolor

Links

Visit my website Yonatan Kof.

Visit my website Yonatan Kof.

IDs to heading are being generate automatically, You can link to them like so, by referring to their id

https://yonatankof.com

Sandy hole with nothing in it to sit down on or to eat: it was a hobbit-hole, and that means comfort.

Tables

Checkbox – MIA

Missing in Action is design for the Checkbox
It looks bad and right now I don't really know how to manipulate its CSS

• Write the press release
• Me not done
• Update the website
• Contact the media

Custom components

Add a Youtube Embed

Input option 1 ↓

::YouTubePlayer{videoId="Bwe5Msh75eY" title="'Night' by William Blake" desc="Some description"}
::

Input option 2 ↓

:::YouTubePlayer
---
videoId: Bwe5Msh75eY
title: 'Night' by William Blake
desc: Some description
---
:::

Output ↓

Add a Sketch Embed