feat(quarto_features): working on page

Author: amyheather

pages/quarto_features.qmd

@@ -1,7 +1,14 @@
 ---
 title: Quarto features
+bibliography: quarto_features/references.bib
 ---
 
+In the last page, you worked with Markdown, which is a simple way to format text that works in lots of tools. Quarto lets you keep using that same Markdown, but it also adds extra features on top.
+
+Behind the scenes, Quarto uses a program called Pandoc. Pandoc takes your Markdown and converts it into many different formats (for example, HTML, PDF, Word, or slides). On top of Pandoc, Quarto adds its own features and settings (for example, callouts, columns, citations, and cross‑references) that you control from a single `.qmd` file.
+
+This page gives a quick tour of some of those "Quarto extras" that go beyond plain Markdown.
+
 ## Callouts
 
 Quarto extends Markdown with **callouts**, which are highlighted boxes you can use for notes, tips, or warnings.
@@ -139,7 +146,7 @@ You can also set the callout to collapse:
 
 :::: {.column width=60%}
 
-```
+```markdown
 ::: {.callout-note title="More details" collapse="true"}
 This extra information is hidden until you click the arrow.
 :::
@@ -229,7 +236,7 @@ Default callout with icon removed
 
 ::: {.pale-blue}
 
-**Task:** In `markdown.qmd`:
+**Task:** In `quarto_features.qmd`:
 
 * [ ] Add a callout of type `tip` with a short title (e.g., "Helpful tip").
 * [ ] Inside the callout, write one sentence of advice (e.g., "Take short breaks when you are concentrating.").
@@ -238,3 +245,342 @@ Default callout with icon removed
 :::
 
 ## Columns
+
+You can create columns using the same `::: ... :::` fenced blocks, with a `.columns` container and one or more `.column` blocks inside.
+
+For example:
+
+```markdown
+:::: {.columns}
+
+::: {.column}
+![](/images/south_cloisters.jpg){fig-alt="Photograph of South Cloisters"}
+:::
+
+::: {.column}
+**South Cloisters**, University of Exeter, St Luke's Campus, Heavitree Road, Exeter EX1 2LU
+:::
+
+::::
+```
+
+:::: {.columns}
+
+::: {.column}
+
+![](/images/south_cloisters.jpg){fig-alt="Photograph of South Cloisters"}
+
+:::
+
+::: {.column}
+
+**South Cloisters**, University of Exeter, St Luke's Campus, Heavitree Road, Exeter EX1 2LU
+
+:::
+
+::::
+
+By default, columns share the space equally. You can control their width by adding `width=` percentages to each column. For example:
+
+```markdown
+:::: {.columns}
+
+::: {.column width=60%}
+:::
+
+::: {.column width=5%}
+:::
+
+::: {.column width=35%}
+:::
+
+::::
+```
+
+::: {.pale-blue}
+
+**Task:** In `quarto_features.qmd`:
+
+* [ ] Create two columns with some text in each.
+* [ ] Change one column to 70% width and the other to 30% width.
+
+:::
+
+## Footnotes
+
+```markdown
+Here is some text with a footnote.[^1]
+
+[^1]: This is the content of the footnote.
+
+    You can include additional details by going two line below and tab indent.
+```
+
+Here is some text with a footnote.[^1]
+
+[^1]: This is the content of the footnote.
+
+    You can include additional details by going two line below and tab indent.
+
+::: {.pale-blue}
+
+**Task:** In `quarto_features.qmd`:
+
+* [ ] Add one footnote to a sentence and put a little extra detail into the footnote text.
+
+:::
+
+## Citations
+
+With a bibliography file (e.g., `references.bib`), Quarto can automatically format citations and a reference list.
+
+A bibliography file (with extension `.bib`) is a text file that stores information about your sources (for example, author, year, title, journal). Each source has a short key, like `@feng_ultrasonic_2006`, that you can use in your writing. Reference managers such as [Zotero](https://www.zotero.org/) can export your library to a `.bib` file, so you do not have to type these entries by hand.
+
+::: {.callout-note title="View `references.bib`" collapse="true"}
+```bib
+{{< include quarto_features/references.bib >}}
+```
+:::
+
+Provide the path to your bibliography in the YAML metadata for the page e.g.,:
+
+```yaml
+---
+title: "My Document"
+bibliography: references.bib
+---
+```
+
+A simple in-text citation looks like this...
+can wrap in () and [] if want...
+use @ and identifier...
+
+:::: {.columns}
+::: {.column width=47%}
+```markdown
+Some frogs can communicate using ultrasonic calls that are far above the range of human hearing (@feng_ultrasonic_2006).
+```
+:::
+::: {.column width=6%}
+:::
+::: {.column width=47%}
+Some frogs can communicate using ultrasonic calls that are far above the range of human hearing (@feng_ultrasonic_2006).
+:::
+::::
+
+Multiple citations can be combined, use semicolon to separate
+
+:::: {.columns}
+::: {.column width=47%}
+```markdown
+Ultrasonic communication in frogs shows that amphibian hearing and vocal behaviour are more flexible than scientists once thought (@feng_ultrasonic_2006; @starnberger_uni-_2014).
+```
+:::
+::: {.column width=6%}
+:::
+::: {.column width=47%}
+Ultrasonic communication in frogs shows that amphibian hearing and vocal behaviour are more flexible than scientists once thought (@feng_ultrasonic_2006; @starnberger_uni-_2014).
+:::
+::::
+
+By default, a list of works cited will be placed at the end of the document. You can change where this is by provided `refs` div -
+
+::::: {.columns}
+:::: {.column width=30%}
+
+```markdown
+::: {#refs}
+:::
+```
+
+::::
+
+:::: {.column width=5%}
+::::
+
+:::: {.column width=65%}
+
+::: {#refs}
+:::
+
+::::
+:::::
+
+::: {.pale-blue}
+
+**Task:** In `quarto_features.qmd`:
+
+* [ ] A bib file is provided... add citation using key from file...
+
+:::
+
+## Cross-references
+
+TODO: explain this better... how to do with figures, tables and equation...
+
+Quarto can automatically number and cross‑reference figures, tables, sections, and equations.
+
+To make something cross‑referenceable, you give it an identifier, then refer to it with `@id`. For example, a section:
+
+```markdown
+## Results {#sec-results}
+
+As shown in @sec-results, we found that ...
+```
+
+::: {.pale-blue}
+
+**Task:** In `quarto_features.qmd`:
+
+* [ ] Add an ID to one heading then write a sentence later that references it.
+
+:::
+
+## Math
+
+Quarto supports LaTeX‑style math notation for inline and display equations.
+
+LaTeX is a markup language commonly used for writing mathematics. Quarto understands a subset of LaTeX math syntax so you can write formulas directly in your text. Inline math appears inside a sentence (for example, `$y = mx + c$`), and display math appears on its own line, centred and spaced out, using `$$ ... $$`.
+
+In-line math:
+
+:::: {.columns}
+::: {.column width=60%}
+```markdown
+The solution is $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$.
+```
+:::
+::: {.column width=5%}
+:::
+::: {.column width=35%}
+The solution is $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$.
+:::
+::::
+
+Display math:
+
+:::: {.columns}
+::: {.column width=60%}
+```markdown
+$$
+x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
+$$
+```
+:::
+::: {.column width=5%}
+:::
+::: {.column width=35%}
+$$
+x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
+$$
+:::
+::::
+
+::: {.pale-blue}
+
+**Task:** In `quarto_features.qmd`:
+
+* [ ] Add one short inline formula and one display formula (e.g., `y = mx + c`)
+
+:::
+
+## Definition lists
+
+Definition lists are useful for small glossaries or when you want to introduce a few key concepts with short explanations. To creat them, write therm term on online line, then start the defintion on the next line with a colon `:` and space.
+
+:::: {.columns}
+::: {.column width=40%}
+```markdown
+Thing 1
+: Definition of thing 1
+
+Thing 2
+: Definition of thing 2
+```
+:::
+::: {.column width=5%}
+:::
+::: {.column width=55%}
+<br>
+
+Thing 1
+: Definition of thing 1
+
+Thing 2
+: Definition of thing 2
+:::
+::::
+
+::: {.pale-blue}
+
+**Task:** In `quarto_features.qmd`:
+
+* [ ] Create a short definition list with two terms and one-sentence definitions for each.
+
+:::
+
+## Line blocks
+
+By default, Markdown ignores most extra spaces at the start of a line and treats single line breaks as part of the same paragraph. Line blocks give you precise control: they keep each line and its leading spaces exactly as you typed them.
+
+Default:
+
+:::: {.columns}
+::: {.column width=45%}
+```markdown
+South Cloisters,
+    University of Exeter,
+    St Luke's Campus,
+    Heavitree Road,
+    Exeter EX1 2LU
+```
+:::
+::: {.column width=10%}
+:::
+::: {.column width=45%}
+South Cloisters,
+    University of Exeter,
+    St Luke's Campus,
+    Heavitree Road,
+    Exeter EX1 2LU
+:::
+::::
+
+Line block:
+
+:::: {.columns}
+::: {.column width=45%}
+```markdown
+| South Cloisters,
+|     University of Exeter,
+|     St Luke's Campus,
+|     Heavitree Road,
+|     Exeter EX1 2LU
+```
+:::
+::: {.column width=10%}
+:::
+::: {.column width=45%}
+| South Cloisters,
+|     University of Exeter,
+|     St Luke's Campus,
+|     Heavitree Road,
+|     Exeter EX1 2LU
+:::
+::::
+
+::: {.pale-blue}
+
+**Task:** In `quarto_features.qmd`:
+
+* [ ] Write a three‑line address or short poem using a line block and check that the line breaks are preserved after rendering.
+
+:::
+
+## Includes
+
+reuse... import...
+
+```markdown
+{{{< include file.md >}}}
+```