Fix side by side code boxes

Author: Perryvw

docs/advanced/compiler-annotations.md

@@ -17,7 +17,7 @@ This decorator removes an enumeration's name after compilation and only leaves i
 
 <SideBySide>
 
-```typescript
+```typescript title=input.ts
 declare enum MyEnum {
   MY_ENUM_MEMBER_A,
   MY_ENUM_MEMBER_B,
@@ -26,15 +26,15 @@ declare enum MyEnum {
 print(MyEnum.MY_ENUM_MEMBER_A);
 ```
 
-```lua
+```lua title=output.lua
 print(MyEnum.MY_ENUM_MEMBER_A)
 ```
 
 </SideBySide>
 
 <SideBySide>
 
-```typescript
+```typescript title=input.ts
 /** @compileMembersOnly */
 declare enum MyEnum {
   MY_ENUM_MEMBER_A,
@@ -44,7 +44,7 @@ declare enum MyEnum {
 print(MyEnum.MY_ENUM_MEMBER_A);
 ```
 
-```lua
+```lua title=output.lua
 print(MY_ENUM_MEMBER_A)
 ```
 
@@ -54,7 +54,7 @@ print(MY_ENUM_MEMBER_A)
 
 <SideBySide>
 
-```typescript
+```typescript title=input.ts
 enum MyEnum {
   MY_ENUM_MEMBER_A,
   MY_ENUM_MEMBER_B,
@@ -64,7 +64,7 @@ enum MyEnum {
 print(MyEnum.MY_ENUM_MEMBER_A);
 ```
 
-```lua
+```lua title=output.lua
 MyEnum = {}
 MyEnum.MY_ENUM_MEMBER_A = 0
 MyEnum.MY_ENUM_MEMBER_B = 1
@@ -77,7 +77,7 @@ print(MyEnum.MY_ENUM_MEMBER_A)
 
 <SideBySide>
 
-```typescript
+```typescript title=input.ts
 /** @compileMembersOnly */
 enum MyEnum {
   MY_ENUM_MEMBER_A,
@@ -88,7 +88,7 @@ enum MyEnum {
 print(MyEnum.MY_ENUM_MEMBER_A);
 ```
 
-```lua
+```lua title=output.lua
 MY_ENUM_MEMBER_A = 0
 MY_ENUM_MEMBER_B = 1
 MY_ENUM_MEMBER_C = "c"
@@ -108,30 +108,30 @@ Changes the way new instances of this class are made. Takes exactly one argument
 
 <SideBySide>
 
-```typescript
+```typescript title=input.ts
 declare class MyClass {
   constructor(x: number);
 }
 const inst = new MyClass(3);
 ```
 
-```lua
+```lua title=output.lua
 local inst = __TS__New(MyClass, 3)
 ```
 
 </SideBySide>
 
 <SideBySide>
 
-```typescript
+```typescript title=input.ts
 /** @customConstructor MyConstructor */
 declare class MyClass {
   constructor(x: number);
 }
 const inst = new MyClass(3);
 ```
 
-```lua
+```lua title=output.lua
 local inst = MyConstructor(3)
 ```
 
@@ -147,12 +147,12 @@ Prevents tstl from trying to resolve the module path. When importing this module
 
 <SideBySide>
 
-```typescript
+```typescript title=input.ts
 declare module "mymodule" {}
 import module from "mymodule";
 ```
 
-```lua
+```lua title=output.lua
 ...
 local module = require("src.mymodule");
 ```
@@ -161,13 +161,13 @@ local module = require("src.mymodule");
 
 <SideBySide>
 
-```typescript
+```typescript title=input.ts
 /** @noResolution */
 declare module "mymodule" {}
 import module from "mymodule";
 ```
 
-```lua
+```lua title=output.lua
 ...
 local module = require("mymodule");
 ```
@@ -186,7 +186,7 @@ When applied to a class or interface, this only affects the type's declared meth
 
 <SideBySide>
 
-```typescript
+```typescript title=input.ts
 declare interface NormalInterface {
   normalMethod(s: string): void;
 }
@@ -202,7 +202,7 @@ x.normalMethod("foo");
 y.noSelfMethod("bar");
 ```
 
-```lua
+```lua title=output.lua
 x:normalMethod("foo")
 y.noSelfMethod("bar")
 ```
@@ -215,7 +215,7 @@ When applied to a namespace, all functions declared within the namespace will tr
 
 <SideBySide>
 
-```typescript
+```typescript title=input.ts
 declare namespace NormalNS {
   function normalFunc(s: string): string;
 }
@@ -229,7 +229,7 @@ NormalNS.normalFunc("foo");
 NoSelfNS.noSelfFunc("bar");
 ```
 
-```lua
+```lua title=output.lua
 NormalNS:normalFunc("foo")
 NoSelfNS.noSelfFunc("bar")
 ```

docs/advanced/language-extensions.md

@@ -70,13 +70,13 @@ Example:
 <SideBySide>
 
 <!-- prettier-ignore -->
-```ts
+```ts title=input.ts
 for (const i of $range(1, 5)) {}
 for (const i of $range(1, 10, 2)) {}
 for (const i of $range(5, 1, -1)) {}
 ```
 
-```lua
+```lua title=output.lua
 for i = 1, 5 do end
 for i = 1, 10, 2 do end
 for i = 5, 1, -1 do end
@@ -92,15 +92,15 @@ For example, to declare and use a Lua function that returns an iterator for a se
 
 <SideBySide>
 
-```ts
+```ts title=input.ts
 declare function myIterator(): LuaIterable<string>;
 
 for (const s of myIterator()) {
   console.log(s);
 }
 ```
 
-```lua
+```lua title=output.lua
 for s in myIterator() do
   print(s)
 end
@@ -112,15 +112,15 @@ Some iterators return multiple values each iteration. To declare these, combine
 
 <SideBySide>
 
-```ts
+```ts title=input.ts
 declare function myIterator(): LuaIterable<LuaMultiReturn<[string, string]>>;
 
 for (const [a, b] of myIterator()) {
   console.log(a, b);
 }
 ```
 
-```lua
+```lua title=output.lua
 for a, b in myIterator() do
   print(a, b)
 end
@@ -154,7 +154,7 @@ Some types can be iterated with `pairs()` (for example, if the `__pairs` method
 
 <SideBySide>
 
-```ts
+```ts title=input.ts
 interface MyType extends LuaPairsIterable<number, string> {}
 declare const obj: MyType;
 
@@ -163,7 +163,7 @@ for (const [key, value] of obj) {
 }
 ```
 
-```lua
+```lua title=output.lua
 for key, value in pairs(obj) do
   print(key, value)
 end
@@ -175,7 +175,7 @@ Or, if you only care about the key values, you can use `LuaPairsKeyIterable`:
 
 <SideBySide>
 
-```ts
+```ts title=input.ts
 interface MyType extends LuaPairsKeyIterable<number> {}
 declare const obj: MyType;
 
@@ -184,7 +184,7 @@ for (const key of obj) {
 }
 ```
 
-```lua
+```lua title=output.lua
 for key in pairs(obj) do
   print(key)
 end
@@ -298,7 +298,7 @@ Example:
 
 <SideBySide>
 
-```ts
+```ts title=input.ts
 const tbl = new LuaTable();
 
 tbl.set("foo", "bar");
@@ -312,7 +312,7 @@ tbl.set(1, "bah");
 console.log(tbl.length());
 ```
 
-```lua
+```lua title=output.lua
 tbl = {}
 
 tbl.foo = "bar"
@@ -334,7 +334,7 @@ To iterate over a `LuaTable`, use `for...of`. This will generate a `for...in` st
 
 <SideBySide>
 
-```ts
+```ts title=input.ts
 const tbl = new LuaTable<number, string>();
 
 tbl.set(3, "bar");
@@ -347,7 +347,7 @@ for (const [key, value] of tbl) {
 }
 ```
 
-```lua
+```lua title=output.lua
 tbl = {}
 
 tbl[3] = "bar"
@@ -406,7 +406,7 @@ Example:
 
 <SideBySide>
 
-```ts
+```ts title=input.ts
 interface Id {
   idStr: string;
 }
@@ -422,7 +422,7 @@ dict.set(id, "bar");
 console.log(dict.get(id));
 ```
 
-```lua
+```lua title=output.lua
 id = {idStr = "foo"}
 dict[id] = "bar"
 print(dict[id])
@@ -473,25 +473,25 @@ Example:
 
 <SideBySide>
 
-```ts
+```typescript title=input.ts
 console.log(...$vararg);
 ```
 
-```lua
+```lua title=output.lua
 print(...)
 ```
 
 </SideBySide>
 
-When run:
+When executing the above output lua with CLI arguments:
 
 <SideBySide>
 
-```
+```plaintext title=cli
 > lua myscript.lua foo bar
 ```
 
-```
+```plaintext title=stdout
 foo     bar
 ```