Skip to content

Use CH.Code component for notebook in-out pairs #752

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
Jun 17, 2025
Merged

Use CH.Code component for notebook in-out pairs #752

merged 1 commit into from
Jun 17, 2025

Conversation

@gabalafou
Copy link
Contributor

@gabalafou gabalafou commented Jul 16, 2023 •
edited
Loading

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:

screenshot of rendered Code Hike cell

@vercel
Copy link

vercel bot commented Jul 16, 2023

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
Copy link
Member

pavithraes commented Jul 21, 2023

@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>

trallard
trallard approved these changes Jun 12, 2024
View reviewed changes
Copy link
Member

@trallard trallard left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I cannot remember why this was blocked or not merged. But this looks like a reasonable fix. I will approve this and leave it to @pavithraes and @gabalafou to merge then

@gabalafou gabalafou merged commit 701676b into uarray-intro Jun 17, 2025
@gabalafou gabalafou deleted the ch-code-uarray branch June 17, 2025 08:43
gabalafou added a commit that referenced this pull request Jun 17, 2025
@gabalafou
Use CH.Code component for notebook in-out pairs (#752)
f9ba75e
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@trallard trallard trallard approved these changes

@pavithraes pavithraes Awaiting requested review from pavithraes pavithraes is a code owner

@rgommers rgommers Awaiting requested review from rgommers rgommers is a code owner

Assignees

No one assigned

Labels

status: merge ready ✨

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@gabalafou @pavithraes @trallard