Kitchen Sink
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
Comments
<!-- This is a comment. -->
<!-- All comments start with this symbol
And end with the symbol below
-->
<!-- Anything in between these two symbols
No matter if there's multiple lines
Will not be rendered. These are used
for, well, comments.
-->
Headers and Paragraphs
# 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
Blue label
Green label
Purple label
Yellow label
Red label
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
Some text without a title
{: .highlight }
Some text without a title
Some text
Multiple lines
{: .important }
> Some text
>
> Multiple lines
More text
{: .new }
More text
Purple text
{: .note }
Purple text
Warning!
{: .warning }
Warning!
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
- Item 1
- Item 2
- 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
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 file resized and rounded
## Image from file resized and rounded
<img src="assets/img/temporaryInstallationGuide.png" style="border-radius:20px;" 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
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. -->
Image from link resized and rounded
## Image from link resized and rounded
<img src="https://picsum.photos/id/237/400" style="border-radius:20px;" alt="Alternate Text" width="40%">
<!-- Try and use relative widths (percentages). 100% is the full width of the content area. -->
Math Equations
$f(x) = 2 x + 1$ $\int_{-2}^2 \phi(z) dz$
\[f(x; a, b) = \frac{x^{(a - 1)} (1 - x)^{(b - 1)}} {\int_0^1 u^{(a - 1)} (1 - u)^{(b - 1)} du} \qquad (0 \leq x \leq 1)\]
$f(x) = 2 x + 1$
$\int_{-2}^2 \phi(z) dz$
\\[f(x; a, b) = \frac{x^{(a - 1)} (1 - x)^{(b - 1)}}
{\int_0^1 u^{(a - 1)} (1 - u)^{(b - 1)} du}
\qquad (0 \leq x \leq 1)\\]
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>
<!-- 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>
<!-- Get embed code from YouTube. -->
<!-- Use a width of 100% and test out different heights until there's no black bars. Typically 416 works. -->
PDF Viewer
<embed src="assets/docs/examplePDF.pdf" style="border:none;" width="100%" height="466px">
Interactive H5P Components
Make interactive H5P components here: https://h5pstudio.ecampusontario.ca/.
<!-- Note: You only need to include the <script> line once in your file. -->
<script src="https://h5pstudio.ecampusontario.ca/modules/contrib/h5p/vendor/h5p/h5p-core/js/h5p-resizer.js" charset="UTF-8"></script>
<!-- You can copy embed code from H5P Studio -->
<iframe src="https://h5pstudio.ecampusontario.ca/h5p/57433/embed" width="100%" height="308" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<iframe src="https://h5pstudio.ecampusontario.ca/h5p/57562/embed" width="100%" height="519" frameborder="0" allowfullscreen="allowfullscreen"></iframe>