Hi all 👋

A page to review all the Markdown syntax I use in this Nuxt Content website.

Markdown?! Nuxt Content?! WTF?

Markdown is a lightweight markup language that uses plain text formatting syntax, making it easy to write and read formatted documents. Nuxt is a meta-framework to build sites better/faster, and Nuxt Content is to use super charged MD files, mainly Vue components in MD files.

After each section I'll add the syntax too.

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

Hello World!

> 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.

> After their 1995 debut _Delta Aquarids_, they returned the following year with *Violent Relaxation*, and ~~Access Denied~~ followed in 1999.

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

Simple markdown image

The native markdown syntax still works for quick, unstyled images with no lazy loading.

Input ↓

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

Output ↓

::lazy-img component

The preferred way. Gives you lazy loading, blur placeholder from thumbhash, and an optional styled caption.

Basic

Input ↓

::lazy-img{src="/misc/night-thoughts.webp" alt="Night Thoughts"}
::

Output ↓

With a caption

Input ↓

::lazy-img{src="/misc/night-thoughts.webp" alt="Night Thoughts" desc="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

Simple example of a table:

| Header 1st cell    | Last header cell |
| --------- | ----------- |
| Row 1 Cell 1    | Row 1 Cell 2       |
| Row 2 Cell 2 | Row 2 Cell 2        |

Example of a table with aligned cells using : for positioning:

Input ↓

| Header 1st cell    | 2nd header cell |   Last header cell |
| :-------- | :---------: | ----------: |
| 1st row | Veterans of the French dance scene | Here's this cell content |
| 2nd row | Serge Souque, Loic Van Pouke and Stephane Holwick | And more |

Output ↓

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

Vue Components

Example Title

Example Description

Default style

::QuoteBig{title="Example Title" desc="Example Description"}
::

YAML style

::QuoteBig
---
title: Example Title
desc: Example Description
---
::