http://wiselyj.com/en/tags/shortcode/ Recent content in Shortcode on Wisely's Store Hugo -- gohugo.io en wiselyjing@gmail.com (wisely) wiselyjing@gmail.com (wisely) &copy;{year}, All Rights Reserved Sat, 25 Jan 2020 06:40:51 +0900 http://wiselyj.com/en/posts/shortcodes/ Sat, 25 Jan 2020 06:40:51 +0900 wiselyjing@gmail.com (wisely) Sat, 25 Jan 2020 06:40:51 +0900 http://wiselyj.com/en/posts/shortcodes/ <h2 id="markdownify-box">Markdownify box</h2> <div class="box">This is <strong>boxmd</strong> shortcode</div> <h2 id="simple-box">Simple box</h2> <div class="box"> This is **box** shortcode </div> <h2 id="code-tabs">Code tabs</h2> <p>Make it easy to switch between different code</p> <div id="e69419c40a031581" class="codetab"> <div class="codetab__links"> <button class="codetab__link" aria-label="Tab link">java</button> <button class="codetab__link" aria-label="Tab link">javascript</button> </div> <div id="f5245009c64b2310" class="codetab__content"> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-java" data-lang="java"><span class="line"><span class="cl"><span class="n">System</span><span class="p">.</span><span class="na">out</span><span class="p">.</span><span class="na">println</span><span class="p">(</span><span class="err">&#39;</span><span class="n">Hello</span><span class="w"> </span><span class="n">World</span><span class="o">!</span><span class="err">&#39;</span><span class="p">);</span><span class="w"> </span></span></span></code></pre></td></tr></table> </div> </div> </div> <div id="0cda49cb3895f102" class="codetab__content"> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Hello World!&#39;</span><span class="p">);</span> </span></span></code></pre></td></tr></table> </div> </div> </div> </div> <script> 'use strict'; var containerId = JSON.parse("\"e69419c40a031581\""); var containerElem = document.getElementById(containerId); var codetabLinks = null; var codetabContents = null; var ids = []; if (containerElem) { codetabLinks = containerElem.querySelectorAll('.codetab__link'); codetabContents = containerElem.querySelectorAll('.codetab__content'); } for (var i = 0; i < codetabContents.length; i++) { ids = ids.concat(codetabContents[i].getAttribute('id')); codetabContents[i].style.display = 'none'; if (0 === parseInt(i, 10) && !codetabContents[i].classList.contains('active')) { codetabContents[i].classList.add('active'); } } for (var i = 0; i < codetabLinks.length; i++) { codetabLinks[i].setAttribute('id', ids[i]); if (0 === parseInt(i, 10) && !codetabLinks[i].classList.contains('active')) { codetabLinks[i].classList.add('active'); } else { codetabLinks[i].classList.remove('active'); } } if (codetabContents.length > 0) { codetabContents[0].style.display = 'block'; } </script> <h2 id="tabs-for-general-purpose">Tabs for general purpose</h2> <div id="aa0fbded47261234" class="tab"> <div class="tab__links"> <button class="tab__link" aria-label="Tab link">Windows</button> <button class="tab__link" aria-label="Tab link">MacOS</button> <button class="tab__link" aria-label="Tab link">Ubuntu</button> </div> <div id="856df9eb3ec9f916" class="tab__content"> <h3 id="windows-section">Windows section</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Hello World!&#39;</span><span class="p">);</span> </span></span></code></pre></td></tr></table> </div> </div><p>⚠️Becareful that the content in the tab should be different from each other. The tab makes unique id hashes depending on the tab contents. So, If you just copy-paste the tabs with multiple times, since it has the same contents, the tab will not work.</p> wisely shortcode map[categories:[map[image:images/feature3/code-file.png]]]