Adding copy to clipboard button to every google code prettify pre blocks in blogger

It's a 2 part process:
  • The script part to find all the pre blocks having code in it and append a copy button to it dynamically.
  • The style part to place our copy button at the specified location(on top right of every code block in this case)
The script part:
<script>
var pre = document.getElementsByTagName('pre');
for (var i = 0; i < pre.length; i++) {
            var button = document.createElement('button');
                    button.className = 'copy-button';
                    button.textContent = 'Copy';
                    var s = pre[i].innerText;
                    button.setAttribute("data-clipboard-text",s); 
                    pre[i].appendChild(button);        

}

var clipboard = new Clipboard('.copy-button');
    clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);
    e.trigger.textContent = 'Copied';
    window.setTimeout(function() {
        e.trigger.textContent = 'Copy';
    }, 2000);
    e.clearSelection();

});
    clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});
</script>
<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v2.0.4/dist/clipboard.min.js"> 
</script>
Note:Before this version was 1.7.1 also as rawgit will shutdown in sometime above code will be replaced with:
<script src="https://cdn.jsdelivr.net/gh/zenorocha/clipboard.js@v2.0.4/dist/clipboard.min.js"> 
</script>
The style part (You might want to clean this part a bit,I will update it in free time):
<style>
.copy-button {
    cursor: pointer;
    border: 0;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 500;
    padding: 6px 10px 10px;
    color: #795548;
    background-color: transparent;
    position: absolute;
    top: 0;
    right: 0;
}

.copy-button, ::before, ::after {
    box-sizing: inherit;
}

.copy-button {
    font-family: 'HELEVETICA',sans-serif;
    font-size: 12px;
    font-weight: normal;
    text-align: center;
    text-decoration: none;
    text-indent: 0;      
}

pre[class*="prettyprint"] {
    -moz-tab-size: 4;
    -moz-hyphens: none;
     hyphens: none;
}


.copy-button::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

.copy-button::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 3px;
    background-size: contain;
    background-image: url('http://www.YourWebsiteName.com/favicon.ico');
    background-repeat: no-repeat;
    position: relative;
    top: 3px;

}

.copy-button {
    cursor: pointer;
    border: 0;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 500;
    padding: 6px 10px 10px;
    color: #795548;
    background-color: transparent;
    position: absolute;
    top: 0;
    right: 0;

}

pre[class*="prettyprint"] {
    -moz-tab-size: 4;
    -moz-hyphens: none;
    hyphens: none;
    position: relative;}

.copy-button{border-radius: 0;
    min-width:55px;
    background: none repeat scroll 0 0 transparent;
    border: 1px solid #bbb;
    color: #26589F;
    font-family: 'HELEVETICA',sans-serif;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.42rem;
    margin: 0;
    padding: 0px 5px;
    text-align: center;
    text-decoration: none;
    text-indent: 0;
    position:absolute;
    background:#ccc;   

}

.pre{max-width: 30px;
    overflow: hidden;
    position: absolute;}

ol.linenums {
    overflow: auto;
}
</style>

Comments

  1. Thanks for the code. I had a problem using this with the bootstrap. I had to modify slightly. I had to pass the modal container id.

    Instead of:

    var clipboard = new Clipboard('.copy-button');

    I have done:

    var clipboard = new Clipboard('.copy-button', {
    container: document.getElementById('rep')
    });

    ReplyDelete
    Replies
    1. I have used the set attribute thing and simple class selector as it works in blogger default themes and yes for bootstrap what you have done is exactly what is required "For use in Bootstrap Modals or with any other library that changes the focus you'll want to set the focused element as the container value." as stated in advanced usage section of clipboardjs site, thanks for mentioning it here.

      Delete
  2. Thank you bro!! it was really helpful for me.

    ReplyDelete
  3. Hi Shivam, It works fine. But some times the C# formatting is copied properly. All the content appear in a single line while pasting the content without their line formatting and indentation like displayed in the webpage. Is there anything that can be done.?

    ReplyDelete
    Replies
    1. Hi,
      I will need a example of problematic code to test things out before suggesting anything, is it loosing indentation only when you are using copy button to copy code or also when you are selecting code manually and copying pasting it using ctrl+c and ctrl+v, which text editor are you pasting the code into ? Is this behavior specific to browser?

      Delete
    2. Hi Shivam, Yes, its loosing indentation when using the copy code button only. But, the problem is the indentation is retained for languages like XAML. But only C# codes does not retain the indentation. And it is not browser specific it does not retain the indentation in all the browsers. And i am using notepad++ to paste the content.

      Delete
    3. Hi,
      I am not sure why its happening as we are already using "data-clipboard-text" and not "data-clipboard-target" I will check it and let you know if I find something, meanwhile I have updated the code to make use of latest version of clipboardjs which is 2.0.4 earlier it was using 1.7.1 may be with new version it might have got fixed, thanks.

      Delete
    4. Updated version 2.0.4 does not seem to work at all. Copy to clipboard success event does not fire at all.

      Delete
    5. Also forgot to mention, that this happens in the Navigation tab bar, where code snippets for various languages are provided for the same concept.

      Delete

Post a Comment

Popular posts from this blog

Enabling fixed Sidebar for blogger Contempo template for screen sizes smaller than 1440px

Query to Expand and List All logins within a SQL Server Group