Create beautiful code screenshots in Neovim. Without damaging your wrists.

one of the greatest things about writing code is the ability to share it with other people most of the time this is as simple as a URL to a GitHub repository but in the age of social media it's sometimes better to take a screenshot of your code instead the problem with this however is that expectations often exceed reality due to the fact that taking screenshots by hand kind of sucks for example it's highly unlikely that your code will ever be perfectly centered and it will often contain artifacts that distract from the core code you wish to show not only that but unless your audience has the eyes of a hawk you're likely going to need to increase your font size messing around with your environment settings all of this results in a likely failed attempt to take the perfect code selfie because of this there are tools out there such as carbon which are incredibly popular for taking aesthetically pleasing screenshots of your code but for someone like me a self-described terminal hermit also known as a termit then this requires much more movement of the mouse than I'm comfortable with fortunately for my term itself there are three neovin plugins that I found to help me do code snapshots all whilst reducing my risk of carpal tunnel syndrome the first of these plugins is carbon now. envm which uses carbon as the backend for generating code snapshots to check it out let's first install it within neovim to go along with this video I've created my own base configuration which you can download and install yourself to do so you'll need to clone this repository into your envm configuration then open up the directory in neovim you should then see the lazy package manager download and install any base dependencies once it's complete you can then open up telescope using the space f and f key and head over to the lower plugins custom. L file and open it up this file is where we're going to add all of the plugins that I mentioned in this video to install carbon now. envm all we need to do is add in the following lines which will cause the plug-in to only load when we call the carbon Now command once added we can then open up neovim in another terminal and watch the plug-in be installed once it's complete I can then navigate over to some code in order to test out the plug-in to do so we first need to select the code we want to create a screenshot of using visual mode we can achieve this by entering visual mode with the V key and then navigating over our lines you can also do so using the mouse if you want to take that risk with our lines selected we can then generate our screenshot using the carbon Now command this will then open up a web browser for us with our code in carbon pretty dope from here we're able to make any configuration changes to our snapshot style then once we're happy we can download the image using the export button but or tweet it using the Tweet button Additionally you can also copy this to your clipboard if you're using a chrome based browser whilst it is possible to make customization changes using the browser doing this by hand kind of sucks fortunately the plugin allows us to easily change the default customization which we can do by adding the following fields to our options table now when we generate our code snapshot again our default customization will automatically apply overall this plugin works pretty well however I did run into a weird formatting issue on the image when I used my own customized config I'm unsure if this is a skill issue on my behalf or an issue with carbon itself either way this plugin is still pretty dope and if you use carbon now a lot already then it can save you a bit of time however for myself it still requires too much of using the mouse for my liking the next plugin we're going to look at is cod snap. envm which is pretty new onto the scene despite being as fresh as the morning dew this plugin is certainly not lacking and bundles all of the necessary code for you to generate images on your machine no internet required to install code snap. MVM is as simple as adding the following lines into your plug-in definition in addition to this we need to make sure we have rust installed on our system as well in order to build the packages dependencies if you accidentally try to install it without this then you'll run into an error where you have to build the plug-in manually you can do this by opening up lazy navigating to the plugin and pressing the GB Keys the actual build process takes a little bit of time however once it's complete you won't need to run it again unless you update the the package once it's done we can then check it out if I open up some code that I want to share we can start the Cod snap server by using the Cod snap preview on command this will then open up a browser window for us running the Cod snap web app pretty neat if we then head back to neovim and select some code using visual mode it automatically updates the Cod snap preview as well which is a feature I really like when we're happy with the selection we can either then download the image using the export button or my personal favorite copy it to our clipboard personally I much prefer to copy these images to my clipboard rather than downloading them but still it does require the mouse in order to make it happen although that may soon change as the documentation suggests a desire to make this a near Vim command which would be perfect for a termit like me similar to carbon Cod snap also comes with a few options for customization although they are rather Limited at this stage with that being said when I started this video there was only three options available by the time I got round to recording this section that number had risen to six that's in part due to how active the development is on this project and therefore I'd expect the level of customization to increase dramatically over the coming months overall I'd say that this project is rather promising and has a lot of potential unfortunately however it still requires a little bit of mouse usage in order to obtain the actual snapshots therefore for the health of my wrists I'm going to hold off on making code snap a permanent fixture of my neim config at least until we get that copy command the last and certainly not least plugin on my list is MVM silicon this plug-in allows neovim to generate code snapshots using silicon which is an alternative to carbon that works through a CLI interface this means there's no need for an internet connection and perhaps more importantly no need for a web browser to set up MVM silicon is again rather simple just add the following lines into your plug-in definition this setup will cause the plugin to only load when we call the Silicon command before we can use it however we need to install a couple of dependencies onto our system the first is is to make sure you have the fonts installed that we've defined in our configuration I actually had issues with the default settings of the plugin trying to load the Noto emoji font which as far as I can tell doesn't exist on Arch instead I had to change this to the Noto color emoji font which does actually seem to exist on my system afterwards we then need to make sure we have the Silicon CLI installed as I'm using Arch by the way I'll again install it using Pac-Man with everything set up we're now ready to generate a code snapshot to do so head over to the code you want to take a selfie with and yet again highlight it using visual mode once selected we can then use the Silicon command to generate our image this is pretty similar to how it works with the carbon now plug-in however the key difference here is that instead of a browser window being opened an image is automatically generated for us and placed in our current working directory or without my fingers ever having to leave the safety of my keyboard similar to carbon now silicon also provides a number of configuration options to customize the design of our image images and compared to the aforementioned plug-in it didn't mess up my image generation when I actually used them one thing I found really useful is that in addition to the documentation on GitHub you can also use the Silicon CLI as a source of documentation as well for example when I wanted to change the theme of my code I was able to use the Silicon CLI to determine which values were supported all of this amounts to envm Silicon being my preferred plugin for taking code snapshots from within neovim and it has therefore earned a place inside of my neovim config in honor of this great achievement it's worthwhile adding in a dedicated key mapping in order to generate snapshots more easily we can do this using witch key which is available in most neovim configurations including my own based one we'll Define our mapping inside of the init function in our plug-in definition first by importing the witch key package and then calling the register method passing in the following table this table creates a mapping for the leader followed by S and C Keys which I like to remember pneumonic as being snapshot code and then set this mapping to call the Silicon command lastly we need to specify that this mapping will only apply to visual mode once that's done we can go back to our code and test it out if we select our code again and then press the space SN C keys this will then invoke the Silicon command and we'll have a snapshot of our code in our directory with that we found and configured the best plugin for generating code snapshots with the least amount of risk of carpal tunnel syndrome now there's very little that will stand in my way when it comes to sharing high quality wellth thought out code with millions of people around the world

Channel: Dreams of Code

Views: 55,417

Keywords:

Id: ig_HLrssAYE

Length: 8min 34sec (514 seconds)

Published: Thu Feb 29 2024