From 77230b35788308dc7882356d69c375f63fb8e0f4 Mon Sep 17 00:00:00 2001
From: Jo Stichbury <jo_stichbury@mckinsey.com>
Date: Wed, 7 Aug 2024 16:55:38 +0100
Subject: [PATCH] Update filters.md

---
 vizro-core/docs/pages/user-guides/filters.md | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/vizro-core/docs/pages/user-guides/filters.md b/vizro-core/docs/pages/user-guides/filters.md
index 7a904e813..fe3a4f993 100644
--- a/vizro-core/docs/pages/user-guides/filters.md
+++ b/vizro-core/docs/pages/user-guides/filters.md
@@ -18,7 +18,7 @@ automatically based on the target column, for example, a dropdown for categorica
 
 !!! example "Basic Filter"
     === "app.py"
-        ```py
+        ```{.python pycafe-link}
         from vizro import Vizro
         import vizro.plotly.express as px
         import vizro.models as vm
@@ -58,6 +58,7 @@ automatically based on the target column, for example, a dropdown for categorica
             title: My first page
         ```
     === "Result"
+        
         [![Filter]][Filter]
 
     [Filter]: ../../assets/user_guides/control/control1.png
@@ -69,7 +70,7 @@ Currently available selectors are [`Checklist`][vizro.models.Checklist], [`Dropd
 
 !!! example "Filter with custom Selector"
     === "app.py"
-        ```py
+        ```{.python pycafe-link}
         from vizro import Vizro
         import vizro.plotly.express as px
         import vizro.models as vm
@@ -110,6 +111,7 @@ Currently available selectors are [`Checklist`][vizro.models.Checklist], [`Dropd
             title: My first page
         ```
     === "Result"
+        
         [![Selector]][Selector]
 
     [Selector]: ../../assets/user_guides/control/control2.png
@@ -126,7 +128,7 @@ Below is an advanced example where we only target one page component, and where
 
 !!! example "Advanced Filter"
     === "app.py"
-        ```py
+        ```{.python pycafe-link}
         from vizro import Vizro
         import vizro.plotly.express as px
         import vizro.models as vm
@@ -181,6 +183,7 @@ Below is an advanced example where we only target one page component, and where
             title: My first page
         ```
     === "Result"
+        
         [![Advanced]][Advanced]
 
     [Advanced]: ../../assets/user_guides/control/control3.png