How to add Code Snippet to your blogger or website? (with Copy to clipboard function)

 Today I am going to show you the following...

Q. How to add Code Snippet to your blogger or blogspot or website.
Q. How you can add Copypaste function to your code Snippet.
Q. How you can add Copy to clipboard function to your Code Snippet.
Q. How you can add Copypaste to clipboard function without loosing the format of the code.

 
All this questions will be answered in one shot.

This method is possible with any type of programming languages including Python.

So I have a sample code here which I am going to use and show you how easy it is with little bit of HTML, CSS and JavaScript.

Step 1:
Have your Working Code ready.

Step 2:
Go to hilite.me website and paste your code.
Choose your programming language.
- I choose "Python 3"
Choose what kind of style you prefer.
- I choose "monokai"

Here I am going to use this as a sample.

import os

original_file = "sample3.txt"
temp_file = "temp.txt"

string_to_delete = ['Emma', 'Kelly']
with open(original_file, "r") as input:
    with open(temp_file, "w") as output:
        for line in input:
            for word in string_to_delete:
                line = line.replace(word, "")
            output.write(line)

# replace file with original name
os.replace('temp.txt', 'sample3.txt')

Step 3:
Copypaste the HTML output in between this code below.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>

<style>
button {
  display: inline-block;
  padding: 5px 20px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #303134;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

button:hover {background-color: #202124}

button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
</style>

<script>
$(function(){
  new Clipboard('.copy-text');
});
</script>

<pre id="content">
<!------------------------------>


<<COPY PASTE YOUR HTML CODE HERE>>


<!------------------------------>
</pre>

<button class="copy-text" data-clipboard-target="#content" href="#">Copy Code</button>

& After Copy pasting it should look like this.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>

<style>
button {
  display: inline-block;
  padding: 5px 20px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #303134;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

button:hover {background-color: #202124}

button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
</style>

<script>
$(function(){
  new Clipboard('.copy-text');
});
</script>


<!------------------------------>

<!-- HTML generated using hilite.me --><div style="background: #272822; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre id="content" style="margin: 0; line-height: 125%"><span style="color: #f92672">import</span> <span style="color: #f8f8f2">os</span>

<span style="color: #f8f8f2">original_file</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&quot;sample3.txt&quot;</span>
<span style="color: #f8f8f2">temp_file</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&quot;temp.txt&quot;</span>

<span style="color: #f8f8f2">string_to_delete</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">[</span><span style="color: #e6db74">&#39;Emma&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&#39;Kelly&#39;</span><span style="color: #f8f8f2">]</span>
<span style="color: #66d9ef">with</span> <span style="color: #f8f8f2">open(original_file,</span> <span style="color: #e6db74">&quot;r&quot;</span><span style="color: #f8f8f2">)</span> <span style="color: #66d9ef">as</span> <span style="color: #f8f8f2">input:</span>
    <span style="color: #66d9ef">with</span> <span style="color: #f8f8f2">open(temp_file,</span> <span style="color: #e6db74">&quot;w&quot;</span><span style="color: #f8f8f2">)</span> <span style="color: #66d9ef">as</span> <span style="color: #f8f8f2">output:</span>
        <span style="color: #66d9ef">for</span> <span style="color: #f8f8f2">line</span> <span style="color: #f92672">in</span> <span style="color: #f8f8f2">input:</span>
            <span style="color: #66d9ef">for</span> <span style="color: #f8f8f2">word</span> <span style="color: #f92672">in</span> <span style="color: #f8f8f2">string_to_delete:</span>
                <span style="color: #f8f8f2">line</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">line</span><span style="color: #f92672">.</span><span style="color: #f8f8f2">replace(word,</span> <span style="color: #e6db74">&quot;&quot;</span><span style="color: #f8f8f2">)</span>
            <span style="color: #f8f8f2">output</span><span style="color: #f92672">.</span><span style="color: #f8f8f2">write(line)</span>

<span style="color: #75715e"># replace file with original name</span>
<span style="color: #f8f8f2">os</span><span style="color: #f92672">.</span><span style="color: #f8f8f2">replace(</span><span style="color: #e6db74">&#39;temp.txt&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&#39;sample3.txt&#39;</span><span style="color: #f8f8f2">)</span>
</pre></div>


<!------------------------------>


<button class="copy-text" data-clipboard-target="#content" href="#">Copy Code</button>

if you get unnecessary space between the code block and the button then just remove <pre id="content"> & </pre> from top and bottom. And add id="content" inside your code block next to another <div ....><pre id="content" ......

Step 4:
Now, Your are Ready to post.
Post your code and what does it do in your blog or website.

This is how it works ( Python Code Snippet with Copy to Clipboard function )

import os

original_file = "sample3.txt"
temp_file = "temp.txt"

string_to_delete = ['Emma', 'Kelly']
with open(original_file, "r") as input:
    with open(temp_file, "w") as output:
        for line in input:
            for word in string_to_delete:
                line = line.replace(word, "")
            output.write(line)

# replace file with original name
os.replace('temp.txt', 'sample3.txt')

Copied

Hope this tutorial was helpful.
Share this post with your code lover friends.

Enjoy!!!