Make code copying easier with :before

May 20, 2018

Make code copying easier with :before

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

Before and after the :before 😜

<span class="figcaption_hack">Before the :before</span>

<span class="figcaption_hack">After the :before</span>

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
I run Devcult and GDGHubli as one of the organizers. Trying to build some projects on the side.