Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kufii/CodeSnap
📸 Take beautiful screenshots of your code in VS Code!
https://github.com/kufii/CodeSnap
Last synced: 16 days ago
JSON representation
📸 Take beautiful screenshots of your code in VS Code!
- Host: GitHub
- URL: https://github.com/kufii/CodeSnap
- Owner: kufii
- Created: 2019-09-24T20:04:03.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-12-29T18:29:34.000Z (6 months ago)
- Last Synced: 2024-02-27T08:35:41.067Z (4 months ago)
- Language: JavaScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap
- Size: 764 KB
- Stars: 475
- Watchers: 5
- Forks: 69
- Open Issues: 95
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Lists
- awesome-stars - kufii/CodeSnap - 📸 Take beautiful screenshots of your code in VS Code! (others)
- awesome-github-star - CodeSnap
- jimsghstars - kufii/CodeSnap - 📸 Take beautiful screenshots of your code in VS Code! (JavaScript)
README
# CodeSnap
📸 Take beautiful screenshots of your code in VS Code!
## Features
- Quickly save screenshots of your code
- Copy screenshots to your clipboard
- Show line numbers
- Many other configuration options
## Usage Instructions
1. Open the command palette (Ctrl+Shift+P on Windows and Linux, Cmd+Shift+P on OS X) and search for `CodeSnap`.
2. Select the code you'd like to screenshot.
3. Adjust the width of the screenshot if desired.
4. Click the shutter button to save the screenshot to your disk.
**Tips**:
- You can also start CodeSnap by selecting code, right clicking, and clicking CodeSnap
- If you'd like to bind CodeSnap to a hotkey, open up your keyboard shortcut settings and bind `codesnap.start` to a custom keybinding.
- If you'd like to copy to clipboard instead of saving, click the image and press the copy keyboard shortcut (defaults are Ctrl+C on Windows and Linux, Cmd+C on OS X), or bind `codesnap.shutterAction` to `copy` in your settings
## Examples
[Material Theme](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme) + [Operator Mono](https://www.typography.com/fonts/operator/styles/operatormono)
[Nord](https://github.com/arcticicestudio/nord-visual-studio-code) + [Cascadia Code](https://github.com/microsoft/cascadia-code)
Monokai + [Fira Code](https://github.com/tonsky/FiraCode)
## Configuration
CodeSnap is highly configurable. Here's a list of settings you can change to tune the way your screenshots look:
**`codesnap.backgroundColor`:** The background color of the snippet's container. Can be any valid CSS color.
**`codesnap.boxShadow`:** The CSS box-shadow for the snippet. Can be any valid CSS box shadow.
**`codesnap.containerPadding`:** The padding for the snippet's container. Can be any valid CSS padding.
**`codesnap.roundedCorners`:** Boolean value to use rounded corners or square corners for the window.
**`codesnap.showWindowControls`:** Boolean value to show or hide OS X style window buttons.
**`codesnap.showWindowTitle`:** Boolean value to show or hide window title `folder_name - file_name`.
**`codesnap.showLineNumbers`:** Boolean value to show or hide line numbers.
**`codesnap.realLineNumbers`:** Boolean value to start from the real line number of the file instead of 1.
**`codesnap.transparentBackground`:** Boolean value to use a transparent background when taking the screenshot.
**`codesnap.target`:** Either `container` to take the screenshot with the container, or `window` to only take the window.
**`codesnap.shutterAction`:** Either `save` to save the screenshot into a file, or `copy` to copy the screenshot into the clipboard.
## Acknowledgements
The great [Polacode](https://github.com/octref/polacode), for the initial concept.
[Carbon](https://carbon.now.sh/) for some design inspiration.