tabler/pages/_includes/layout/debug.html

<div class="debug">
   <a href="#" data-debug="dark">Dark mode</a>
   <a href="#" data-debug="rtl">RTL mode</a>
   <a href="#" data-debug="code">Show cards code</a>
   <a href="#" data-debug="folded">Folded sidebar</a>
   <a href="#" data-debug="fullscreen">Fullscreen</a>
   <a href="#" data-debug="header-sticky">Sticky header</a>

   <div class="debug-info">Jekyll {{ jekyll.version }}</div>
</div>
<style>
   .card-debug {
      position: absolute;
      right: 0;
      top: 0;
      line-height: 1;
      font-size: 11px;
      display: none;
   }

   .debug-info {
      margin-left: auto;
   }

   .card-debug a {
      display: inline-block;
      padding: 2px;
   }

   .card-debug a:hover {
      text-decoration: underline;
   }

   .debug {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: #222;
      color: #fff;
      padding: .5rem .75rem;
      font-size: 12px;
      direction: ltr;
      text-align: left;
      z-index: 1000;
      display: flex;
   }



   .debug a {
      color: inherit;
      margin-right: 1rem;
   }

   .debug a[data-debug]:after {
      content: '';
      margin: 0 0 1px .25rem;
      width: 6px;
      height: 6px;
      display: inline-block;
      background: rgba(255, 255, 255, .3);
      border-radius: 50%;
   }

   body.show-debug-code .card-debug {
      display: block;
   }

   @media (max-width: 991.98px) {
      .debug {
         display: none;
      }
   }

   body.show-debug-code a[data-debug="code"]:after,
   html[dir="rtl"] a[data-debug="rtl"]:after,
   body.theme-dark a[data-debug="dark"]:after,
   :fullscreen a[data-debug="fullscreen"]:after,
   body.header-sticky a[data-debug="header-sticky"]:after,
   body.sidebar-folded a[data-debug="folded"]:after {
      background: #5eba00;
   }
</style>
<script>
   $(document).ready(function () {


      var $body = $('body'),
         $html = $('html');

      $body
         .on('click', '[data-debug="dark"]', function (e) {
            $body.toggleClass('theme-dark');

            e.preventDefault();
            return false;
         })
         .on('click', '[data-debug="code"]', function (e) {
            $body.toggleClass('show-debug-code');

            e.preventDefault();
            return false;
         })
         .on('click', '[data-debug="folded"]', function (e) {
            $body.toggleClass('sidebar-folded');

            e.preventDefault();
            return false;
         })
         .on('click', '[data-debug="fullscreen"]', function (e) {
            tabler.toggleFullscreen();

            e.preventDefault();
            return false;
         })
         .on('click', '[data-debug="header-sticky"]', function (e) {
            $body.toggleClass('header-sticky');

            e.preventDefault();
            return false;
         })
         .on('click', '[data-debug="rtl"]', function (e) {
            if ($html.attr('dir') === 'rtl') {
               $html.attr('dir', 'ltr');
            } else {
               $html.attr('dir', 'rtl');
            }

            e.preventDefault();
            return false;
         });


      $('.card').each(function () {
         var $card = $(this),
            htmlCode = $card[0].innerHTML.replace(/(^[ \t]*\n)/gm, '');

         var $button = $('<div class="card-debug"><a href="#" class="text-muted-light" data-code>code</a></div>'),
            $codeLink = $button.find('[data-code]');

         $codeLink
         // .data('htmlCode', htmlCode)
            .on('click', function(e){

               var $modal = $('<div class="modal hide"><div class="modal-dialog modal-lg"><div class="modal-content"><div class="modal-body"><pre class="m-0"></pre></div></div></div></div>');
               $modal.find('pre').text(htmlCode);
               $('body').append($modal);
               console.log();

               $modal.modal('show');

               e.preventDefault();
               return false;
            });

         $card.prepend($button);
      });
   });
</script>