site

personal website, served at mordaunt.dev/site
Log | Files | Refs

html-and-css-only-tabs.md (2001B)

      1 +++
      2 authors = ["Lone Coder"]
      3 title = "HTML and CSS only tabs"
      4 date = "2023-07-09"
      5 description = "Sample article showcasing shortcodes for HTML/CSS only tabs"
      6 tags = [
      7     "hugo",
      8     "markdown",
      9     "css",
     10     "html",
     11     "shortcodes",
     12 ]
     13 categories = [
     14     "theme demo",
     15     "syntax",
     16 ]
     17 series = ["Theme Demo"]
     18 aliases = ["migrate-from-jekyl"]
     19 +++
     20 
     21 ## Shortcodes
     22 
     23 The following content:
     24 
     25 ```markdown
     26 {{</* tabgroup */>}}
     27 {{</* tab name="Hello" */>}}
     28 Hello World!
     29 {{</* /tab */>}}
     30 
     31 {{</* tab name="Goodbye" */>}}
     32 Goodbye Everybody!
     33 {{</* /tab */>}}
     34 {{</* /tabgroup */>}}
     35 ```
     36 
     37 Will generate:
     38 
     39 {{< tabgroup >}}
     40 {{< tab name="Hello" >}}
     41 Hello World!
     42 {{< /tab >}}
     43 
     44 {{< tab name="Goodbye" >}}
     45 Goodbye Everybody!
     46 {{< /tab >}}
     47 {{< /tabgroup >}}
     48 
     49 ## Right alignment
     50 
     51 You can also align the tabs to the right:
     52 
     53 ```markdown
     54 {{</* tabgroup align="right" */>}}
     55 {{</* tab name="Hello" */>}}
     56 Hello World!
     57 {{</* /tab */>}}
     58 
     59 {{</* tab name="Goodbye" */>}}
     60 Goodbye Everybody!
     61 {{</* /tab */>}}
     62 {{</* /tabgroup */>}}
     63 ```
     64 
     65 Giving you this look:
     66 
     67 {{< tabgroup align="right" >}}
     68 {{< tab name="Hello" >}}
     69 Hello World!
     70 {{< /tab >}}
     71 
     72 {{< tab name="Goodbye" >}}
     73 Goodbye Everybody!
     74 {{< /tab >}}
     75 {{< /tabgroup >}}
     76 
     77 ## Markdown content
     78 
     79 Any valid markdown can be used inside the tab:
     80 
     81 ````markdown
     82 {{</* tabgroup align="right" style="code" */>}}
     83 {{</* tab name="Ruby" */>}}
     84 
     85 ```ruby
     86 puts 'Hello'
     87 ```
     88 
     89 {{</* /tab */>}}
     90 {{</* tab name="Python" */>}}
     91 
     92 ```python
     93 print('Hello')
     94 ```
     95 
     96 {{</* /tab */>}}
     97 {{</* tab name="JavaScript" */>}}
     98 
     99 ```js
    100 console.log("Hello");
    101 ```
    102 
    103 {{</* /tab */>}}
    104 {{</* /tabgroup */>}}
    105 ````
    106 
    107 And you get this lovely content:
    108 
    109 {{< tabgroup align="right" style="code" >}}
    110 {{< tab name="Ruby" >}}
    111 
    112 ```ruby
    113 puts 'Hello'
    114 ```
    115 
    116 {{< /tab >}}
    117 {{< tab name="Python" >}}
    118 
    119 ```python
    120 print('Hello')
    121 ```
    122 
    123 {{< /tab >}}
    124 {{< tab name="JavaScript" >}}
    125 
    126 ```js
    127 console.log("Hello");
    128 ```
    129 
    130 {{< /tab >}}
    131 {{< /tabgroup >}}
    132 
    133 In this case `style="code"` makes it look a little nicer for scenarios where
    134 your content is purely a code block.