From 80b0e81ae005f034887c22dd82feb1a63f200aa5 Mon Sep 17 00:00:00 2001
From: lizzy985 <lizzy.yang985@gmail.com>
Date: Sun, 12 Jan 2025 20:30:05 -0700
Subject: [PATCH] add__code_block_with_linkin_advanced_folder

---
 .../advanced/content/10-howto/10-multipage.md      |  5 +++--
 .../advanced/content/10-howto/20-layout.md         | 11 ++++++++---
 .../advanced/content/10-howto/30-testing.md        | 14 +++++++-------
 .../advanced/content/10-howto/31-debugging.md      |  2 +-
 .../content/10-howto/50-ipywidget_libraries.md     |  6 +++---
 .../advanced/content/15-reference/95-caching.md    |  2 +-
 .../content/20-understanding/06-ipyvuetify.md      |  2 +-
 .../content/20-understanding/12-reacton-basics.md  |  2 +-
 .../content/20-understanding/17-rules-of-hooks.md  |  8 ++++----
 .../content/20-understanding/18-containers.md      | 10 +++++-----
 .../content/20-understanding/40-routing.md         | 14 +++++++-------
 .../advanced/content/30-enterprise/10-oauth.md     |  2 +-
 12 files changed, 42 insertions(+), 36 deletions(-)

diff --git a/solara/website/pages/documentation/advanced/content/10-howto/10-multipage.md b/solara/website/pages/documentation/advanced/content/10-howto/10-multipage.md
index 747163c95..9bf484170 100644
--- a/solara/website/pages/documentation/advanced/content/10-howto/10-multipage.md
+++ b/solara/website/pages/documentation/advanced/content/10-howto/10-multipage.md
@@ -132,7 +132,7 @@ Go to http://localhost:8765 ([or click here](http://localhost:8765)), explore th
 
 If you want to setup a multipage app in a single script, you do not need to define a `Page` component, but you can define a list of routes.
 
-```python
+```{.python pycafe-link}
 import solara
 
 
