finished example

Author: EmilHvitfeldt

example.ipynb

@@ -1,65 +1,149 @@
 ---
 title: "codewindow Example"
 format:
-  revealjs: default
+  revealjs: 
+    footer: <https://github.com/emilhvitfeldt/quarto-revealjs-codewindow>
 revealjs-plugins:
   - codewindow
 echo: true
 code-line-numbers: false
+knitr: true
 ---
 
-## In the morning
+## Basic usage
+
+Everything starts with wrapping a codeblock with `.codewindow` fenced div. So
+
+````` markdown
+::: {.codewindow}
+```{{scss}}
+.pink {
+  color: pink;
+}
+```
+:::
+`````
+
+becomes
 
 ::: {.codewindow}
+
 ```{scss}
 .pink {
   color: pink;
 }
 ```
 :::
 
-my friend
+## file name on file tab
 
-::: {.codewindow .sass}
+THe file name can be specified by writing the name as plain text inside the `codewindow` div. So
+
+````` markdown
+::: {.codewindow}
+styles.scss
+```{{scss}}
+.pink {
+  color: pink;
+}
+```
+:::
+`````
+
+becomes
+
+::: {.codewindow}
+styles.scss
 ```{scss}
 .pink {
   color: pink;
 }
 ```
 :::
 
-::: {.codewindow width="50%"}
+## File icon
+
+Adding a css class to the `.codewindow` div will add icon if supported. so 
+
+````` markdown
+::: {.codewindow .sass}
+styles.scss
+```{{scss}}
+.pink {
+  color: pink;
+}
+```
+:::
+`````
+
+becomes
+
+::: {.codewindow .sass}
+styles.scss
 ```{scss}
 .pink {
   color: pink;
 }
 ```
 :::
 
+## Setting width
 
-## Getting up
+The `width` argument is natively supported, so the width can be set like so:
 
-- Turn off alarm
-- Get out of bed
+````` markdown
+::: {.codewindow .sass width="350px"}
+styles.scss
+```{{scss}}
+.pink {
+  color: pink;
+}
+```
+:::
+`````
 
-## Breakfast
+becomes
 
-- Eat eggs
-- Drink coffee
+::: {.codewindow .sass width="350px"}
+styles.scss
+```{scss}
+.pink {
+  color: pink;
+}
+```
+:::
 
-# In the evening
+## Additional notes
 
-## Dinner
+These divs should work like any other divs. So you can pass in other styles with `styles=""` and use [absolute position](https://quarto.org/docs/presentations/revealjs/advanced.html#absolute-position)
 
-- Eat spaghetti
-- Drink wine
+See next slide for examples
 
-## Going to sleep
+## Additional notes
 
-- Get in bed
-- Count sheep
+::: {.codewindow .sass .absolute top="70%" left="35%" width="350px"}
+styles.scss
+```{scss}
+.pink {
+  color: pink;
+}
+```
+:::
 
-```{r}
-1 + 1
+::: {.codewindow .sass .absolute top="35%" left="10%" width="350px" style="transform: rotate(-15deg);"}
+styles.scss
+```{scss}
+.yellow {
+  color: yellow;
+}
 ```
+:::
 
+::: {.codewindow .sass .absolute top="35%" left="60%" width="350px" style="transform: rotate(15deg);"}
+styles.scss
+```{scss}
+.blue {
+  color: blue;
+}
+```
+:::