diff --git a/doc/how_to/custom_components/esm/custom_layout.md b/doc/how_to/custom_components/esm/custom_layout.md
index ea752b4f21..bc88360f70 100644
--- a/doc/how_to/custom_components/esm/custom_layout.md
+++ b/doc/how_to/custom_components/esm/custom_layout.md
@@ -9,7 +9,6 @@ This example will show you how to create a *split* layout containing two objects
 ::::{tab-set}
 
 :::{tab-item} `JSComponent`
-
 ```{pyodide}
 import panel as pn
 
@@ -88,11 +87,9 @@ split_js = SplitJS(
 )
 split_js.servable()
 ```
-
 :::
 
 :::{tab-item} `ReactComponent`
-
 ```{pyodide}
 import panel as pn
 
@@ -162,11 +159,9 @@ split_react = SplitReact(
 )
 split_react.servable()
 ```
-
 :::
 
 :::{tab-item} `AnyWidgetComponent`
-
 ```{pyodide}
 import panel as pn
 
@@ -261,25 +256,20 @@ Let's verify that the layout will automatically update when the `object` is chan
 ```{pyodide}
 split_js.right=pn.pane.Markdown("Hi. I'm a `Markdown` pane replacing the `CodeEditor` widget!", sizing_mode="stretch_both")
 ```
-
 :::
 
 :::{tab-item} `ReactComponent`
-
 ```{pyodide}
 split_react.right=pn.pane.Markdown("Hi. I'm a `Markdown` pane replacing the `CodeEditor` widget!", sizing_mode="stretch_both")
 ```
-
 :::
 
 :::
 
 :::{tab-item} `AnyWidgetComponent`
-
 ```{pyodide}
 split_anywidget.right=pn.pane.Markdown("Hi. I'm a `Markdown` pane replacing the `CodeEditor` widget!", sizing_mode="stretch_both")
 ```
-
 :::
 
 ::::
@@ -289,7 +279,6 @@ Now, let's change it back:
 ::::{tab-set}
 
 :::{tab-item} `JSComponent`
-
 ```{pyodide}
 split_js.right=pn.widgets.CodeEditor(
     value="Right",
@@ -299,11 +288,9 @@ split_js.right=pn.widgets.CodeEditor(
     language="python",
 )
 ```
-
 :::
 
 :::{tab-item} `ReactComponent`
-
 ```{pyodide}
 split_react.right=pn.widgets.CodeEditor(
     value="Right",
@@ -313,11 +300,9 @@ split_react.right=pn.widgets.CodeEditor(
     language="python",
 )
 ```
-
 :::
 
 :::{tab-item} `AnyWidgetComponent`
-
 ```{pyodide}
 split_anywidget.right=pn.widgets.CodeEditor(
     value="Right",
@@ -327,7 +312,6 @@ split_anywidget.right=pn.widgets.CodeEditor(
     language="python",
 )
 ```
-
 :::
 
 ::::
@@ -339,7 +323,6 @@ A Panel `Column` or `Row` works as a list of objects. It is *list-like*. In this
 ::::{tab-set}
 
 :::{tab-item} `JSComponent`
-
 ```{pyodide}
 import panel as pn
 import param
@@ -416,7 +399,6 @@ You must list `ListLike, JSComponent` in exactly that order when you define the
 :::
 
 :::{tab-item} `ReactComponent`
-
 ```{pyodide}
 import panel as pn
 import param
@@ -483,11 +465,9 @@ grid_react.servable()
 ```
 
 You must list `ListLike, ReactComponent` in exactly that order when you define the class! Reversing the order to `ReactComponent, ListLike` will not work.
-
 :::
 
 :::{tab-item} `AnyWidgetComponent`
-
 ```{pyodide}
 import panel as pn
 import param
@@ -572,7 +552,6 @@ You can now use `[...]` indexing and methods like `.append`, `.insert`, `pop`, e
 ::::{tab-set}
 
 :::{tab-item} `JSComponent`
-
 ```{pyodide}
 grid_js.append(
     pn.widgets.CodeEditor(
@@ -582,11 +561,9 @@ grid_js.append(
     )
 )
 ```
-
 :::
 
 :::{tab-item} `ReactComponent`
-
 ```{pyodide}
 grid_react.append(
     pn.widgets.CodeEditor(
@@ -596,11 +573,9 @@ grid_react.append(
     )
 )
 ```
-
 :::
 
 :::{tab-item} `AnyWidgetComponent`
-
 ```{pyodide}
 grid_anywidget.append(
     pn.widgets.CodeEditor(
@@ -610,7 +585,6 @@ grid_anywidget.append(
     )
 )
 ```
-
 :::
 
 ::::
@@ -620,27 +594,21 @@ Let's remove it again:
 ::::{tab-set}
 
 :::{tab-item} `JSComponent`
-
 ```{pyodide}
 grid_js.pop(-1)
 ```
-
 :::
 
 :::{tab-item} `ReactComponent`
-
 ```{pyodide}
 grid_react.pop(-1)
 ```
-
 :::
 
 :::{tab-item} `AnyWidgetComponent`
-
 ```{pyodide}
 grid_anywidget.pop(-1)
 ```
-
 :::
 
 ::::