PrismJS copy-to-clipboard error

Hello,
I use prismjs on my blog

I have a boring problem, when I copy the text using the copy-to-clipboard plugin, it automatically adds a line that shouldn’t be there.

Example:
```bash
sudo ufw status
```
copying and pasting it becomes like this:

1 sudo ufw status
2 // second line

This means that when I paste the code copied into the terminal, it starts automatically and should not happen

Does anyone have the same problem?

Hey @vasilli, do you have a link to an example of this problem? It’ll be easier to debug that way

You can test it here

Thanks for sharing the link. I tried it and yes it does add a trailing return when pasting a command. However for me the extra return doesn’t execute the command, I’m guess it does for you? I think the return has to be there for formatting, and that you’ll have to modify how the library copies bash commands into the clipboard

Unfortunately it run the command automatically for me, I tried on different systems and different shells.
I don’t think it’s a prismjs problem, I tried on other sites that use it and I don’t see the same problem.
You can try on codepen.

Probably some incompatibility with ghost syntax?

Have you tried on different operating systems? Which one are you using?

It’s not really a problem, it’s more a preference on code formatting. Maybe you could trim the trailing whitespace?

[...document.querySelectorAll('code')].map(bashItem => {
  bashItem.innerHTML = bashItem.innerHTML.trim();
});

Something like this would get rid of any trailing whitespace from your code samples

1 Like

I tried from ubuntu on windows, and on some vps with fedora and ubuntu, I encountered the same problem.

is a problem when I write an example of code with parameters to be modified based on user preferences, if the command starts automatically, the user will use the example parameters, and probably will not work.

The code you gave me solves the problem, initially I didn’t want to solve using javascript, I thought it was a different problem, but for now it’s ok.
thanks a lot

1 Like

I would like to ask you something else related to the problem solved.
If you go to see this link,

Search for the line:

Output
nuovoutente:nuovoutente

In this case the syntax is simply

```
Output
nuovoutente:nuovoutente
```

Automatically adds a space before Output

I do not understand these problems as they arise

You need to set a code language by the looks of it, from what I can see it’s not set at all for that code block

Now with prismjs I am obliged to insert a language code? This is simply a generic code.

You could tweak your CSS to inherit another language, but you’re best off just adding text to the language field. You’ll always need to add a value because it needs to know how to syntax highlight the code

As you can see I added the “text” class, but the space is always there, it’s really strange.

Looks like it’s getting confused by the return, try and tweak the formatting a few times to see if the presentation improves

I solved by removing the padding in the code tag.
thanks a lot

1 Like

Hi @vasilli Just put this tutorial together for styling code blocks using Prism.js. Might help you improve your presentation of code samples: https://ghost.org/tutorials/code-syntax-highlighting/ :slightly_smiling_face:

1 Like

Hi @DavidDarnes ,
Thanks, I was just now looking at this guide that you linked in another thread :slight_smile:

I have found a good solution with this script at the moment.

It would still be nice to give even more color to the text, tonight as soon as I have time i try following this guide.

2 Likes

@DavidDarnes i’ve downloaded css and js from prismjs.com and imported those files in my template.
Do you suggest to use cdn?

cdn will work best in my opinion. I also recommend the okaidia theme (closest to Monokai).

@gregpozo, thanks for your answer, but please stop spamming your site everywhere :slight_smile:
it is not the best way to be successful with your business

1 Like

I would recommend using a CDN if you’re not comfortable editing the theme yourself. However if you’re ok with that then I’d add the JavaScript and CSS into the theme, as you’ll get a slight performance boost from it. Even more so if you’re able to use the theme build process to combine your JavaScript and CSS into single .js and .css files. :+1: :zap: