How to add Python Code Snippet to your blogger or website? (Version. 2.0)

In my last post i.e. https://pysnakeblog.blogspot.com/2021/10/how-to-add-code-snipit-to-your-blogger.html I have showed you how you can add code to your blog or website.

But in this there is little bit of an update to that very same code.

Features of this code?
✔️ Posting Python Code + other language code without losing its indent format.
✔️ Copy Paste Function directly from HTML using Javascript.
✔️ A pop up confirmation that you have copied the code.

*You can refer to the previous tutorial that I have posted earlier if you do not understand certain things. Same link is given above.

Use this html code in your blog / website

<meta name="viewport" content="width=device-width, initial-scale=1">
<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: #FF7357;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

/* Popup container - can be anything you want */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
</style>

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


function myyFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}
</script>

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


<<COPY PASTE YOUR PYTHON CODE HERE>>


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


<div class="popup" onclick="myyFunction()">
<span class="popuptext" id="myPopup">Copied</span>
<button class="copy-text" data-clipboard-target="#content" href="#">Copy Code</button>
</div>

I am going to use import this and this is the result as you can see here.

>>> import this
The Zen of Python, by Tim Peters

Beautiful is better than ugly.
Explicit is better than implicit.
Simple is better than complex.
Complex is better than complicated.
Flat is better than nested.
Sparse is better than dense.
Readability counts.
Special cases aren't special enough to break the rules.
Although practicality beats purity.
Errors should never pass silently.
Unless explicitly silenced.
In the face of ambiguity, refuse the temptation to guess.
There should be one-- and preferably only one --obvious way to do it.
Although that way may not be obvious at first unless you're Dutch.
Now is better than never.
Although never is often better than *right* now.
If the implementation is hard to explain, it's a bad idea.
If the implementation is easy to explain, it may be a good idea.
Namespaces are one honking great idea -- let's do more of those!
>>> 

Copied