Make code copying easier with :before


May 20, 2018

Originally published here https://codeburst.io/make-code-copying-easier-with-before-2c0813bc5397

This happens often, if you are developing some documentaion generator or code highlighter make sure to do this.


Whenever you try to copy code that looks like this

Btw this is an image don’t try on this

Double click on that line, you will select something like this

and when pasted you get something like this

$ npm install gulp-sass --save-dev

To fix this,

// Consider

<code class="language-bash">
 <span class="co4">$ </span>
  npm
 <span class="kw2">install</span>
  gulp-sass 
 <span class="re5">--save-dev</span>
</code>

// Remove .co4

<style>
 .language-bash:before{ 
  content : '$';
  margin-right: 10px;
}
</style>

<code class="language-bash">
  npm
 <span class="kw2">install</span>
  gulp-sass 
 <span class="re5">--save-dev</span>
</code>

Now when you double click the line, this happens

Now when you copy at this stage and paste it you will get this

npm install 
dev

Before and after the :before 😜

Before the :before


After the :before

Images from http://inchoo.net/magento/magento-frontend/a-simple-frontend-workflow-for-gulp/


Subscribe to my newsletter


powered by TinyLetter and illustration from Lukaszadam

Girish Patil

Hi, My name is Girish Patil
I am a full stack developer @hashnode