
[View raw (TEST.md)](https://raw.github.com/adamschwartz/github-markdown-kitchen-sink/master/README.md)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

```markdown
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi
posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
```

# Header 1

## Header 2

### Header 3

#### Header 4

##### Header 5

###### Header 6

```markdown
# Header 1

## Header 2

### Header 3

#### Header 4

##### Header 5

###### Header 6
```

> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

```markdown
> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere
> lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
```

> ## This is a header.
>
> 1. This is the first list item.
> 2. This is the second list item.
>
> Here's some example code:
>
>     Markdown.generate();

```markdown
> ## This is a header.
>
> 1. This is the first list item.
> 2. This is the second list item.
>
> Here's some example code:
>
>     Markdown.generate();
```

- Red
- Green
- Blue

```markdown
- Red
- Green
- Blue
```

| Number | Title                                    | Year |
| ------ | ---------------------------------------- | ---: |
| 1      | Harry Potter and the Philosopher’s Stone | 2001 |
| 2      | Harry Potter and the Chamber of Secrets  | 2002 |
| 3      | Harry Potter and the Prisoner of Azkaban | 2004 |

- `code goes` here in this line
- **bold** goes here

```markdown
- `code goes` here in this line
- **bold** goes here
```

1. Buy flour and salt
2. Mix together with water
3. Bake

```markdown
1. Buy flour and salt
2. Mix together with water
3. Bake
```

1. `code goes` here in this line
2. **bold** goes here

```markdown
1. `code goes` here in this line
2. **bold** goes here
```

This is [an example](http://example.com 'Example') link.

[This link](http://example.com) has no title attr.

This is [an example][id] reference-style link.

[id]: http://example.com 'Optional Title'

```markdown
This is [an example](http://example.com 'Example') link.

[This link](http://example.com) has no title attr.

This is [an example] [id] reference-style link.

[id]: http://example.com 'Optional Title'
```

The next text is italic: _single asterisks_

The next text is bold: **single underscores**

```markdown
The next text is italic: _single asterisks_

The next text is bold: **single underscores**
```

This paragraph has some `code` in it.

```markdown
This paragraph has some `code` in it.
```

![Alt Text](https://via.placeholder.com/150 'Image Title')

```markdown
![Alt Text](https://via.placeholder.com/150 'Image Title')
```

Here will a live code example go:

```js react-live
const onClick = () => {
	alert('You opened me');
};
render(<button onClick={onClick}>Alohomora!</button>);
```

Here will a normal code block go:

```js
(function() {
  var cache = {};
  var form = $('form');
  var minified = true;

  var dependencies = {};

  var treeURL = 'https://api.github.com/repos/PrismJS/prism/git/trees/gh-pages?recursive=1';
  var treePromise = new Promise(function(resolve) {
    $u.xhr({
      url: treeURL,
      callback: function(xhr) {
        if (xhr.status < 400) {
          resolve(JSON.parse(xhr.responseText).tree);
        }
      }
    });
});
```

Code block with code highlighting:

```jsx title="src/components/post.jsx" data-line="5-7,10"
import React from 'react';

const Post = ({ data: { post } }) => (
	<Layout>
		<Heading variant="h2" as="h2">
			{post.title}
		</Heading>
		<p
			sx={{
				color: `secondary`,
				mt: 3,
				a: { color: `secondary` },
				fontSize: [1, 1, 2],
			}}
		>
			<span>{post.date}</span>
			{post.tags && (
				<React.Fragment>
					{` — `}
					<ItemTags tags={post.tags} />
				</React.Fragment>
			)}
		</p>
		<section
			sx={{
				...CodeStyles,
				my: 5,
				'.gatsby-resp-image-wrapper': { my: 5, boxShadow: `lg` },
			}}
		>
			<MDXRenderer>{post.body}</MDXRenderer>
		</section>
	</Layout>
);

export default Post;
```

Code block without title:

```
Harry Potter and the Philosopher's Stone
```

Code block without lineNumbers (but lang):

```text noLineNumbers
Harry Potter and the Chamber of Secrets
```

Code block without lineNumbers (and without lang):

```text noLineNumbers
Harry Potter and the Chamber of Secrets
```

Code block with only the title:

```js [title="src/utils/scream.js"]
const scream = (input) => window.alert(input);
```

Code block with only the title but without lineNumbers:

```js title="src/utils/scream.js" noLineNumbers
const scream = (input) => window.alert(input);
```

Line highlighting without code title:

```js class="line-numbers" data-line="2"
const test = 3;
const foo = 'bar';
const harry = 'potter';
const hermione = 'granger';
const ron = 'weasley';
```

Here will `inline code` go, just inside the text. Wow!

Code block without line numbers but with highlighting, language, and title:

```tsx title=src/components/blog.tsx lines=[7,9,16] noLineNumbers
import React from 'react';

const Blog = ({ posts }: PostsProps) => {
	const { tagsPath, basePath } = useSiteMetadata();

	return (
		<Layout>
			<Flex
				sx={{ alignItems: `center`, justifyContent: `space-between` }}
			>
				<Heading variant="h2" as="h2">
					Blog
				</Heading>
				<Styled.a
					as={Link}
					sx={{ variant: `links.secondary` }}
					to={`/${basePath}/${tagsPath}`.replace(/\/\/+/g, `/`)}
				>
					View all tags
				</Styled.a>
			</Flex>
			<Listing posts={posts} sx={{ mt: [4, 5] }} />
		</Layout>
	);
};

export default Blog;
```


Jose Albizures

Hi. 👋🏻

🛠 I like to build things