Make code copying easier with :before

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

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 gulp-sass --save-dev

Before and after the :before 😜

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

Clap if you like this. Follow me on twitter : @theevilhead I run Certhive , Paybackhub.

✉️ Subscribe toCodeBurst’sonce-weekly Email Blast**,🐦 FollowCodeBurston Twitter, view🗺️ The 2018 Web Developer Roadmap, and🕸️ Learn Full Stack Web Development.

Originally published on Medium.