All code is highlighted using the Rouge gem. Let us test this out.

<!-- Some comment -->
<div class="schemesmenu">

 <button onclick="schemesFunction()" class="schemes-button">
   Prot16 schemes
   <svg class="deco-icon icon-menu">
     <use xlink:href="#icon-menu"></use>
   </svg>
 </button>

 <nav id="schemesDropdown" class="dropdown-content" aria-label="Prot16 schemes menu">
   <ul>
     <li><a href="#">Text</a></li>
     <li><a href="#">Text</a></li>
   </ul>
 </nav>

</div>

It works!

// Random Mixin
@mixin tablet {
  @media screen and (min-width: #{$tablet}) {
    @content;
  }
}

// Some SCSS
.social-share {
  font-family: $fontui;
  font-size: $ssize;
  margin: ($vrythm * 2) 0 0;
  padding: 0;
  @extend %clearfix;

  div {
    a {
      color: $lbg;
      font-weight: 400;
      display: block;
      margin: ($sone / 2) 0;
      padding: ($sone / 2) $sone;

      @include tablet {
        float: left;
        display: inline-block;
        margin: 0 $sone 0 0;
      }

      &[href*="facebook.com"] {
        background: #3B5998;
      }

      &[href*="twitter.com"] {
        background: #1DA1F3;
      }

      &:hover {
        opacity: .8;
      }
    }
  }
}

Another test:

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function schemesFunction() {
    document.getElementById("schemesDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.schemes-button')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
};