Giter Club home page Giter Club logo

codesnap's Introduction

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

Examples

Material Theme + Operator Mono

Example 1

Nord + Cascadia Code

Example 2

Monokai + Fira Code

Example 3

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.

Copy to Clipboard support in Linux

In order for this feature to work in Linux you must install xclip.

Usually you can simply install it using your distribution's package manager:

# ubuntu / debian
sudo apt install xclip

# arch / manjaro
pacman -S xclip

If you're using Wayland (rather than X) as your compositing window manager install wl-clipboard instead.

Acknowledgements

The great Polacode, for the initial concept.

Carbon for some design inspiration.

codesnap's People

Contributors

davidbriglio avatar dependabot[bot] avatar fuzetsu avatar kufii avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.