# Hello *World*
~~~jsx
const Home: NextPage = () => {
  return <ReactMarkDown
  className="prose"
  children={markdown}
  components={{
    code({node, inline, className, children, ...props}) {
      const match = /language-(\w+)/.exec(className || '')
      return !inline && match ? (
        <SyntaxHighlighter
          children={String(children).replace(\n$/, '')}
          // @ts-ignore
          style={monokai}
          language={match[1]}
          PreTag="div"
          {...props}
        />
      ) : (
        <code className={className} {...props}>
          {children}
        </code>
      )
    }
  }}
/>;
};
~~~
~~~js
import type { NextPage } from "next";
import ReactMarkDown from 'react-markdown';
import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter';
import monokai from 'react-syntax-highlighter/dist/esm/styles/prism/coldark-dark';
~~~
~~~cs
namespace Acme.Collections;
public class Stack<T>
{
    Entry _top;
    public void Push(T data)
    {
        _top = new Entry(_top, data);
    }
    public T Pop()
    {
        if (_top == null)
        {
            throw new InvalidOperationException();
        }
        T result = _top.Data;
        _top = _top.Next;
        return result;
    }
    class Entry
    {
        public Entry Next { get; set; }
        public T Data { get; set; }
        public Entry(Entry next, T data)
        {
            Next = next;
            Data = data;
        }
    }
}
~~~
~~~md
# This is a title text
- this is a p
## Some more title
```
Some code
```
~~~
~~~js
console.log('Some more code...');
~~~