title: How to implement a tabbed codeblock tag for Hexo
body: <p>I am trying to create tabbed code-blocks (as a tag plugin) in hexo but I cannot figure out where to put my js function. I thought I could load the function using <a href="https://hexo.io/api/helper.html" rel="nofollow noreferrer">the js helper</a> but I don't know where to include the helper. I tried, and failed, to add it into the tag plugin. This is the tag plugin code (saved as <em>testtag.js</em>):</p>
  
  <pre><code>hexo.extend.tag.register('testtag', function(args, content){
    var className =  args.join(' ');
  
    var result = '';
    result += "&lt;\%- js('\\themes\\bootstrap-blog\\scripts\\tab.js') \%&gt;"
    result += '&lt;div class="tabs"&gt;';
    result += '&lt;ul&gt;';
    result += '&lt;li class="li_tab1" onclick="tab(&amp;apos;tab1&amp;apos;)"&gt;&lt;a&gt;Tab 1&lt;/a&gt;&lt;/li&gt;';
    result += '&lt;li class="li_tab2" onclick="tab(&amp;apos;tab2&amp;apos;)"&gt;&lt;a&gt;Tab 2&lt;/a&gt;&lt;/li&gt;';
    result += '&lt;/ul&gt;';
    result += '&lt;div class="contentarea"&gt;';
    result += '&lt;div id="tab1"&gt;';
    result += '&lt;p&gt;' + content + '&lt;/p&gt;';
    result += '&lt;/div&gt;';
    result += '&lt;div id="tab2" style="display: none;"&gt;'
    result += '&lt;p&gt;This is the text for tab 2.&lt;/p&gt;'
    result += '&lt;/div&gt;'
    result += '&lt;/div&gt;'
    result += '&lt;/div&gt;'
  
    return result;
  
  }, {ends: true});
  </code></pre>
  
  <p>which does work. However, the onclick event of the tags just raises the error that it can't find the <code>tab</code> function. Note that the first line of <code>result</code> above was my failed attempt to use the helper.</p>
  
  <p>This is my <code>tab</code> function, <em>tab.js</em>:</p>
  
  <pre><code>function tab(tab) {
  document.getElementById('tab1').style.display = 'none';
  document.getElementById('tab2').style.display = 'none';
  document.getElementById('li_tab1').setAttribute("class", "");
  document.getElementById('li_tab2').setAttribute("class", "");
  document.getElementById(tab).style.display = 'block';
  document.getElementById('li_'+tab).setAttribute("class", "active");
  }
  </code></pre>
  
  <p>Both <em>tab.js</em> and <em>testtag.js</em> as saved in the *\themes\bootstrap-blog\scripts* folder.</p>
  
  <p>I saw <a href="https://stackoverflow.com/a/33741841/1011724">this answer</a> which I though might help but I can't figure out what a view is. I couldn't find anything about views in the Hexo docs.</p>