Quarto Markdown: cheat-sheet

Code CheatSheet (7/7)

Cheat-sheet Quarto web

📘 Cheat-sheet

• Summary
• Links and figures
• Tabset
• Callouts
• Tablas
• Two columns
• Wrap code
• Code blocks
• Mermaid
• Include
• Presentations
• Accordion
• Icons
• Others

---

Markup and Quarto Resources

1 Summary

::: {.summary}
📘 **Design-patterns**
:::

/* summary card */
.summary{
    padding: 16px 16px 16px 16px;
    background: #a2f868;
    border: #ffffff6b;
    color: #117441;
    border-radius: 10px 10px 10px 10px;
}

2 Links and images

![Singleton Pattern](../images/javase/singleton-pattern-edited.png){width=60%}
{fig-width=10}
{fig-width=50%}
{height=2in}
{height=100px}
https://quarto.org/docs/reference/formats/pdf.html#figures
https://pandoc.org/MANUAL.html#extension-link_attributes
{.external}
{#tagthis .preview-image}

• basics
• figures
• videos

3 Tabset

::: {.panel-tabset}
### Tab A
Content for `Tab A`

### Tab B
Content for `Tab B`
:::

• reveal.js tabset

4 Code blocks

```{.python filename="matplotlib.py"}
#| code-fold: true
#| code-summary: "Show the code"
#| echo: true
#| code-overflow: wrap
import matplotlib.pyplot as plt
plt.plot([1,23,2,4])
plt.show()```

HTML Code Blocks

5 Code wrap and filename

```{.js .code-overflow-wrap filename="profile.jsx"}
export default function Profile() {
  return (
    <Avatar
      person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
      size={100}
    />
  );
}```

profile.jsx

export default function Profile() {
  return (
    <Avatar
      person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
      size={100}
    />
  );
}

::: {.column-margin}
![Using React component wiht markup image and some text](/images/reactjs/ex5.png){widht=80%}
:::

6 Callouts

::: {.callout-note}
Note that there are five types of callouts, including:
`note`, `warning`, `important`, `tip`, and `caution`.
:::

::: {.callout-tip}
## Tip With Caption

This is an example of a callout with a caption.
:::

::: {.callout-caution collapse="true"}
## Expand To Learn About Collapse

This is an example of a 'folded' caution callout that can be expanded by the user.
You can use `collapse="true"` to collapse it by default or `collapse="false"` to make 
a collapsible callout that is expanded by default.
:::

callouts

7 Minimal callout

::: {.callout-note appearance="simple" icon=false}

## Pay Attention

Using callouts is an effective way to highlight content that your reader
 give special consideration or attention.

:::

Callouts have 3 different looks you can use.

Callouts looks

tag	Description
default	with colored header and an icon.
simple	that doesn’t include a colored header background.
minimal	borders to the callout, but doesn’t include a header background color or icon

8 Tables

• tables
• tablesgenerator

#| tables
| Default | Left | Right | Center |
|---------|:-----|------:|:------:|
| 12      | 12   |    12 |   12   |
| 123     | 123  |   123 |  123   |
| 1       | 1    |     1 |   1    |

: Demonstration of pipe table syntax
: Callouts looks {tbl-colwidths="[20,85]"}

8.1 Two columns

:::: {.columns}

::: {.column width="50%"}
- Highly customizable
- Less work than using `<div>` tags
:::

::: {.column width="50%"}
- Customizable in terms of layouts

:::
::::

9 Column Margin

::: {.column-margin}
[ top](#top)
:::

10 iframe

{=html}
<iframe 
  width="780"
  height="500" 
  src="https://devhints.io/bash"
  title="Bash scripting cheatsheet">
</iframe>

11 Mermaid

```{mermaid}
flowchart LR
  A[Hard edge] --> B(Round edge)
  B --> C{Decision}
  C --> D[Result one]
  C --> E[Result two]


{mermaid}
flowchart LR
  A[Hard edge] --> B(Round edge)
  B --> C{Decision}
  C --> D[Result one]
  C --> E[Result two]```

12 Presentations

#| link to presentation, link to .qmd
[Log in to GitHub and Quarto Creation: Sync GUI](/images/markup/quarto-github/markup-quarto-github.qmd)

#| presentation
title: "Create Project"
author: "Maven IntellJ Idea"
format: revealjs

## {background-color="grey"}
![](createprojectMavenIntellJI_0.png)

• Revealjs Quarto Presentations

13 Include

{{< include _content.qmd >}}

• inlcude

14 Accordion

<details>
<summary>Code</summary>
```{.js .code-overflow-wrap filename="profile.jsx"}
    ```
</details>

---

<details>
<summary>Code</summary>

``` {.java}
public class Account {
  private Person person;
  //other fields

  public Account(Person person) {
    this.person = person;
  }

  public Person getPerson() {
    return this.person;
  }

  public void setPerson(Person person) {
    this.person = person;
    
    //constructor, getters, setters and methods
  }
}```

</details>

Example:

Java Person Class

person

public class Account {
        private Person person;
        //other fields

        public Account(Person person) {
          this.person = person;
        }

        public Person getPerson() {
          return this.person;
        }

        public void setPerson(Person person) {
          this.person = person;
          
          //constructor, getters, setters and methods
        }
}

15 Top, next and back

:::: {.columns}

::: {.column width="45%"}
[ back](#top)
:::

::: {.column width="40%"}
[ top](#top)
:::

::: {.column width="15%"}
[next ](#top)
:::

::::

16 Icons

Icons

• glasses:

• arrow-up:

• arrow-right:

• solid book:

• java:

• Font Awesome Search

17 Others

• layout

Quarto Markdown: OJS Cells

top

Cascade Style Sheet

Icons