A Guide to Automatic Image Optimization with SvelteKit

Markdown Examples

This is the first line.
And this is the second line.

I just love bold text. Italicized text is the cat’s meow.

Dorothy followed her through many of the beautiful rooms in her castle.

1. First item
2. Second item
3. Third item
   1. Indented item
   2. Indented item
4. Fourth item

• unordered
  • indented list

Code Examples

Inline Code

Here is some inline code console.log('Hey I'm inline-code')

No Highlighting

	

		
Svelte
		

			Wrap
			Copy
		
	
	
<script lang="ts">
	import { page } from '$app/stores'
	import { Url } from '$lib/url'
	export let data

	const { posts } = data
</script>

<svelte:head>
	<title>Cesar Mejia's Web Portfolio</title>
	<link rel="canonical" href={$page.url.href} />
</svelte:head>

<div>
	<ul>
		{#each posts as post (post.slug)}
			<li class="mb-4"><a class="unstyled" href={Url.BlogDetail(post.slug)}>{post.title}</a></li>
		{/each}
	</ul>
</div>

With Highlighting

	

		
JavaScript
		

			Wrap
			Copy
		
	
	
export async function load({ fetch }) {
	const variable = "this is a super long variable declaration come on"
	const res = await fetch(`/posts.json`)
	if (res.ok) {
		const { posts } = await res.json()
		return { posts }
	}
}

const code = 'yay!'

const code = 'yay!'

With Focus

	

		
TypeScript
		

			Wrap
			Copy
		
	
	
export async function load({ fetch }) {
	const variable = "this is a super long variable declaration come on"
	const res = await fetch(`/posts.json`)
	if (res.ok) {
		const { posts } = await res.json()
		return { posts }
	}
}

const code = 'yay!'

const code = 'yay!'

Remark Abbreviations Examples

This plugin works on Markdown Abstract Syntax Tree (MDAST), a Markdown Abstract Syntax Tree (AST) implemented by remark

Remark-Github Examples

• ref: https://github.com/remarkjs/remark-github
• Commit: 63cf895
• Discussion: #1
• Issue: #2
• Mention: @cesarnml

A11y Emojis

test 🙂 inline