<!-- the selection bar -->
<div class="languages">
  <a class="language selected" data-lang="http" href="#">Http</a>
  <a class="language" data-lang="ruby" href="#">Ruby</a>
  <a class="language" data-lang="python" href="#">Python</a>
  <a class="language" data-lang="javascript" href="#">Javascript</a>
</div>

<div class="method-example">

<pre>
<code class="cpp">
<!-- snippet -->
</code>
</pre>

<pre>
<code class="python">
<!-- snippet -->
</code>
</pre>

</div>

<!-- the javascript -->
<script type="text/javascript">
  $(function () {
    hljs.configure({
      tabReplace: '  ',
      classPrefix: ''
    })
    hljs.initHighlightingOnLoad();

    // language init
    var defaultLang = 'http';
    $("pre code." + defaultLang).css("display", "block");

    // language toggle
    var $languages = $(".languages .language");
    $languages.click(function (e) {
      e.preventDefault();
      var lang = $(this).data("lang");
      $languages.removeClass("selected");
      $(this).addClass("selected");

      $("pre code").hide();
      $("pre code." + lang).css("display", "block");
    });
  });
</script>