Skip to content

Code snippet improvements#31

Closed
HesitantlyHuman wants to merge 15 commits intomarkhorn-dev:mainfrom
HesitantlyHuman:feature/codesnippet-improvements
Closed

Code snippet improvements#31
HesitantlyHuman wants to merge 15 commits intomarkhorn-dev:mainfrom
HesitantlyHuman:feature/codesnippet-improvements

Conversation

@HesitantlyHuman
Copy link
Contributor

@HesitantlyHuman HesitantlyHuman commented May 18, 2025

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

@markhorn-dev
Copy link
Owner

markhorn-dev commented Jun 16, 2025

There was something fishy going on with the package lock and package.json file that wasn't able to be deployed.

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.

2 participants

@HesitantlyHuman @markhorn-dev

Comments