@@ -170,7 +170,8 @@ Solara recognizes this and will pass all routes such as `/tabular/foo` and `/tab
 
 An example Page component could look like this:
 
-```python
+```{.python pycafe-link}
+import solara
 @solara.component
 def Page(name: str = "foo"):
     subpages = ["foo", "bar", "solara", "react-ipywidgets"]
diff --git a/solara/website/pages/documentation/advanced/content/10-howto/20-layout.md b/solara/website/pages/documentation/advanced/content/10-howto/20-layout.md
index 1d425b23c..f3b793899 100644
--- a/solara/website/pages/documentation/advanced/content/10-howto/20-layout.md
+++ b/solara/website/pages/documentation/advanced/content/10-howto/20-layout.md
@@ -61,7 +61,9 @@ You can define your own `Layout` component in the `__init__.py` file in the same
 
 
 For instance, putting the following `Layout` component in `__init__.py` will give you effectively the same [AppLayout](/documentation/components/layout/app_layout):
-```python
+
+```{.python pycafe-link}
+import solara
 @solara.component
 def Layout(children=[]):
     print("I get called before the Page component gets rendered")
@@ -72,7 +74,8 @@ def Layout(children=[]):
 ### No Layout
 If you do not want to have any layout, you can disable it using:
 
-```python
+```{.python pycafe-link}
+import solara
 @solara.component
 def Layout(children=[]):
     # there will only be 1 child, which is the Page()
@@ -86,7 +89,9 @@ This layout leaves every page responsible for creating its own header, footer, a
 
 In case you want to set up your own layout system, which sets up navigation as well, this example may get you started. It may help
 to [understand routing](/documentation/advanced/understanding/routing).
-```python
+
+```{.python pycafe-link}
+import solara
 @solara.component
 def Layout(children=[]):
     # Note that children being passed here for this example will be a Page() element.
diff --git a/solara/website/pages/documentation/advanced/content/10-howto/30-testing.md b/solara/website/pages/documentation/advanced/content/10-howto/30-testing.md
index b40b2f29f..454289b12 100644
--- a/solara/website/pages/documentation/advanced/content/10-howto/30-testing.md
+++ b/solara/website/pages/documentation/advanced/content/10-howto/30-testing.md
@@ -18,7 +18,7 @@ To get inspiration for writing tests that cover component logic and their intera
 
 The following example demonstrates how to test a simple Solara component using pytest:
 
-```python
+```{.python pycafe-link}
 import solara
 import ipyvuetify as v
 
@@ -60,7 +60,7 @@ pytest tests/unit/test_docs_no_browser_simple.py
 
 When widgets are embedded in a larger widget tree, it becomes cumbersome to find the widget you are looking for using `.children[0].children[1]...` etc. For this use case we can use the `rc.find` method to look for a particular widget. This API is inspired on the playwright API, and is a convenient way to find a widget in the widget tree.
 
-```python
+```{.python pycafe-link}
 import solara
 import ipyvuetify as v
 
@@ -112,7 +112,7 @@ as correlate the testing code back to the application code. Having unique meta_r
 
 When a [`solara.lab.task`](https://solara.dev/api/task) is executed, a new thread will spawn, which will likely update the UI somewhere in the future. We can wait for the UI to update using the `wait_for` method on the finder object. This method will poll the widget tree, waiting for the widget to appear. If the timeout is reached, the test will fail.
 
-```python
+```{.python pycafe-link}
 import solara
 import solara.lab
 import ipyvuetify as v
@@ -171,7 +171,7 @@ $ playwright install chromium
 
 The most convenient way to test a widget, is by including the `solara_test` fixture in your test function arguments. Here's an example:
 
-```python
+```{.python pycafe-link}
 import ipywidgets as widgets
 import playwright.sync_api
 from IPython.display import display
@@ -212,7 +212,7 @@ Python variable.
 
 The following example uses a polling technique to check if a state change happened on the Python side.
 
-```python
+```{.python pycafe-link}
 import ipywidgets as widgets
 import playwright.sync_api
 from IPython.display import display
@@ -256,7 +256,7 @@ Sometimes, state changes on the Python side emit an event that we can capture. I
 we can use a `concurrent.futures.Future` to block until the state change happens. This is a more
 efficient way to wait for a state change than polling.
 
-```python
+```{.python pycafe-link}
 import ipywidgets as widgets
 from concurrent.futures import Future
 import playwright.sync_api
@@ -310,7 +310,7 @@ def test_event_with_polling(solara_test, page_session: playwright.sync_api.Page)
 
 In case you want to test your component in the multiple Jupyter environments (e.g., Jupyter Notebook, Jupyter Lab, Voila, and Solara) to ensure it renders correctly, use the `ipywidgets_runner` fixture to run code snippets. Here's an example:
 
-```python
+```{.python pycafe-link}
 import ipywidgets as widgets
 import playwright.sync_api
 from IPython.display import display
diff --git a/solara/website/pages/documentation/advanced/content/10-howto/31-debugging.md b/solara/website/pages/documentation/advanced/content/10-howto/31-debugging.md
index d0339fcb2..9b7c907f5 100644
--- a/solara/website/pages/documentation/advanced/content/10-howto/31-debugging.md
+++ b/solara/website/pages/documentation/advanced/content/10-howto/31-debugging.md
@@ -10,7 +10,7 @@ You can use the [python debugger](https://docs.python.org/3/library/pdb.html) to
 
 Simply add `breakpoint()` to your code, and trigger the code, and you will enter the debugger.
 
-```python
+```{.python pycafe-link}
 import solara
 
 clicks = solara.reactive(0)
diff --git a/solara/website/pages/documentation/advanced/content/10-howto/50-ipywidget_libraries.md b/solara/website/pages/documentation/advanced/content/10-howto/50-ipywidget_libraries.md
index d9b6e37f5..57684cbdb 100644
--- a/solara/website/pages/documentation/advanced/content/10-howto/50-ipywidget_libraries.md
+++ b/solara/website/pages/documentation/advanced/content/10-howto/50-ipywidget_libraries.md
@@ -8,7 +8,7 @@ Solara can work with any ipywidget library, such as [ipyleaflet](https://github.
 
 After `solara` is imported, every widget class has an extra `.element(...)` method added to itself. This allows us to create elements for all existing widgets. For example using regular ipywidgets:
 
-```python
+```{.python pycafe-link}
 import ipywidgets
 button_element = ipywidgets.Button.element(description="Click me")
 ```
@@ -17,7 +17,7 @@ button_element = ipywidgets.Button.element(description="Click me")
 
 For instance, if we want to use ipyleaflet using the classical ipywidget API, we can do:
 
-```python
+```{.python pycafe-link}
 import ipyleaflet
 
 map = ipyleaflet.Map(center=(52, 10), zoom=8)
@@ -32,7 +32,7 @@ However, how do we add the marker to the map? The map element object does not ha
 anymore. Instead, we need to pass the marker to the layers argument. That, however, introduces a new problem. Ipyleaflet by default adds a layer to the map when it is created, and the `add_layer` adds the second layer. We now need to manually add the map layer ourselves.
 
 Putting this together.
