Use CH.Code component for notebook in-out pairs

[gabalafou]

This PR is on top of #647.

This is an attempt at fixing #679.

In trying to find a way to format notebook code cells with input and output stacked on top of each other, I couldn't find any kind of Remark plugin or other tool that would easily fit within our current blog post build system (mdx + remark + code-hike).

But I discovered the panels feature by Code Hike, which might meet our needs.

The syntax looks like this:

<CH.Code className="hide-ch-frame-buttons">

```python in
print('hello, world')
```

---

```txt out
hello, world
```

</CH.Code>

And the result looks like this, when rendered in HTML on our website:

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
consulting	✅ Ready (Inspect)	Visit Preview	Jul 16, 2023 5:22pm
labs	✅ Ready (Inspect)	Visit Preview	Jul 16, 2023 5:22pm

[pavithraes]

@gabalafou Thank you, I think this does work quite well for us! 🌻

Blog post preview here for quick ref: https://labs-git-ch-code-uarray-quansight.vercel.app/blog/uarray-intro

We'll need to add a note about this in the README for blog post authors.

And, as s a style preference, I'd suggest we use and encourage descriptive panel headings like below. What do you think?

<CH.Code className="labs-blog-cell-in-out">

```python myscript.py
print('hello, world')
```

---

```txt Output:
hello, world
```

</CH.Code>