|
1 |
| -# Test |
2 |
| - |
3 |
| -This page is just to play around with different formatting. Nothing set here is permanent. |
4 |
| - |
5 |
| -## Callouts |
6 |
| - |
7 |
| -> [!info] |
8 |
| -> This is a callout block |
9 |
| -> [[test|link back here]] |
10 |
| -
|
11 |
| -## Colours |
12 |
| - |
13 |
| -<div class="mdx-switch"> |
14 |
| - <button data-md-color-primary="red"><code>red</code></button> |
15 |
| - <button data-md-color-primary="pink"><code>pink</code></button> |
16 |
| - <button data-md-color-primary="purple"><code>purple</code></button> |
17 |
| - <button data-md-color-primary="deep-purple"><code>deep purple</code></button> |
18 |
| - <button data-md-color-primary="indigo"><code>indigo</code></button> |
19 |
| - <button data-md-color-primary="blue"><code>blue</code></button> |
20 |
| - <button data-md-color-primary="light-blue"><code>light blue</code></button> |
21 |
| - <button data-md-color-primary="cyan"><code>cyan</code></button> |
22 |
| - <button data-md-color-primary="teal"><code>teal</code></button> |
23 |
| - <button data-md-color-primary="green"><code>green</code></button> |
24 |
| - <button data-md-color-primary="light-green"><code>light green</code></button> |
25 |
| - <button data-md-color-primary="lime"><code>lime</code></button> |
26 |
| - <button data-md-color-primary="yellow"><code>yellow</code></button> |
27 |
| - <button data-md-color-primary="amber"><code>amber</code></button> |
28 |
| - <button data-md-color-primary="orange"><code>orange</code></button> |
29 |
| - <button data-md-color-primary="deep-orange"><code>deep orange</code></button> |
30 |
| - <button data-md-color-primary="brown"><code>brown</code></button> |
31 |
| - <button data-md-color-primary="grey"><code>grey</code></button> |
32 |
| - <button data-md-color-primary="blue-grey"><code>blue grey</code></button> |
33 |
| - <button data-md-color-primary="black"><code>black</code></button> |
34 |
| - <button data-md-color-primary="white"><code>white</code></button> |
35 |
| -</div> |
36 |
| - |
37 |
| -<script> |
38 |
| - var buttons = document.querySelectorAll("button[data-md-color-primary]") |
39 |
| - buttons.forEach(function(button) { |
40 |
| - button.addEventListener("click", function() { |
41 |
| - var attr = this.getAttribute("data-md-color-primary") |
42 |
| - document.body.setAttribute("data-md-color-primary", attr) |
43 |
| - var name = document.querySelector("#__code_1 code span.l") |
44 |
| - name.textContent = attr.replace("-", " ") |
45 |
| - }) |
46 |
| - }) |
| 1 | +# Test |
| 2 | + |
| 3 | +This page is just to play around with different formatting. Nothing set here is permanent. |
| 4 | + |
| 5 | +## Callouts |
| 6 | + |
| 7 | +> [!info] |
| 8 | +> This is a callout block |
| 9 | +> [[test|link back here]] |
| 10 | +
|
| 11 | +## Colours |
| 12 | + |
| 13 | +<div class="mdx-switch"> |
| 14 | + <button data-md-color-primary="red"><code>red</code></button> |
| 15 | + <button data-md-color-primary="pink"><code>pink</code></button> |
| 16 | + <button data-md-color-primary="purple"><code>purple</code></button> |
| 17 | + <button data-md-color-primary="deep-purple"><code>deep purple</code></button> |
| 18 | + <button data-md-color-primary="indigo"><code>indigo</code></button> |
| 19 | + <button data-md-color-primary="blue"><code>blue</code></button> |
| 20 | + <button data-md-color-primary="light-blue"><code>light blue</code></button> |
| 21 | + <button data-md-color-primary="cyan"><code>cyan</code></button> |
| 22 | + <button data-md-color-primary="teal"><code>teal</code></button> |
| 23 | + <button data-md-color-primary="green"><code>green</code></button> |
| 24 | + <button data-md-color-primary="light-green"><code>light green</code></button> |
| 25 | + <button data-md-color-primary="lime"><code>lime</code></button> |
| 26 | + <button data-md-color-primary="yellow"><code>yellow</code></button> |
| 27 | + <button data-md-color-primary="amber"><code>amber</code></button> |
| 28 | + <button data-md-color-primary="orange"><code>orange</code></button> |
| 29 | + <button data-md-color-primary="deep-orange"><code>deep orange</code></button> |
| 30 | + <button data-md-color-primary="brown"><code>brown</code></button> |
| 31 | + <button data-md-color-primary="grey"><code>grey</code></button> |
| 32 | + <button data-md-color-primary="blue-grey"><code>blue grey</code></button> |
| 33 | + <button data-md-color-primary="black"><code>black</code></button> |
| 34 | + <button data-md-color-primary="white"><code>white</code></button> |
| 35 | +</div> |
| 36 | + |
| 37 | +<script> |
| 38 | + var buttons = document.querySelectorAll("button[data-md-color-primary]") |
| 39 | + buttons.forEach(function(button) { |
| 40 | + button.addEventListener("click", function() { |
| 41 | + var attr = this.getAttribute("data-md-color-primary") |
| 42 | + document.body.setAttribute("data-md-color-primary", attr) |
| 43 | + var name = document.querySelector("#__code_1 code span.l") |
| 44 | + name.textContent = attr.replace("-", " ") |
| 45 | + }) |
| 46 | + }) |
47 | 47 | </script>
|
0 commit comments