-```solara
+```{.python pycafe-link}
 import ipyleaflet
 import solara
 
diff --git a/solara/website/pages/documentation/advanced/content/15-reference/95-caching.md b/solara/website/pages/documentation/advanced/content/15-reference/95-caching.md
index 2a6f666c4..164d644a7 100644
--- a/solara/website/pages/documentation/advanced/content/15-reference/95-caching.md
+++ b/solara/website/pages/documentation/advanced/content/15-reference/95-caching.md
@@ -127,7 +127,7 @@ $ export SOLARA_CACHE=redis
 
 We can chain a few caches to get a multilevel cache. This allows us to get the benefits of the low latency memory cache while sharing it with other workers and nodes.
 
-```python
+```{.python pycafe-link}
 import solara
 solara.cache.configure("memory,disk,redis")
 # or more explicit
diff --git a/solara/website/pages/documentation/advanced/content/20-understanding/06-ipyvuetify.md b/solara/website/pages/documentation/advanced/content/20-understanding/06-ipyvuetify.md
index 25d528d51..a627b1d48 100644
--- a/solara/website/pages/documentation/advanced/content/20-understanding/06-ipyvuetify.md
+++ b/solara/website/pages/documentation/advanced/content/20-understanding/06-ipyvuetify.md
@@ -18,7 +18,7 @@ material design based widgets.
 We consider ipyvuetify one of the most essential ipywidget libraries, and that is the reason why [Reacton](/documentation/advanced/understanding/reacton) ships with
 generated ipyvuetify components to make your app type safe.
 
-```solara
+```{.python pycafe-link}
 
 import solara
 # rv is the reacton-ipyvuetify wrapper for Reacton/Solara
diff --git a/solara/website/pages/documentation/advanced/content/20-understanding/12-reacton-basics.md b/solara/website/pages/documentation/advanced/content/20-understanding/12-reacton-basics.md
index f3ebf2c95..62633878e 100644
--- a/solara/website/pages/documentation/advanced/content/20-understanding/12-reacton-basics.md
+++ b/solara/website/pages/documentation/advanced/content/20-understanding/12-reacton-basics.md
@@ -8,7 +8,7 @@ description: Using your favorite component, we try to understand better how it w
 Let us take our favorite component, and try to understand a bit better how it works to improve your understanding of Reacton and thus how to use Solara.
 
 
-```solara
+```{.python pycafe-link}
 import solara
 
 
