octref / polacode

📸 Polaroid for your code

Polacode — Polaroid for your code 📸

Why?

You have spent countless hours finding the perfect JavaScript grammar, matching it with a sleek-looking VS Code theme, trying out all the best programming fonts.

You take three days porting over your theme before starting to use VS Code.
You shell out $200 for italic cursive html attributes.

The code has to look right.

Tips

• Resize the snippet / container by dragging the lowerright corner
• Use polacode.target, polacode.shadow, polacode.transparentBackground and polacode.backgroundColor to control image appearance

Demo

Nord + Input Mono

Monokai Pro + Operator Mono

Material Theme Palenight + Fira Code

Credit

Thanks to @tsayen for making dom-to-image, which Polacode is using for generating the images.

Thanks to Dawn Labs for making Carbon that inspired Polacode.

Many color are taken from the elegant Nord theme by @arcticicestudio.

Download button animation is made with Vivus.

Contribution

Contribution is not very welcome. Please open an issue first so I can stop you from complicating the UX.

License

MIT

polacode's Issues

Feature Request: Auto upload images

Allow for the image to be auto uploaded somewhere, then the link auto copied to the clipboard. Similar to how lightshot works

Handle long token gracefully

Hi
Anyone encountered the same issue?

Thanks

Improve shadow

Hi, the generated image have the shadow cropped at the bottom. Would be awesome have a way to export transparent png with no shadows and/or add more space at the bottom to avoid shadow cropping

allow copying to clipboard instead of saving as a file

Tweaking the border width

Just a minor request. Is there a way of tweaking the border width? And on a related note, are any other options available in the settings? Kinda like this...

Feature Request: Mac-style Window UI Buttons

I feel like adding Mac-style UI buttons like in Carbon would add to the aesthetic. If you'd like, I just created a set in Sketch, exported them to SVG and ran them through SVGOMG. You can grab my resulting SVG on a Codepen pen I just created.

VS code half-screen generate narrow image

Hi there,

I installed polacode in VS code, win10. I set my VS code to half screen, then try to generate a picture, finally I got this:

Polacode doesnt respect my font

Hi there,

Thanks for the great extension. I can totally see myself using this very often!

When I open polacode, it doesnt respect the font I currently have. (see screenshot). However, when I paste code into the window, it shows up right but when I export as png it'd revert to the incorrect font.

Here's the behavior in steps

