kitchen_sink.md

layout	title	description	nav_order
default	Kitchen Sink	SCDS Do More with Digital Scholarship workshop series	99

Common Elements

{: .no_toc }

Below are a bunch of markdown elements and their source code. Click the copy button at the top right of a codeblock to copy it to your clipboard.

More specific common elements seen in lessons can be found here.

Remember to delete this page before publishing.

Table of Contents

{: .text-delta } - TOC {:toc}

Headers and Paragraphs

Header 1

{: .no_toc }

Header 2

{: .no_toc }

Header 3

{: .no_toc }

Header 4

{: .no_toc }

Header 5

{: .no_toc }

Header 6

{: .no_toc } A paragraph.

A new paragraph.

# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6
A paragraph.

A new paragraph.

---

Emphasis

Italics

Bolded

Bolded italics

Strikethrough

*Italics*

**Bolded**

***Bolded italics***

~~Strikethrough~~

---

Code Blocks

x = 5
y = 7
print(x + y)

```python
x = 5
y = 7
print(x + y)
```

---

Labels

Default label {: .label }

Blue label {: .label .label-blue }

Green label {: .label .label-green }

Purple label {: .label .label-purple }

Yellow label {: .label .label-yellow }

Red label {: .label .label-red }

Default label 
{: .label }

Blue label 
{: .label .label-blue }

Green label 
{: .label .label-green }

Purple label 
{: .label .label-purple }

Yellow label 
{: .label .label-yellow }

Red label 
{: .label .label-red }

---

Callouts

More examples can be found here.

By default, this template supports .highlight, .important, .new, .note, and .warning

{: .highlight } Some text without a title

{: .highlight }
Some text without a title

{: .important }

Some text

Multiple lines

{: .important }
> Some text
> 
> Multiple lines

{: .new } More text

{: .new }
More text

{: .note } Purple text

{: .note }
Purple text

{: .warning } Warning!

{: .warning }
Warning!

{: .note-title }

First line is your title

Rest of your text goes here.

<!-- For a callout with a custom title, add "-title" to the end of the callout name. -->
<!-- .highlight-title, .important-title, .new-title, .note-title, and .warning-title -->
{: .note-title }
> First line is your title
>
> Rest of your text goes here.

---

Lists

1. Item 1 2. Item 2 3. Item 3

1. Item 1
2. Item 2
3. Item 3

• Bulleted point
• Another bullet point
• Woah

- Bulleted point
- Another bullet point
- Woah

---

Drop-down Content

Drop-down without block-quote

Hello, World!
Next line.

<details>
    <summary> Drop-down without block-quote </summary> 
    Hello, World!
    <br>
    Next line.
</details>

Drop-down with block-quote

Hello, World!
Next line.

<details>
    <summary> Drop-down with block-quote </summary> 
    <blockquote>
        Hello, World!
        <br>
        Next line.
    </blockquote>
</details>
</div>

***

Images

Image from file

## Image from file
![Alternate Text](assets/img/temporaryInstallationGuide.png)

Image from file resized

## Image from file resized
<img src="assets/img/temporaryInstallationGuide.png" alt="Alternate Text" width="50%">
<!-- Try and use relative widths (percentages). 100% is the full width of the content area. -->

Image from link

## Image from link
![Alternate Text](https://picsum.photos/id/237/400)

Image from link resized

## Image from link resized
<img src="https://picsum.photos/id/237/400" alt="Alternate Text" width="20%">
<!-- Try and use relative widths (percentages). 100% is the full width of the content area. -->

---

Embeds

<iframe width="100%" height="416" allowfullscreen frameborder=0 src="https://echo360.ca/media/a65689c0-c35c-4f33-9c12-f0ac97883f54/public?autoplay=false&automute=false"></iframe>

<iframe width="100%" height="416" allowfullscreen frameborder=0 src="https://echo360.ca/media/a65689c0-c35c-4f33-9c12-f0ac97883f54/public?autoplay=false&automute=false"></iframe>
<!-- Replace src link with your own, or get embed code from your echo360 video. -->
<!-- Use a width of 100% and test out different heights until there's no black bars. Typically 416 works. -->

<iframe width="100%" height="416" src="https://www.youtube.com/embed/jNQXAC9IVRw" title="Me at the zoo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

<iframe width="100%" height="416" src="https://www.youtube.com/embed/jNQXAC9IVRw" title="Me at the zoo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<!-- Get embed code from YouTube. -->
<!-- Use a width of 100% and test out different heights until there's no black bars. Typically 416 works. -->