mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2025-03-20 16:15:09 +00:00
docs: use neutral background for Markdown examples #885
This commit is contained in:
Sören Weber
parent
83b1f27cb9
commit
49ea43c74f
1 changed files with 39 additions and 39 deletions
|
|
@ -54,7 +54,7 @@ Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.
|
|||
Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.
|
||||
|
||||
Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.
|
||||
|
|
@ -80,7 +80,7 @@ In Hugo you usually don't use `h1` as this is generated by your theme and you sh
|
|||
###### h6 Heading
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
|
||||
# h1 Heading
|
||||
|
||||
|
|
@ -107,7 +107,7 @@ Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.
|
|||
Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.
|
||||
|
||||
---
|
||||
|
|
@ -129,7 +129,7 @@ Blockquotes can also be nested.
|
|||
> Mauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus.
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue, aliquam non hendrerit ac, commodo vel nisi.
|
||||
>
|
||||
> > Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.
|
||||
|
|
@ -167,7 +167,7 @@ You can show importance of a snippet of text with a heavier font-weight by enclo
|
|||
I am rendered with **bold text**
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
I am rendered with **bold text**
|
||||
{{% /notice %}}
|
||||
|
||||
|
|
@ -179,7 +179,7 @@ You can emphasize a snippet of text with italics by enclosing it with underscore
|
|||
I am rendered with _italicized text_
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
I am rendered with _italicized text_
|
||||
{{% /notice %}}
|
||||
|
||||
|
|
@ -199,7 +199,7 @@ You can mark text in the predefined accent color of your stylesheet.
|
|||
<mark>Parts</mark> of this text <mark>are marked!</mark>
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
<mark>Parts</mark> of this text <mark>are marked!</mark>
|
||||
{{% /notice %}}
|
||||
|
||||
|
|
@ -219,7 +219,7 @@ The ++hot, new++ stuff
|
|||
The <ins>hot, new</ins> stuff
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
The ++hot, new++ stuff
|
||||
{{% /notice %}}
|
||||
|
||||
|
|
@ -231,7 +231,7 @@ The ++hot, new++ stuff
|
|||
~~Strike through~~ this text
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
~~Strike through~~ this text
|
||||
{{% /notice %}}
|
||||
|
||||
|
|
@ -251,7 +251,7 @@ Double arrows pointing left `<<` or right `>>` are replaced by arrow **<<** and
|
|||
Three consecutive dots `...` are replaced by an ellipsis **...** entity.
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
Double quotes `"` and single quotes `'` of enclosed text are replaced by **"double curly quotes"** and **'single curly quotes'**.
|
||||
|
||||
Double dashes `--` and triple dashes `---` are replaced by en-dash **--** and em-dash **---** entities.
|
||||
|
|
@ -277,7 +277,7 @@ How many liters H~2~O fit into 1dm^3^?
|
|||
How many liters H<sub>2</sub>O fit into 1dm<sup>3</sup>?
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
How many liters H~2~O fit into 1dm^3^?
|
||||
{{% /notice %}}
|
||||
|
||||
|
|
@ -289,7 +289,7 @@ How many liters H~2~O fit into 1dm^3^?
|
|||
Press <kbd>STRG</kbd> <kbd>ALT</kbd> <kbd>DEL</kbd> to end your shift early.
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
Press <kbd>STRG</kbd> <kbd>ALT</kbd> <kbd>DEL</kbd> to end your shift early.
|
||||
{{% /notice %}}
|
||||
|
||||
|
|
@ -314,7 +314,7 @@ You may use any of `-`, `*` or `+` to denote bullets for each list item but shou
|
|||
- Faucibus porta lacus fringilla vel
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
- Lorem ipsum dolor sit amet
|
||||
- Consectetur adipiscing elit
|
||||
- Vestibulum laoreet porttitor sem
|
||||
|
|
@ -344,7 +344,7 @@ Markdown will automatically number each of your items consecutively. This means,
|
|||
17. Eget porttitor lorem
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
1. Lorem ipsum dolor sit amet
|
||||
1. Consectetur adipiscing elit
|
||||
1. Integer molestie lorem at massa
|
||||
|
|
@ -367,7 +367,7 @@ Markdown will automatically number each of your items consecutively. This means,
|
|||
- [ ] Smell
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
- [x] Basic Test
|
||||
- [ ] More Tests
|
||||
- [x] View
|
||||
|
|
@ -397,7 +397,7 @@ Orange
|
|||
You can't make juice out of it.
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
Apple
|
||||
: Pomaceous fruit of plants of the genus Malus in the family Rosaceae.
|
||||
: An American computer company.
|
||||
|
|
@ -421,7 +421,7 @@ Inline snippets of code can be wrapped with backticks `` ` ``.
|
|||
In this example, `<div></div>` is marked as code.
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
In this example, `<div></div>` is marked as code.
|
||||
{{% /notice %}}
|
||||
|
||||
|
|
@ -438,7 +438,7 @@ Be impressed by my advanced code:
|
|||
line 3 of code
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
Be impressed by my advanced code:
|
||||
|
||||
// Some comments
|
||||
|
|
@ -472,7 +472,7 @@ See [Code Highlighting](shortcodes/highlight) for additional documentation.
|
|||
```
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
```js
|
||||
{
|
||||
name: "Claus",
|
||||
|
|
@ -501,7 +501,7 @@ See [Code Highlighting](shortcodes/highlight) for additional documentation.
|
|||
| ext | extension to be used for dest files. |
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
| Option | Description |
|
||||
|--------|-------------|
|
||||
| data | path to data files to supply the data that will be passed into templates. |
|
||||
|
|
@ -521,7 +521,7 @@ Adding a colon on the left and/or right side of the dashes below any heading wil
|
|||
| ext | 3 | extension to be used for dest files. |
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
| Option | Number | Description |
|
||||
|-------:|:------:|:------------|
|
||||
| data | 1 | path to data files to supply the data that will be passed into templates. |
|
||||
|
|
@ -539,7 +539,7 @@ Adding a colon on the left and/or right side of the dashes below any heading wil
|
|||
This is a link to https://example.com.
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
This is a link to https://example.com.
|
||||
{{% /notice %}}
|
||||
|
||||
|
|
@ -552,7 +552,7 @@ You can explicitly define links in case you want to use non-absolute URLs or wan
|
|||
[Assemble](http://assemble.io)
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
[Assemble](http://assemble.io)
|
||||
{{% /notice %}}
|
||||
|
||||
|
|
@ -564,7 +564,7 @@ For even further information, you can add an additional text, displayed in a too
|
|||
[Upstage](https://github.com/upstage/ "Visit Upstage!")
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
[Upstage](https://github.com/upstage/ "Visit Upstage!")
|
||||
{{% /notice %}}
|
||||
|
||||
|
|
@ -578,7 +578,7 @@ Links can be simplyfied for recurring reuse by using a reference ID to later def
|
|||
[somelinkID]: https://example.com "Go to example domain"
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
[Example][somelinkID]
|
||||
|
||||
[somelinkID]: https://example.com "Go to example domain"
|
||||
|
|
@ -605,7 +605,7 @@ That's some more text with a footnote.[^someid]
|
|||
Blue light glows blue.
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
That's some text with a footnote[^1]
|
||||
|
||||
[^1]: And that's the footnote.
|
||||
|
|
@ -628,7 +628,7 @@ Images have a similar syntax to links but include a preceding exclamation mark.
|
|||
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
|
||||
{{% /notice %}}
|
||||
|
||||
|
|
@ -640,7 +640,7 @@ Like links, images can also be given a tooltip.
|
|||
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
|
||||
{{% /notice %}}
|
||||
|
||||
|
|
@ -654,7 +654,7 @@ Images can also be linked by reference ID to later define the URL location. This
|
|||
[laforge]: https://octodex.github.com/images/trekkie.jpg "Geordi La Forge"
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
![La Forge][laforge]
|
||||
|
||||
[laforge]: https://octodex.github.com/images/trekkie.jpg?width=20vw "Geordi La Forge"
|
||||
|
|
@ -672,7 +672,7 @@ Add query parameter `width` and/or `height` to the link image to resize the imag
|
|||
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
|
||||
{{% /notice %}}
|
||||
|
||||
|
|
@ -680,7 +680,7 @@ Add query parameter `width` and/or `height` to the link image to resize the imag
|
|||
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
|
||||
{{% /notice %}}
|
||||
|
||||
|
|
@ -688,7 +688,7 @@ Add query parameter `width` and/or `height` to the link image to resize the imag
|
|||
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
|
||||
{{% /notice %}}
|
||||
|
||||
|
|
@ -702,7 +702,7 @@ Add a query parameter `classes` to the link image to add CSS classes. Add some o
|
|||
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
|
||||
{{% /notice %}}
|
||||
|
||||
|
|
@ -712,7 +712,7 @@ Add a query parameter `classes` to the link image to add CSS classes. Add some o
|
|||
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
|
||||
{{% /notice %}}
|
||||
|
||||
|
|
@ -722,7 +722,7 @@ Add a query parameter `classes` to the link image to add CSS classes. Add some o
|
|||
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
|
||||
{{% /notice %}}
|
||||
|
||||
|
|
@ -732,7 +732,7 @@ Add a query parameter `classes` to the link image to add CSS classes. Add some o
|
|||
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
|
||||
{{% /notice %}}
|
||||
|
||||
|
|
@ -745,7 +745,7 @@ Add a query parameter `classes` to the link image to add CSS classes. Add some o
|
|||
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
|
||||
|
||||
|
||||
|
|
@ -758,7 +758,7 @@ Add a query parameter `classes` to the link image to add CSS classes. Add some o
|
|||
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
|
||||
{{% /notice %}}
|
||||
|
||||
|
|
@ -770,7 +770,7 @@ Add the query parameter `lightbox=false` to the image link to disable the lightb
|
|||
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="eye" title="Result" %}}
|
||||
{{% notice style="code" icon="eye" title="Result" %}}
|
||||
|
||||
{{% /notice %}}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue