Template:codetabs

From IndieWeb

This is a (currently experimental) way of showing code snippets with tabs to switch between different formats

How to use

It's not pretty but you can create up to 9 tabs with a title and content. The content field seems to work with any wiki formatting you want.

This example shows how to render html, show html markup and show json markup

{{codetabs
|tab-1-title=Rendered HTML
|tab-1-content=<raw><div>
  <p>example html markup</p>
</div>
</raw>
|tab-2-title=HTML Markup
|tab-2-content=<pre><nowiki>
<div>
  <p>example html markup</p>
</div>
</nowiki></pre>
|tab-3-title=JSON
|tab-3-content=<raw>
  {
    "json": "example"
  }
</raw>
}}

Which results in


Rendered HTML

example html markup

HTML Markup

<div>
  <p>example html markup</p>
</div>

JSON

 {
   "json": "example"
 }