---
layout: ../layouts/MarkdownLayout.astro
---

import Counter from '../components/Counter.jsx';
import Title from '../components/Title.astro';
export const components = { h1: Title };

export const authors = [
 { name: 'Jane', email: 'hi@jane.com' },
 { name: 'John', twitter: '@john2002' },
];
export const published = new Date('2022-02-01');

# Hello world

Written by: {new Intl.ListFormat('en').format(authors.map(d => d.name))}.

Published on: {new Intl.DateTimeFormat('en', {dateStyle: 'long'}).format(published)}.

<Counter client:idle>This is a **counter**!</Counter>

## Syntax highlighting

We also support syntax highlighting in MDX out-of-the-box! This example uses the default [Shiki](https://shiki.style) theme. See the [MDX integration docs](https://docs.astro.build/en/guides/integrations-guide/mdx/#syntax-highlighting) for configuration options.

```astro
---
const weSupportAstro = true;
---

<h1>Hey, what theme is that? Looks nice!</h1>
```