Add ability to take code snippet screenshots

[Magpiny]

Check for existing issues

• [X] Completed

Describe the feature

Add the ability to take beautiful code snippets screenshots the neovim way as done by codesnap.nvim neovim extension. Also leave it to the user to add extra details/configs to the screenshots for example the codesnipet can display developer name, flags, emojis, optionally show file name and/or file path and adding user themes and fonts for the code snippets. Screenshots of Code snippets can be taken using a combination of keys e.g CTRL+SHIFT+S or CTRL+S+S or any other combination of keys you see fit

If applicable, add mockups / screenshots to help present your vision of the feature

[Magpiny]

Please add code snippets capturing as a zed baked in feature #17181 @notpeter do you remember our conversation from X?

[sudsarkar13]

Yeah please add snippets feature

[keithrowell]

I need this, It's the last thing I go to VSCode for. That doesn't bother me as much when people ask how I made such a beautiful code screenshot. I have to tell them VSCode Codesnap extension. I'd rather say Zed code screenshot extension :)

[mistricky]

Hi guys, I'm the author of CodeSnap.nvim, so glad to hear that you enjoy CodeSnap.nvim, actually, I'm working on CodeSnap which is a pure Rust library for generating code snapshots, which is more powerful, flexible and beautiful than CodeSnap.nvim. And I have plan to refactor CodeSnap.nvim to use CodeSnap library in the future, so please stay tuned!

And also, I will provide other editor plugins using CodeSnap library in the future, so you can use CodeSnap in your favorite editor, Zed is an amazing editor, and the Zed code snapshot plugin is also in my development plan, but I'm not sure when I can finish it, if someone interested in CodeSnap, you can using CodeSnap library to create code snapshot Zed plugin by yourself, and I'm glad to help you if you have any questions. :)

[jandroav]

Hello! My workaround for this is using @mistricky tool with Zed tasks. Here is my tasks.json:

[
  {
    "label": "CodeSnap",
    "command": "codesnap --from-clipboard -o clipboard -l hcl --has-line-number --has-breadcrumbs --title $ZED_FILENAME",
    "use_new_terminal": false,
    "allow_concurrent_runs": false,
    "reveal": "never",
    "reveal_target": "dock",
    "hide": "on_success",
    "shell": "system"
  }
]

So every time I copy code, then I spawn the task and I have the CodeSnap ready to paste:

https://github.com/user-attachments/assets/0e1af229-3074-4366-9132-7da98e17010c

[Angelk90]

@jandroav : How do I install codesnap to make it work with zed?

[jandroav]

@Angelk90 you just need to follow https://github.com/codesnap-rs/codesnap?tab=readme-ov-file#cli

[Angelk90]

@jandroav : It uses rust, then maybe it could be integrated into Zed. You could add this task to this discussion #27387, I think it could be useful to others.

[YinMo19]

Hello! My workaround for this is using @mistricky tool with Zed tasks. Here is my tasks.json:你好！我的解决方法是使用带有 Zed 任务的工具。这是我的 tasks.json ：

[
  {
    "label": "CodeSnap",
    "command": "codesnap --from-clipboard -o clipboard -l hcl --has-line-number --has-breadcrumbs --title $ZED_FILENAME",
    "use_new_terminal": false,
    "allow_concurrent_runs": false,
    "reveal": "never",
    "reveal_target": "dock",
    "hide": "on_success",
    "shell": "system"
  }
]

So every time I copy code, then I spawn the task and I have the CodeSnap ready to paste:因此，每次我复制代码时，我都会生成任务并准备好粘贴 CodeSnap：

Screen.Recording.2025-03-20.at.06.18.44.mov 屏幕录制.2025-03-20.at.06.18.44.mov

hello! I agree with you and I slightly change your task.json to make it easier.

[
  {
    "label": "CodeSnap",
    "command": "codesnap -c \"$ZED_SELECTED_TEXT\" -o clipboard -l hcl --has-line-number --has-breadcrumbs --title $ZED_FILENAME",
    "use_new_terminal": false,
    "allow_concurrent_runs": false,
    "reveal": "never",
    "reveal_target": "dock",
    "hide": "on_success",
    "shell": "system"
  }
]

zed support $ZED_SELECTED_TEXT so we can just select the code without copy them.

By the way, can I ask what -l hcl means? I know -l -> --language and zed NOT support a file format shell variable like $ZED_FILE_FORMAT. So using hcl may have a wrong highlight. I'm not sure hcl is a kind of language or some magic code?

---

So if we want correct highlight, I think we have two ways.

• Add $ZED_FILE_FORMAT to zed, using the format zed detect.
• realize a syntect cli ourselves, and use something just like codesnap -c \"$ZED_SELECTED_TEXT\" -o clipboard -l $(syntect_cli \"$ZED_SELECTED_TEXT\") --has-line-number --has-breadcrumbs --title $ZED_FILENAME

Seems the second method will be slower, which using the cli to detect the format in task runtime. Well, using syntect library to realize such a cli is easy, and time costed may not be unacceptable.

[YinMo19]

Oh no, I'm sorry and shell will not handle the special char like " So my tasks.json can't work.

[mistricky]

Hi guys! @sudsarkar13 @YinMo19 @jandroav @Angelk90 @Magpiny This issue has been opened for long time, now the CodeSnap official documentation explain how to use CodeSnap in Zed editor, it can be found here.

Here is the configuration for the CodeSnap task:

[
  {
    "label": "CodeSnap",
    "command": "codesnap --watermark CodeSnap.zed -o clipboard --file-path \"$ZED_RELATIVE_FILE\" --has-line-number --start-line-number $ZED_ROW --has-breadcrumbs true -c",
    "args": ["\"$ZED_SELECTED_TEXT\""],
    "use_new_terminal": false,
    "allow_concurrent_runs": false,
    "reveal": "never",
    "reveal_target": "dock",
    "hide": "on_success",
    "shell": "system"
  }
]

This basically execute the CodeSnap CLI directly, so if you want to use other features of CLI, just modify the command.