How to implement tabs for code

The prebid documentation uses bootstrap for styling. Bootstrap offers a tab component.

Example

fun main() { val name = “stranger” // Declare your first variable println(“Hi, $name!”) // …and use it! print(“Current count:”) for (i in 0..10) { // Loop over a range from 0 to 10 print(“ $i”) } }

struct Player { var name: String var highScore: Int = 0 var history: [Int] = []

init(_ name: String) { self.name = name } }

var player = Player(“Tomas”)

The code you need to for this looks like this

<!-- storing the code inside a variable makes it a lot more readable -->
{% capture iosCode %}struct Player {
    var name: String
    var highScore: Int = 0
    var history: [Int] = []

    init(_ name: String) {
        self.name = name
    }
}

var player = Player("Tomas")
{% endcapture %}

{% capture androidCode %}fun main() {
    val name = "stranger"        // Declare your first variable
    println("Hi, $name!")        // ...and use it!
    print("Current count:")
    for (i in 0..10) {           // Loop over a range from 0 to 10
        print(" $i")
    }
}
{% endcapture %}

<!-- include the code example -->
{% include code/mobile-sdk.html id="hello-world" kotlin=androidCode swift=iosCode %}

There are few things to understand here

  1. The include directive requires a unique id for the page. Otherwise the tabs won’t work properly
  2. Capturing the code into a variable makes everything a lot more readable

More information