Cyber

Atom Text Editor Will Officially Stop Later This Year

For years I have been using Atom to write my scripts.. Because I think this is one of the best FREE “Hackable” text editors. But…. GitHub Atom is shutting down.. Unfortunately.. “When we formally introduced Atom in 2014, we set out to give developers a text editor that was deeply customizable but also easy to use—one that made it possible for more people to build software. While that goal of growing the software creator community remains , we’ve decided to retire Atom in order to further our commitment to bringing fast and reliable software development to the cloud via Microsoft Visual Studio Code and GitHub Codespaces.

My Digital Garden

Digital Garden For me this website is a beautiful publicly available snapshot of my second brain but with a twist between the chaos streams and the cultivated performance. I always wanted to create something where I can just express myself in the way I want to.. 🌱 Plant: By hunting down interesting ideas and taking notes. 🌳 Grow: By refining notes and connecting them with others. 🍇 Harvest: By composing new ideas through Creative Remixing.

Content Copy Protection And No Right Click Scripts

Why? After writing articles on HackingPassion.com for some time, I noticed that articles were regularly copied and posted as if they had written it themselves. But really everything, even with a photo. I was asked several times or even threatened to remove my own content. They even stood on Medium. With photos of my terminal and my own face on it. (Most of those articles have been removed), this was for sure because I asked them very nicely to do so.

Add Copy to Clipboard Buttons to Code Blocks in Hugo

Many websites have plug-ins for Copy to Clipboard Buttons, but after consulting many documents. I didn’t like the page layout and it’s very difficult to adjust. I checked some foreign websites and ended up sharing the code I found. I’ve tweaked the code here and there. See below an example of what it will look like: Add a Copy to Clipboard A block of code without syntax highlighting has the same structure, but nothing around <div class=highlight>.

Add Copy to Clipboard Buttons to Code Blocks in Hugo

Many websites have plug-ins for Copy to Clipboard Buttons, but after consulting many documents. I didn’t like the page layout and it’s very difficult to adjust. I checked some foreign websites and ended up sharing the code I found. I’ve tweaked the code here and there.

See below an example of what it will look like:

Kopieer naar Klembordknoppen Toevoegen aan Codeblokken in Hugo

Add a Copy to Clipboard

A block of code without syntax highlighting has the same structure, but nothing around <div class=highlight>. To account for both cases, I chose to put a child element <pre> below the <code> element.

copy-to-clipboard.css :

.highlight {
    position: relative;
}

.highlight pre {
    padding-right: 75px;
    background-color:#312828 !important;
}

.highlight-copy-btn {
    position: absolute;
    bottom: 1px;
    right: 3px;
    border: 0;
    border-radius: 2px;
    padding: 1px;
    font-size: 0.8em;
    line-height: 1.8;
    color: rgb(17, 13, 13);
    background-color: rgb(22, 21, 21);
    min-width: 55px;
    text-align: center;
}

.highlight-copy-btn:hover {
    background-color: rgb(33, 32, 32);
}

Interacting with the clipboard

Now that the button is available, the next step is to use JavaScript to copy the code to the clipboard.

Code: copy-to-clipboard.js

(function() {
    'use strict';
  
    if(!document.queryCommandSupported('copy')) {
      return;
    }
  
    function flashCopyMessage(el, msg) {
      el.textContent = msg;
      setTimeout(function() {
        el.textContent = "Copy Text Block";
      }, 1000);
    }
  
    function selectText(node) {
      var selection = window.getSelection();
      var range = document.createRange();
      range.selectNodeContents(node);
      selection.removeAllRanges();
      selection.addRange(range);
      return selection;
    }
  
    function addCopyButton(containerEl) {
      var copyBtn = document.createElement("button");
      copyBtn.className = "highlight-copy-btn";
      copyBtn.textContent = "Copy Text Block";
  
      var codeEl = containerEl.firstElementChild;
      copyBtn.addEventListener('click', function() {
        try {
          var selection = selectText(codeEl);
          document.execCommand('copy');
          selection.removeAllRanges();
  
          flashCopyMessage(copyBtn, 'Copied!')
        } catch(e) {
          console && console.log(e);
          flashCopyMessage(copyBtn, 'Failed :\'(')
        }
      });
  
      containerEl.appendChild(copyBtn);
    }
  
    // Add copy button to code blocks
    var highlightBlocks = document.getElementsByClassName('highlight');
    Array.prototype.forEach.call(highlightBlocks, addCopyButton);
  })();

Edit theme

Put copy-to-clipboard.css and in the en directory copy-to-clipboard.js respectively static/css static/js

Then refer to these two files on the page

  1. Edit config.toml and add custom css
custom_css = ["/css/copy-to-clipboard.css"]

Then Run Hugo

hugo server

The final result is as follows:

Kopieer text block

Share on: