Kitchen Sink

Published at Jul 23, 2023

#demo#mdsvex

Photo by Jacek Dylag on Unsplash

Chucking things in here to see how they will render.

Headers

# Heading 1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Emphasis

_Italic text_
**Bold text**
**_Bold and italic text_**
~~Strikethrough text~~

Italic text

Bold text

Bold and italic text

Strikethrough text

Lists

Unordered List

- Item 1
- Item 2
- Item 3
  • Item 1
  • Item 2
  • Item 3

Ordered List

1. First item
2. Second item
3. Third item
  1. First item
  2. Second item
  3. Third item

Links

[Link to Google](https://www.google.com)

Link to Google

Images

![Alt text](/images/family-workout-cover.jpg)

Alt text

Code Blocks

````javascript
export function toggleTheme() {
	theme.update((currentTheme) => {
		const newTheme = currentTheme === 'dark' ? 'light' : 'dark';

		document.documentElement.setAttribute('data-theme', newTheme);
		localStorage.setItem('data-theme', newTheme);

		return newTheme;
	});
}
```

```javascript
export function toggleTheme() {
	theme.update((currentTheme) => {
		const newTheme = currentTheme === 'dark' ? 'light' : 'dark';

		document.documentElement.setAttribute('data-theme', newTheme);
		localStorage.setItem('data-theme', newTheme);

		return newTheme;
	});
}
```

And inline code looks like this - `npm install mdsvex`

## Blockquotes

```markdown
> This is a blockquote.
```

> This is a blockquote.

## Horizontal Rule

```markdown
---
```

---

## Tables

```markdown
| Column 1 | Column 2 |
| -------- | -------- |
| Cell 1   | Cell 2   |
| Cell 3   | Cell 4   |
```

| Column 1 | Column 2 |
| -------- | -------- |
| Cell 1   | Cell 2   |
| Cell 3   | Cell 4   |

## Task Lists

```markdown
- [x] Task 1
- [ ] Task 2
- [ ] Task 3
```

- [x] Task 1
- [ ] Task 2
- [ ] Task 3

## Svelte Components

```svelte
<script>
	import Name from '$lib/components/Name.svelte';
</script>

<Name />
```

<script>
  import P5Wrapper from '$lib/components/P5Wrapper.svelte';
  import Name from '$lib/components/Name.svelte';
</script>

<Name />

## p5js Sketches

```svelte
<script>
	import P5Wrapper from '$lib/components/P5Wrapper.svelte';
</script>

<P5Wrapper path={'../../_content/sketches/continuous-loop/sketch.ts'} />
```

<P5Wrapper path={'../../_content/sketches/continuous-loop/sketch.ts'} />