Code Monkey home page Code Monkey logo

codesnap-plus's Introduction

CodeSnap-plus

(Fork from CodeSnap-luo)

๐Ÿ“ธ Take beautiful screenshots of your code in VS Code! And you can hightlight the line just by click the line number.

UI

Features

  • Can hightlight the line if you click line number
  • hightlight have 3 styles:
    • focus
    • git-add
    • git-remove

(For usage, can see the Hightlight Usage Instructions)

  • Original features of CodeSnap
    • Quickly save screenshots of your code
    • Copy screenshots to your clipboard
    • Show line numbers
    • Many other configuration options

Basic Usage Instructions

  1. Open the command palette (Ctrl+Shift+P on Windows and Linux, Cmd+Shift+P on OS X) and search for CodeSnap-plus.
  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-plus.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

Hightlight Usage Instructions

If you want to hightlight the line just click the line number, and the line will be hightlighted.

  • Click once: Style focus
  • Click twice: Style git-add
  • Click thrice: Style git-remove
  • Click four times: No hightlight

Examples

Hightlight Style: Focus

Hightlight-Style:Focus

Hightlight Style: Git-Add

Hightlight-Style:Focus

Hightlight Style: Git-Remove

Hightlight-Style:Focus

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-plus.backgroundColor: The background color of the snippet's container. Can be any valid CSS color.

codesnap-plus.boxShadow: The CSS box-shadow for the snippet. Can be any valid CSS box shadow.

codesnap-plus.containerPadding: The padding for the snippet's container. Can be any valid CSS padding.

codesnap-plus.roundedCorners: Boolean value to use rounded corners or square corners for the window.

codesnap-plus.showWindowControls: Boolean value to show or hide OS X style window buttons.

codesnap-plus.showWindowTitle: Boolean value to show or hide window title folder_name - file_name.

codesnap-plus.showLineNumbers: Boolean value to show or hide line numbers.

codesnap-plus.realLineNumbers: Boolean value to start from the real line number of the file instead of 1.

codesnap-plus.transparentBackground: Boolean value to use a transparent background when taking the screenshot.

codesnap-plus.target: Either container to take the screenshot with the container, or window to only take the window.

codesnap-plus.shutterAction: Either save to save the screenshot into a file, or copy to copy the screenshot into the clipboard.

codesnap-plus.toolMode: Either advaced to the tools on toolbar, or simple to only show the shutter button.

Acknowledgements

The great Polacode, for the initial concept.

Carbon for some design inspiration.

codesnap-plus's People

Contributors

davidbriglio avatar dependabot[bot] avatar fuzetsu avatar huibizhang avatar kufii avatar lxstr avatar mutsuntsai avatar thibautmarechal 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.