Skip to content

Code snippet improvements #31

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
Open
wants to merge 15 commits into
base: main
Choose a base branch
from
Open

Code snippet improvements #31

wants to merge 15 commits into from

Conversation

HesitantlyHuman
Copy link

Here is another change that I've made for my personal website, that I figured might be helpful. I've made the following changes/improvements to the code snippets.

  1. Add an additional state to the copy icon to clearly indicate when the code snippet has been copied to the clipboard.
  2. Add an optional figure caption which can contain links, captions and the copy icon.
  3. Add line highlighting and styling for line highlights, using a Shiki transformer.
  4. Add styling for line numbers, based on a CSS counter.
  5. Change code theming and background to match the existing styles of astro-sphere.
  6. Add dynamic parsing for block by block control of links, captions, copyability, line numbers, line highlights. Add support for extracting caption and line numbers from github permalinks for convenience.

One potential hang-up that I should mention is that I've implemented the code snippets as a component mapping, which only works using mdx. That isn't a problem for me, since simply changing any .md files to be .mdx is sufficient, but other's may care about this. In this branch I've gone ahead and changed all of the blog posts accordingly, and then added the appropriate metadata to demonstrate how the code snippet would actually be used.

Here are some mdx examples, and what they will render as, currently:

```js link=https://github.com/HesitantlyHuman/astro-sphere/blob/5c8562ed9ec0590395df40bb4c43fc104cf33eaf/astro.config.mjs#L8-L11 {2}
export default defineConfig({
  site: "https://astro-sphere.vercel.app", // your domain here
  integrations: [mdx(), sitemap(), solidJs(), tailwind({ applyBaseStyles: false })],
})
```

image

```yaml caption="Example blog post frontmatter"
---
title: "Astro Sphere: Adding a new post or project."
summary: "Adding a new article (blog post or project) is pretty easy."
date: "Mar 18 2024"
draft: false
tags:
- Tutorial
- Astro
- Astro Sphere
---
```

image

```text copy=false
creating the following

/content/blog/my-new-post/index.md

will be published to

https://yourdomain.com/blog/my-new-post
```

image

````markdown copy=false
```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Example HTML5 Document</title>
  </head>
  <body>
    <p>Test</p>
  </body>
</html>
```
````

image

HesitantlyHuman and others added 15 commits April 19, 2025 16:57
@HesitantlyHuman
Styling fixes are completed, rendering changes partially done
939ddfa
@HesitantlyHuman
Passing props from the code blocks to our custom component
51a89d6
@HesitantlyHuman
Get functioning copy button using Astro middleware and props to minim…
c7c983e 
…ize DOM searching and manipulation clientside, update button to copy on mouseup and loose focus on mouseleave
@HesitantlyHuman
Finalized copy button fixes, fixed copy content formatting issues
e0a033d
@HesitantlyHuman
Fix issue using b64 to avoid whitespace stripping
57ca9b1
@HesitantlyHuman
Fix theming on code snippets
d50728f
@HesitantlyHuman
Improvements to code snippet styling
6cbe49e
@HesitantlyHuman
Styling changes
f20f742
@HesitantlyHuman
Styling changes, start adding snippet link support
9a08570
@HesitantlyHuman
Fix link styling and improve UX by expanding hoverable/clickable area…
c8c359c 
… of code snippet actions
@HesitantlyHuman
Improving code snippet styling
83df94f
@HesitantlyHuman
All improvements to code snippet implemented
a03ab65
@HesitantlyHuman
Fix spacing issue from removing code snippet link div
8f051e4
@HesitantlyHuman
Update link rel for code snippets
6187b17
@HesitantlyHuman
Allow disabling copy button and code snippet header, update content p…
3970df9 
…ages to provide example usage
@vercel Vercel
Copy link

vercel bot commented May 18, 2025 •
edited
Loading

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

Name Status Preview Comments Updated (UTC)
astro-sphere ❌ Failed (Inspect) May 18, 2025 10:44pm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@HesitantlyHuman