Use plugin to render content in two columns: Before-and-after transition Action and its result Input and output Result comparison columns

To define two columns layout use fenced code block and and labels this content goes to the left and can span multiple lines this content goes to the right and can span multiple lines left: right: ```columns left: this content goes to the left and can span multiple lines right: this content goes to the right and can span multiple lines ```

To define three columns layout use fenced code block and , and labels Pros Item One Undecided Item Two Item Three Cons Item Four left: middle: right: ```columns left: ### Pros {style: "api"} * Item One middle: ### Undecided {style: "api"} * Item Two * Item Three right: ### Cons {style: "api"} * Item Four ```

Size can be specified for a column as a . By default, both portions are assigned a value of . If you specify right column to be , then left will be left as by default, leaving right side to be roughly 33% in size. http.get("/weather") { temperature.shouldBe < 100 } http.doc.capture("weather-example") portion 10 portion 5 10 ```columns {right: {portion: 5}} left: :include-groovy: org/testingisdocumenting/testing/examples/restapi/WebTauRestAPIGroovyTest.groovy { title: "WebTau REST API test example", entry: "weather", bodyOnly: true } right: :include-json: weather-example/response.json { title: "weather response example", highlightValueFile: "weather-example/paths.json" } ```

Use to add a border separator between columns Before Hello World After World Of Hellos border ```columns {border: true} left: **Before** Hello World right: **After** World Of Hellos ```

Use to change a column content alignment. Before Hello World After World Of Hellos align ```columns {border: true, left: {align: "right"}} left: **Before** Hello World right: **After** World Of Hellos ```

In Presentation Mode each column content will appear on slide transition