Update to include dynamic running of code

README.md

@@ -27,27 +27,27 @@ filters:
   - tabby
 ```
 
-### Basic Example
+### Automatic Tabsets
 
 Create a tabset by wrapping code blocks in a div with the `tabby` class:
 
 ````markdown
 ::: {.tabby}
-```python
+```{python}
 print("Hello, World!")
 ```
 
 ```javascript
 console.log("Hello, World!");
 ```
 
-```r
+```{r}
 print("Hello, World!")
 ```
 :::
 ````
 
-This will automatically create a tabset with three tabs: "Python", "Javascript", and "R", each containing the respective code.
+This will automatically create a tabset with three tabs: "Python", "Javascript", and "R", each containing the respective code and, where applicable, its output.
 
 ### Default Tab Selection
 

docs/index.qmd

@@ -36,15 +36,15 @@ Create a tabset by wrapping code blocks in a div with the `tabby` class:
 
 ````markdown
 ::: {.tabby}
-```python
+```{{python}}
 print("Hello, World!")
 ```
 
 ```javascript
 console.log("Hello, World!");
 ```
 
-```r
+```{{r}}
 print("Hello, World!")
 ```
 :::
@@ -53,15 +53,15 @@ print("Hello, World!")
 This will automatically create a tabset with three tabs: "Python", "Javascript", and "R", each containing the respective code.
 
 ::: {.tabby}
-```python
+```{python}
 print("Hello, World!")
 ```
 
 ```javascript
 console.log("Hello, World!");
 ```
 
-```r
+```{r}
 print("Hello, World!")
 ```
 :::

docs/qtabby-example.qmd

@@ -209,11 +209,131 @@ console.log("Hello from JavaScript!");
 ```
 :::
 
+## Code Execution with Results
+
+Tabby also supports code execution with results. Here's an example that generates random data and calculates summary statistics:
+
+<details>
+<summary>Source (Click to Expand)</summary>
+
+````markdown
+::: {.tabby}
+```{{python}}
+import numpy as np
+
+# Generate some random data
+data = np.random.normal(0, 1, 1000)
+
+# Calculate summary statistics
+mean = np.mean(data)
+std = np.std(data)
+
+print(f"Mean: {mean:.2f}")
+print(f"Standard Deviation: {std:.2f}")
+```
+
+```{{r}}
+#| echo: true
+#| output: true
+
+# Generate random data
+data <- rnorm(1000)
+
+# Calculate summary statistics
+cat("Mean:", mean(data), "\n")
+cat("Standard Deviation:", sd(data))
+```
+:::
+````
+</details>
+
+
+::: {.tabby}
+```{python}
+import numpy as np
+
+# Generate some random data
+data = np.random.normal(0, 1, 1000)
+
+# Calculate summary statistics
+mean = np.mean(data)
+std = np.std(data)
+
+print(f"Mean: {mean:.2f}")
+print(f"Standard Deviation: {std:.2f}")
+```
+
+```{r}
+#| echo: true
+#| output: true
+
+# Generate random data
+data <- rnorm(1000)
+
+# Calculate summary statistics
+cat("Mean:", mean(data), "\n")
+cat("Standard Deviation:", sd(data))
+```
+:::
+
+
+Code may also render figures. Here's an example that generates a distribution plot using Python and R:
+
+<details>
+<summary>Source (Click to Expand)</summary>
+````markdown
+::: {.tabby}
+```{{python}}
+#| label: fig-python
+#| fig-cap: "Distribution plot using Python"
+
+import matplotlib.pyplot as plt
+import seaborn as sns
+
+plt.figure(figsize=(8, 4))
+sns.histplot(data, bins=30)
+plt.title("Normal Distribution")
+plt.show()
+```
+
+```{{r}}
+#| label: fig-r
+#| fig-cap: "Distribution plot using R"
+
+hist(data, main="Normal Distribution", breaks=30)
+```
+:::
+````
+</details>
+
+::: {.tabby}
+```{python}
+#| label: fig-python
+#| fig-cap: "Distribution plot using Python"
+
+import matplotlib.pyplot as plt
+import seaborn as sns
+
+plt.figure(figsize=(8, 4))
+sns.histplot(data, bins=30)
+plt.title("Normal Distribution")
+plt.show()
+```
+
+```{r}
+#| label: fig-r
+#| fig-cap: "Distribution plot using R"
+
+hist(data, main="Normal Distribution", breaks=30)
+```
+:::
+
+
 # URL Parameters
 
 You can also specify the default tab via URL parameter:
-`?default-tab=Python` or `?default-tab=R`
+`?default-tab=python` or `?default-tab=r`
 
 Try it by clicking on the following link:
 
-<https://quarto.thecoatlessprofessor.com/tabby/qtabby-example.html?default-tab=Python>
+<https://quarto.thecoatlessprofessor.com/tabby/qtabby-example.html?default-tab=python>

docs/qtabby-faq.qmd

@@ -8,6 +8,17 @@ filters:
 
 Tabby is a Quarto extension that automatically creates tabsets for code blocks, allowing you to display multiple code snippets in different languages using a clean, tabbed interface. It leverages Quarto's Tabset API to provide a seamless experience for displaying multi-language code examples.
 
+## How do I install Tabby?
+
+You can install Tabby by running the following command in a Terminal open in your project directory:
+
+```bash
+quarto add coatless-quarto/tabby
+```
+
+This will install the extension under the `_extensions` subdirectory. If you're using version control, you will want to check in this directory.
+
+
 ## How do I use Tabby?
 
 To use Tabby, first add the filter to your document's YAML header or your project's `_quarto.yml` file:
@@ -43,6 +54,38 @@ console.log("Hello from JavaScript!");
 ```
 :::
 
+## Does Tabby support code output?
+
+Yes! Tabby preserves any code output generated by Quarto's execution engine. When you run code chunks that produce output, the results will appear below the code in their respective tabs. For example:
+
+````markdown
+::: {.tabby}
+```{{python}}
+import matplotlib.pyplot as plt
+plt.plot([1, 2, 3], [1, 2, 3])
+plt.show()
+```
+
+```{{r}}
+plot(1:3, 1:3)
+```
+:::
+````
+
+This will display a tabset with two tabs, one for Python and one for R, each showing a plot generated by the code:
+
+::: {.tabby}
+```{python}
+import matplotlib.pyplot as plt
+plt.plot([1, 2, 3], [1, 2, 3])
+plt.show()
+```
+
+```{r}
+plot(1:3, 1:3)
+```
+:::
+
 ## How are tab labels generated?
 
 Tab labels are automatically generated from the language identifier of each code block. The first letter is capitalized (e.g., "python" becomes "Python", "javascript" becomes "Javascript").