Weird formatting after taking shot

[ghost]

Everything looks fine in vscode.

After taking the screenshot. The code lines break in a very weird way

[octref]

Can you paste the original source code here, along with the font you are using (I guess it's Operator Mono?)

[ghost]

The font is Operator Mono. I read other issues and changed the font to Fira Code but it didn't make any difference.

This is the code I was trying to make a screenshot

storeSchema.pre('save', function(next) {
  if (!this.isModified('name')) {
    next(); // skip it
    return; // stop function from running
  }
  this.slug = slug(this.name);
  next();
  // TODO: @mwamodojnr make more resiliant so slugs are unique
});

This is the whole file

const mongoose = require('mongoose');
const slug = require('slugs');

mongoose.Promise = global.Promise;

const storeSchema = new mongoose.Schema({
  name: {
    type: String,
    trim: true,
    required: 'Please enter a store name!',
  },
  slug: String,
  description: {
    type: String,
    trim: true,
  },
  tags: [String],
});

storeSchema.pre('save', function(next) {
  if (!this.isModified('name')) {
    next(); // skip it
    return; // stop function from running
  }
  this.slug = slug(this.name);
  next();
  // TODO: @mwamodojnr make more resiliant so slugs are unique
});

module.exports = mongoose.model('Store', storeSchema);

[octref]

I cannot reproduce it on either macOS or Windows.

Does it happen for this snippet?

const storeSchema = new mongoose.Schema({
  name: {
    type: String,
    trim: true,
    required: 'Please enter a store name!',
  },
  slug: String,
  description: {
    type: String,
    trim: true,
  },
  tags: [String],
});

Also if you do have some time, you can try tweaking the CSS styles:

• Clone this repo
• Open it in VS Code
• Run the Launch Polacode debug target
• In the new window, you can run command "Developer: Open Webview Developer Tools" to inspect the Polacode tab once it's open

Would be great if you can try running it by commenting out these lines:

https://github.com/octref/polacode/blob/d8224771b1557faade68b39c55710a2383c34280/webview/index.js#L144-L148

So you should get exactly what you get in the editor (now it's 2x).

[mirkancal]

I'm on vscode 1.33.1 on fedora 30. I'm facing same issue with flutter/dart code.

[liyiming22]

Same here. System: Manjaro Linux 18.0.4 VS Code: 1.35.0 Language: JavaScript

[micalevisk]

Same here.

Language: javascript

if (true) {
  console.log(foobar); // idk
  const foo = [1, 2,3 ];
}

[edevars]

I had the same issue in fedora 30, the font is operator mono. I tried with other fonts like Fira Code, but doesn't works. I also disabled the font ligatures but the result is the same

Polacode in vscode

The image after saving

[detj]

Facing this line wrapping issue in v0.3.2. Is it because while capturing the shot, it uses different CSS where the word wrapping settings are different from the CSS being used in screen render in VSCode?

[ossie-git]

I ran into the same issue. Here is what a screenshot of it looks like:

while the image generated by polacode looks like this:

and the corresponding code snippet:

//npm modules
const express = require('express');
const uuid = require('uuid/v4')
const session = require('express-session')
const FileStore = require('session-file-store')(session);
const bodyParser = require('body-parser');
const passport = require('passport');
const LocalStrategy = require('passport-local').Strategy;
const axios = require('axios');
const bcrypt = require('bcrypt');

[the-dr-lazy]

Also, I encountered the same issue.

[mor10]

Same issue. Standard install. MacOS, latest VS Code release, fresh install of Polacode, no configurations:

Preview in VS Code:

Saved file:

This happens across .css, .js, .php, and .json files.

[v1rtl]

Same. Ubuntu 18.04, VS Code 1.36.1

[GeroCoded]

Same here.

Polacode Preview

Polacode Result

[the-dr-lazy]

The issue has been resolved for me! IDK how! I'm on OS X 10.14.6 and VS Code 1.37.1.

[octref]

Think #121 by @kufii would fix this. I published the changes in 0.3.3. Please let me know if it fixes it for you.

[mmirus]

Still having this problem, unfortunately.

Name: Polacode Id: pnp.polacode Description: 📸 Polaroid for your code Version: 0.3.3 Publisher: P & P VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=pnp.polacode

Version: 1.38.1 (user setup) Commit: b37e54c98e1a74ba89e03073e5a3761284e3ffb0 Date: 2019-09-11T13:35:15.005Z Electron: 4.2.10 Chrome: 69.0.3497.128 Node.js: 10.11.0 V8: 6.9.427.31-electron.0 OS: Windows_NT x64 10.0.17134

(Developing on WSL if it matters)

[deftomat]

v0.3.4 and still the same issue

[chiangs]

I have VS code on a window zoom of -1, the formatting is fine before taking the snap, then the output is all wrong as others have shown. As soon as I put the zoom back at 0, the output is consistently fine.

Using MacOS X, VS Code, Night owl theme, Dank Mono

[mmirus]

Oh shoot, same here. Resetting the zoom level from -1 (what I normally prefer) to 0 fixes the problem. Reducing the editor font size in the settings without using the zoom feature seems to work okay too.

[kufii]

I haven't been able to figure out why, but resetting zoom, and enabling ligatures fixes the issue

[kufii]

@octref after playing around with dom-to-image I've discovered this issue can be fixed by setting white-space: nowrap on the code spans.

[nas5w]

Also experiencing this issue!

Versions: VS Code 1.40.2 Polacode 0.3.4 Ubuntu 18.10

[kufii]

I made a project inspired by polacode with fixes for issues like this. if you'd like you can use it while we wait for it to be fixed in polacode? https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap

[RafaelRey]

same issue here, Ubuntu 18.04 and VsCode 1.45.0

[LuigiR0jas]

Same, Ubuntu 20.04 LTS

VS Code version: 1.47.3 Commit: 91899dcef7b8110878ea59626991a18c8a6a1b3e Date: 2020-07-23T15:51:39.791Z Electron: 7.3.2 Chrome: 78.0.3904.130 Node.js: 12.8.1 V8: 7.8.279.23-electron.0 OS: Linux x64 5.4.0-42-generic

[SaizFerri]

I had the same issue, reseting the zoom of VSCode to 0 solves the problem 👌

[FrancescoSaverioZuppichini]

same

[fgarcia5]

I had the same issue, reseting the zoom of VSCode to 0 solves the problem 👌

This worked for me. Thanks for sharing!

[astrolemonade]

Is there a way to avoid resetting the zoom level?

[FrancescoSaverioZuppichini]

use carbon insted https://carbon.now.sh/