Markdown Clickable

Description

• make Markdown block clickable
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. First, add Link to Markdown Block. Note: code will get first link in Markdown to make Markdown clickable to this url.

#1.2. Hover on Page where you use Markdown > Click Gear icon

#1.3. Click Advanced > Paste this code

• If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1

<!-- 07.26c30v6 Markdown Clickable -->
<script>
window.MarkdownClickableConfig = {
  selector: '.markdown-block'
};
</script>
<script>
(function () {
  var cfg = window.MarkdownClickableConfig || {};
  var selector = cfg.selector;

  function isEditMode() {
    return document.body && document.body.classList.contains('sqs-edit-mode-active');
  }

  function injectStyle() {
    if (document.getElementById('md-clickable-style')) return;
    var style = document.createElement('style');
    style.id = 'md-clickable-style';
    style.textContent = '.md-clickable{cursor:pointer;}';
    document.head.appendChild(style);
  }

  function hasSelection() {
    var s = window.getSelection ? window.getSelection().toString() : '';
    return s && s.length > 0;
  }

  function bind(block) {
    var primary = block.querySelector('a[href]');
    if (!primary) return;
    block.dataset.mdClickableDone = 'true';
    block.classList.add('md-clickable');
    block.addEventListener('click', function (e) {
      if (e.target.closest('a')) return;
      if (hasSelection()) return;
      var href = primary.getAttribute('href');
      if (!href) return;
      if (primary.getAttribute('target') === '_blank') {
        window.open(href, '_blank', 'noopener');
      } else {
        window.location.href = href;
      }
    });
  }

  function init() {
    if (!selector || isEditMode()) return;
    var blocks = document.querySelectorAll(selector);
    for (var i = 0; i < blocks.length; i++) {
      if (blocks[i].dataset.mdClickableDone) continue;
      bind(blocks[i]);
    }
    injectStyle();
  }

  function ready(fn) {
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', fn);
    } else {
      fn();
    }
  }

  ready(init);
  window.addEventListener('mercury:load', init);
})();
</script>

#2. Customize

nothing now

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can add a Markdown Block under Markdown

Then add this code into Markdown Block

<script>
window.MarkdownClickableConfig = {
  selector: '.markdown-block'
};
</script>
<script>
(function () {
  var cfg = window.MarkdownClickableConfig || {};
  var selector = cfg.selector;

  function isEditMode() {
    return document.body && document.body.classList.contains('sqs-edit-mode-active');
  }

  function injectStyle() {
    if (document.getElementById('md-clickable-style')) return;
    var style = document.createElement('style');
    style.id = 'md-clickable-style';
    style.textContent = '.md-clickable{cursor:pointer;}';
    document.head.appendChild(style);
  }

  function hasSelection() {
    var s = window.getSelection ? window.getSelection().toString() : '';
    return s && s.length > 0;
  }

  function bind(block) {
    var primary = block.querySelector('a[href]');
    if (!primary) return;
    block.dataset.mdClickableDone = 'true';
    block.classList.add('md-clickable');
    block.addEventListener('click', function (e) {
      if (e.target.closest('a')) return;
      if (hasSelection()) return;
      var href = primary.getAttribute('href');
      if (!href) return;
      if (primary.getAttribute('target') === '_blank') {
        window.open(href, '_blank', 'noopener');
      } else {
        window.location.href = href;
      }
    });
  }

  function init() {
    if (!selector || isEditMode()) return;
    var blocks = document.querySelectorAll(selector);
    for (var i = 0; i < blocks.length; i++) {
      if (blocks[i].dataset.mdClickableDone) continue;
      bind(blocks[i]);
    }
    injectStyle();
  }

  function ready(fn) {
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', fn);
    } else {
      fn();
    }
  }

  ready(init);
  window.addEventListener('mercury:load', init);
})();
</script>