• Open vscode. Editor shows correct font
• Open polacode. Editor shows correct font, polacode shows instructions in incorrect font (https://imgur.com/CoqCfeA.png)
• Copy/paste. Editor shows correct font. polacode shows correct font
• Export. Editor shows correct font. code.png has incorrect font.

Happy to give more details if you need any.

Thanks!
Jeff

screenshot - https://imgur.com/CoqCfeA.png

Allow responsive html export

Currently the extension makes images, which are awesome for speaking & tweeting, but not so much for embedding into blog posts.

We should have a way of exporting responsive html, so people can embed the output and have the code copy-pastable.

what did you use softwre for crete gif image?

https://github.com/octref/polacode#polacode

Transparent shot background

Hi, I was wondering if there is an option/setting to set the background to be transparent. Thanks.

Normalize indentation

When pasting an indented code snippet, Polacode will keep its indentation. This leads to weird looking images such as this:

It would be great if Polacode would normalize the indentation on paste, similar to VS Code's native Format on Save feature.

Remember the "Save to" folder

When saving, it always goes to desktop. Would be cool if it would remember where we saved it last time. (e.g. Download, documents, etc)

Have light/dark variant of the backdrop in contrast to snippet background

Often, the gray background may not be ideal, such as when embedding into a blog with a white background. Allowing the user to set a custom background would solve this problem and make the output even more individualizable!

Image becomes cropped when programmes with longer lines are pasted

While larger programmes with longer lines are pasted, the image is cropped into the fixed frame. It will be awesome if the size of the frame adjusts by the code.

ability to set image title

I suggest that an ability to set image title with an input field in VsCode could be helpful.

Remember font after first time initializing

After running Polacode first time, we can get the font info and put it on the placeholder HTML.

Long line still not wrapped

If I paste this code:

        // Case 1: returns Integer type and handled by builder-default Integer -> HttpResponse converter.
        @Get
        @Path("/int/:var")
        public int returnInt(@Param("var") int var) {
            return var;
        }

I get this image:

Polacode 0.2.2 + VSCode 1.20.1 + Linux

Sublime Text Support

Please support the Sublime Text code editor in the future.

Broken when Vim plugin enabled

Doesn't seem to work when I have https://github.com/VSCodeVim/Vim enabled.

Not working from unsaved tab

I had some code in a slide I wanted to Polacode on so I opened up a new tab in Code, pasted in my code, then copied it again and pasted it into Polacode but it wouldn't accept the input.

I saved the file and then I was able to paste it in.

Too much padding before and after content

There is too much padding before and after the content.
Even View: Toggle Editor Group Vertical / Horizontal layout does not help.

System: Windows 10

Request: Port to Atom/Sublime?

Nothing happens when pasting into polacode window

Not sure if I'm doing something wrong but I followed the steps:

1. Run polacode command
2. Copy my code
3. Paste into polacode window
4. Nothing happens / The code in the image doesn't change

Versions:

VSCode version 1.20.1 (1.20.1)
Mac OSX High Sierra 10.13.3

Won't install - end of central directory record signature not found

Sorry do'm have any more debug info than this;

macOSX
Code version 1.20.1

Shows this error message when trying to install.

Functionality todo

@rebornix

• Be able to download image
• Save to clipboard

Could it display color?

Does not respect wrapping, code gets cut off

If the code block is wider than the polacode window, it's simply cut off:

Suggestion: use selected text instead of requiring pasting

It would be awesome if, instead of having to do the copy-and-paste dance, you could simply select some text and then run the command. VS Code exposes the TM_SELECTED_TEXT variable for snippets, and I'm wondering if there's a way to reuse that here?

When using tab, minIndent is incorrect and does not remove initial indent correctly.

When you have a tab displayed as 4 characters, using clipboard to get plain text is is a tab but in html it is 4 nbsps.

Need to count the nbsp instead of code for determining initial indent.

Doesn't work when VSCodeVim plugin is enabled

Just nothing happens when you paste code to polacode tab. But it works fine if you disable the plugin.

Bug: Text overflows outside of the box

Hey! Congrats for this great project!

I was testing it, and found a bug on some small width.

If line is too long, it overflows outside of box.

Maybe it box shouldn't be resized with VSCode panel, but more regarding text length?

I'm on macOS 10.13.1, VSCode 1.20.1.

Regards

Add option to export without backdrop

Although it's clear that part of the point here is to have the shadows, i think the nicely rounded corners are still compelling without, and it would be nice to have the option to turn them off. Also, because they are currently being cut off anyway, at least in my test—so another option would be to expand the edges so the shadow is contained. Basically, the same choice as we have on macOS, to screenshot a window with or without the option key.

Thanks for this great addition to vscode!

Font ligatures rendered when "editor.fontLigatures": false

Current settings:

    "editor.fontLigatures": false,
    "editor.fontFamily": "'Fira Code', Menlo, Monaco, 'Courier New', monospace",
    "editor.fontSize": 14,

Fira Code from: https://github.com/tonsky/FiraCode

Editor view:

Polacode:

Expected:
Polacode only renders ligatures when "editor.fontLigatures": true

Doesn't work with Vim extension

bug
doesn't work with vscodevim.vim

Great idea and very slick UX, unfortunately, the plugin doesn't work when you have enabled Vim mode provided by Vscodevim.vim – otherwise works like a charm.

I've digged in to the issue and I've figured it out that problem is src/webview/index.js

document.addEventListener("paste", e => {
  const innerHTML = e.clipboardData.getData("text/html");
  const code = e.clipboardData.getData("text/plain");

innerHTML is an empty string when Vim mode is enabled. I have not idea how to tackle it.

.png file is not saved

I get a dialog window to pick the name and folder and save a shot as a shot.png, but when I click OK nothing happens. File is not saved. I'm running VSCode on Windows 10 with the latest patches.

Cannot copy any code on windows

Every type of code I copy, I get the message: "Pasted content is invalid. Only copy from VS Code and check if your shortcuts for copy/paste have conflicts."

This happens with valid HTML and Javascript on VSCode for windows.

Example of HTML code which is rejected:

<table class="table table-bordered table-hover"> <thead> <tr> <td>Frequency</td> <td>When</td> </tr> </thead> <tbody id="distributionTable"> </tbody> </table>

Provide a way to switch off shadow and backdrop

The resulting image contains an ugly (sorry) shadow that causes the image to look bad on white pages. Please provide a way to switch it off.

Code Insiders - `end of central directory record signature not found`

When I try to install the extension on Code Insiders (currently 1.21.0) I get the message:

 end of central directory record signature not found

And the extension doesn't install.
I've randomly tried other extensions (not to mention I already have quite a few installed, so I guess it's not a problem with Code).

FR: Highlight sections of the code to draw attention and dim rest

Often times when you present the code you want to draw attention to a particular part of the code. The best way to do this is to "dim" the rest of the code (but not remove completely) and retain syntax highlight for the section we want folks to look at.

polacode should support this usecase.

See screenshot for an instance of this in action - https://imgur.com/hHc16Vw.png

feat: export link or markdown containing original code

This is so great, one thing that would be super useful is if it could also generate a link or a markdown file that would take you to a place where you could copy/paste the original code and even edit it. Keeping images up to date in documentation sucks but this could be a really nice way to offer the best of both worlds.

Feature: Change colors

Polacode should have the functionality to change the colors.
For example, I want to create a Document and print it in white and black. Because the default background color is dark the printed result looks bad. A white background like the default VSCode Light+ Theme would be helpful.

Line numbers

It would be cool if you could toggle line numbers in the settings. Just for inspiration :D

Add command for "Save" so that we can create a keybinding for it

first ... LOVE THIS, thank you!

This would enable this workflow, all via keyboard:

• CMD+A (select all)
• CMD+C (copy)
• CMD+CTRL+I (i mapped this to activate polacode)
• CMD+V (paste to polacode)
• .... now we use the mouse/trackpad to press the save button in polacode

I propose a command that we can map to a keybinding for the final step.

What do you think?

Proper pasted html validation

This is needed for later normalizing and transforming HTML for #5.
Current validation is too heuristic and basic.

fighting wordwrap issues

Though those do not matter much, but for huge pieces of code i had to close all panes and make sure the polacode pane has the max size possible.

Have a npm version

So people could plug Polacode into their build system for code snippets in markdown, or use it programatically.

This would require puppeteer dependency.

Not wide enough

See the attached output and note how the edge is cropped off.

Auto wrap for long lines

• Add option to specify image width (and wrap on that width)
• Read editor.wordWrapColumn and wrap on it

Pasted content is invalid. Only copy from VS Code and check if your shortcut for copy/paste have conflict

How to solve this problem? i see ctrl+c any shortcut keybinding in my VSCode