diff --git a/solara/website/pages/documentation/advanced/content/20-understanding/17-rules-of-hooks.md b/solara/website/pages/documentation/advanced/content/20-understanding/17-rules-of-hooks.md
index 3da314916..7cdfdbc78 100644
--- a/solara/website/pages/documentation/advanced/content/20-understanding/17-rules-of-hooks.md
+++ b/solara/website/pages/documentation/advanced/content/20-understanding/17-rules-of-hooks.md
@@ -9,7 +9,7 @@ Hooks are Python function whose name start with `use_`. The most used hook is [u
 Hooks can only be called at the top level of a function component or a custom hook. They cannot be called inside loops, conditions, or nested functions.
 The reason for this is that hooks rely on the order in which they are called to maintain state between renders. If a hook is called conditionally, it may not be called on every render, which can mix up the states.
 
-```python
+```{.python pycafe-link}
 import solara
 
 
@@ -30,7 +30,7 @@ The rules of hooks are checked by Solara, if you break the rules, you will get a
 
 ## Example
 
-```python
+```{.python pycafe-link}
 import solara
 
 
@@ -53,7 +53,7 @@ Make sure you understand the consequences of this, by reading about the rules of
 
 As the warning suggests, you can suppress the warning by adding `# noqa: SH103` to the line that breaks the rules.
 
-```python
+```{.python pycafe-link}
 import solara
 
 
@@ -67,7 +67,7 @@ def Page():
 
 The warning can also be suppressed for the whole component by adding `# noqa: SH103` to the function definition.
 
-```python
+```{.python pycafe-link}
 import solara
 
 
diff --git a/solara/website/pages/documentation/advanced/content/20-understanding/18-containers.md b/solara/website/pages/documentation/advanced/content/20-understanding/18-containers.md
index 247270ac6..8ae564b15 100644
--- a/solara/website/pages/documentation/advanced/content/20-understanding/18-containers.md
+++ b/solara/website/pages/documentation/advanced/content/20-understanding/18-containers.md
@@ -9,7 +9,7 @@ description: Solara allows for using python with statements to populate your UIs
 ## Introduction
 Some components, such as our favorite `ClickButton` only add logic on top of an existing component:
 
-```solara
+```{.python pycafe-link}
 import solara
 
 
@@ -30,7 +30,7 @@ Page = ClickButton
 ## Containers with children
 However, more sophisticated components will add multiple components together into a container component, let's take a look at an example.
 
-```solara
+```{.python pycafe-link}
 import solara
 
 
@@ -64,7 +64,7 @@ Here we use an [HBox](/documentation/components/layout/hbox) to lay out two chil
 
 Because using container components is so common, we created a more convenient way to pass children to components and made your code look neater and more structured as well (avoiding nested lists).
 
-```solara
+```{.python pycafe-link}
 import solara
 
 
@@ -112,7 +112,7 @@ All Reacton or Solara components return elements that can be used as context man
 Adding children using context managers work at any level, you can nest Rows and Columns [or any other containers](/api#components).
 
 
-```solara
+```{.python pycafe-link}
 import solara
 
 
@@ -148,7 +148,7 @@ a [Column](/documentation/components/layout/column). The only benefit of returni
 which can be useful for testing purposes. Users should probably never return an element, but use the automatic
 container feature.
 
-```solara
+```{.python pycafe-link}
 import solara
 
 
diff --git a/solara/website/pages/documentation/advanced/content/20-understanding/40-routing.md b/solara/website/pages/documentation/advanced/content/20-understanding/40-routing.md
index 9c3144465..34403e067 100644
--- a/solara/website/pages/documentation/advanced/content/20-understanding/40-routing.md
+++ b/solara/website/pages/documentation/advanced/content/20-understanding/40-routing.md
@@ -38,7 +38,7 @@ If no `Page` component is found in your main script or module, Solara will assum
 
 For example
 
-```python
+```{.python pycafe-link}
 import solara
 from solara.website.pages.examples.utilities import calculator
 
@@ -67,7 +67,7 @@ If you do define a `Page` component, you are fully responsible for how routing i
 
 An example route definition could be something like this:
 
-```python
+```{.python pycafe-link}
 import solara
 
 routes = [
@@ -121,7 +121,7 @@ Each call to `use_route` will return the current route (if there is a match to t
 
 Now the `MyFirstLevelChildComponent` component is responsible for rendering the second level navigation:
 
-```python
+```{.python pycafe-link}
 @solara.component
 def MyFirstLevelChildComponent():
     level = solara.use_route_level()  # returns 1
@@ -139,7 +139,7 @@ def MyFirstLevelChildComponent():
 
 And the `MySecondLevelChildComponent` component is responsible for rendering the third level navigation:
 
-```python
+```{.python pycafe-link}
 @solara.component
 def MySecondLevelChildComponent():
     level = solara.use_route_level()  # returns 2
@@ -170,7 +170,7 @@ Often, your render logic needs some extra data on what to display. For instance,
 which requires you to have a label, and know which component to add.
 For this purposed we added `label: str` and the `component' attributes, so you can defines routes likes:
 
-```python
+```{.python pycafe-link}
 routes = [
     solara.Route("/", component=Home, label="What is Solara ☀️?"),
     solara.Route("docs", component=docs.App, label="Docs", children=docs.routes),
@@ -207,7 +207,7 @@ def resolve_path(path_or_route: Union[str, solara.Route], level=0) -> str:
 
 We can pass this full URL to the [`solara.Link`](/documentation/components/advanced/link) component, e.g. like:
 
-```python
+```{.python pycafe-link}
 @solara.component
 def LinkToIpywidgets():
     route_ipywidgets = routes.children[1].children[0].children[1]
@@ -239,7 +239,7 @@ html {
 
 If you want to do routing fully manually, you can use the [`solara.use_router`](/documentation/api/routing/use_router) hook, and use the `.path` attribute.
 
-```python
+```{.python pycafe-link}
 import solara
 
 
diff --git a/solara/website/pages/documentation/advanced/content/30-enterprise/10-oauth.md b/solara/website/pages/documentation/advanced/content/30-enterprise/10-oauth.md
index 2e5c9c9bb..7d5d208df 100644
--- a/solara/website/pages/documentation/advanced/content/30-enterprise/10-oauth.md
+++ b/solara/website/pages/documentation/advanced/content/30-enterprise/10-oauth.md
@@ -37,7 +37,7 @@ In application controlled mode, the application is responsible for checking if a
 
 Here's an example of how to implement OAuth in application controlled mode:
 
-```solara
+```{.python pycafe-link}
 import solara
 from solara_enterprise import auth