Common Elements
Below are a bunch of common elements and their source code. Click the copy button at the top right of a codeblock to copy it to your clipboard.
More general markdown elements can be found here.
Remember to delete this page before publishing.
Table of Contents
Table of Contents
<details markdown="block" class="toc">
<summary>
Table of Contents
</summary>
{: .text-delta }
- TOC
{:toc}
</details>
You can only have one table of contents per page.
Question and Answers
This is a simpler way to ask a question with an answer.
See Answer.
Your answer goes here.
Multiple lines.
This is a simpler way to ask a question with an answer. <!-- Question Text -->
<details>
<summary> See Answer </summary>
<blockquote>
Your answer goes here. <br> <!-- Answer Text -->
Multiple lines.
</blockquote>
</details>
Exercise 1
This is a fancier way to display questions.
You can also have multiple lines.
See Answer
Answer
You can put your solution here
Multi line solutions
{: .new-title }
> Exercise 1 <!-- This is where you edit the title -->
>
> This is some really long question. <!-- Question Text -->
>
> So long you might need a second line. <!-- Optional Additional Text -->
>
> <details>
> <summary> See Answer </summary>
> <div markdown="1">
> {: .note-title }
> > Answer
> >
> > You can put your solution here <!-- Answer Text -->
> >
> > Multi line solutions <!-- Optional Additional Text -->
> </div>
> </details>
H5P
Alternatively, you can use H5P to create questions and other cool interactive components.
McMaster has access to eCampusOntario’s H5P server, where you can create and host your questions on.
https://h5pstudio.ecampusontario.ca/
Simply sign up with your McMaster email, create an interactive component, and copy the embed code into your Markdown file.
<!-- Script to resize H5P elements. Put this at the top of your Markdown file, below your preamble -->
<!-- If you're using multiple H5P elements... only use this line of code ONCE! -->
<script src="https://h5pstudio.ecampusontario.ca/modules/contrib/h5p/vendor/h5p/h5p-core/js/h5p-resizer.js" charset="UTF-8"></script>
<!-- H5P Embed. put this where you want it to be seen -->
<!-- Make sure to edit your width to be 100%, and add the style border there. -->
<iframe src="https://h5pstudio.ecampusontario.ca/h5p/57291/embed" style="border: solid 2px #7a003c" width="100%" height="350" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
Input Output Code Blocks
Input
a = 3
b = 4
c = sqrt(a^2 + b^2)
print(c)
Output
5
<div class="code-example" Markdown="1">
{: .label }
Input
```python
a = 3
b = 4
c = sqrt(a^2 + b^2)
print(c)
```
{: .label .label-green }
Output
```
5
```
</div>
PDF Viewer
<embed src="assets/docs/examplePDF.pdf" style="border:none;" width="100%" height="466px">