Add copy button for code blocks on MD files.

[bmartinez287]

The Issue

Currently, blog posts don't have a copy button snippets of code. The DDev docs do but not ddev.com

How This PR Solves The Issue

Astro uses the astro-expressive-code plugin which provides that functionality.
https://github.com/expressive-code/expressive-code/blob/main/packages/astro-expressive-code/README.md

The image below is taken from this blog
https://ddev.com/blog/amd64-on-apple-silicon-ddev/

[bmartinez287]

Astro docs example https://docs.astro.build/en/guides/markdown-content/

[mattstein]

Seems like a great idea to me!

It might be more pain to implement in Get Started command blocks since you’d only want to copy a command and not the entire block content in every case—like when there’s pretend terminal output shown.

[bmartinez287]

Yeah, the get started will need more work.

[mattstein]

Is there a way to use this without changing the style of the code blocks? Using this post as a reference, it seems like it changes the theme, font face and spacing, adds some kind of tab bar sometimes, and adds borders (most visible in dark mode) with a different drop shadow:

[bmartinez287]

It should work as expected now.

[bmartinez287]

I removed this because that plugin already uses shiki.

[bmartinez287]

It did not seem like its needed anymore since it was specified above.

[rfay]

Now that you have privileges to do so, please try to remember to create your branch on ddev/ddev.com so the actual build happens on the PR, making it easier to review. Thanks!

[rfay]

Result seems fantastic to me, thanks!

[bmartinez287]

@rfay I tried adding my branch on ddev/ddev.com but it did not let me. It asked me for my GitHub password but then it told me passwords are disabled. I will try again with the next branch but I did wonder if maybe I'm missing something or is a user error.

[rfay]

Yeah, you can't use passwords with github any more at all.

Assuming your remote named upstream is [email protected]:ddev/ddev.com git remote -v will show:

upstream	[email protected]:ddev/ddev.com (fetch)
upstream	[email protected]:ddev/ddev.com (push)

Then:

git fetch upstream
git checkout -b 20231016_bmartinez286_some_description upstream/main
# do some things
git push -u upstream 20231016_bmartinez286_some_description
# It will prompt with a link to create a PR

[bmartinez287]

Awesome, thanks for the detail instructions. I thought I did that and it still did not let me but I will try again and report back.

[bmartinez287]

git remote -v

origin	[email protected]:bmartinez287/ddev.com.git (fetch)
origin	[email protected]:bmartinez287/ddev.com.git (push)
upstream	https://github.com/ddev/ddev.com.git (fetch)
upstream	https://github.com/ddev/ddev.com.git (push)

I have that but then when I do

git push -u upstream 20231015_bmartinez287_mdcopycodeplugin

I get - Username for 'https://github.com':

and I can merge PRs fine from the UI, but the permission for my user to push branches to the repo might be missing something. My ssh key works well with my own and other repos so that's odd too.

[rfay]

Do you have an ssh key registered with github? Is git using it?

[rfay]

Oh, you're using https, don't do that. git remote set-url upstream [email protected]:ddev/ddev.com

[bmartinez287]

Closing this branch as PR #121 is the same but with a preview.