mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-06-14 11:52:32 +03:00
298 lines
9.7 KiB
Markdown
298 lines
9.7 KiB
Markdown
# Specimen should get a very long name, so we see how it behaves with the new edit url feature that is awesome
|
|
|
|
## Typography
|
|
|
|
### Body copy
|
|
|
|
Material's typographical system follows the idea of __vertical rhythm__, which
|
|
means it tries to establish a _consistent visual rhythm_ to the content of the
|
|
page to make reading pleasant and easy on the eyes. It's a simple concept but
|
|
rather hard to implement correctly. Luckily, the Material theme has already
|
|
done this for you, so sit back, relax, and start writing your documentation.
|
|
|
|
Naturally, the Material theme defines __bold__ and _italic_ styles, makes it
|
|
easy to write `fenced inline code blocks`, [links](#) and <kbd>Keyboard</kbd>
|
|
<kbd>+</kbd> <kbd>Commands</kbd>.
|
|
|
|
* test
|
|
* test
|
|
* Material's typographical system follows the idea of __vertical rhythm__, which
|
|
means it tries to establish a _consistent visual rhythm_ to the content of the
|
|
page to make reading pleasant and easy on the eyes. It's a simple concept but
|
|
rather hard to implement correctly. Luckily, the Material theme has already
|
|
1. test
|
|
2. test
|
|
1. Material's typographical system follows the idea of __vertical rhythm__, which
|
|
means it tries to establish a _consistent visual rhythm_ to the content of the
|
|
page to make reading pleasant and easy on the eyes. It's a simple concept but
|
|
rather hard to implement correctly. Luckily, the Material theme has already
|
|
2. Material's typographical system follows the idea of __vertical rhythm__, which
|
|
means it tries to establish a _consistent visual rhythm_ to the content of the
|
|
page to make reading pleasant and easy on the eyes. It's a simple concept but
|
|
rather hard to implement correctly. Luckily, the Material theme has already
|
|
3. Material's typographical system follows the idea of __vertical rhythm__, which
|
|
means it tries to establish a _consistent visual rhythm_ to the content of the
|
|
page to make reading pleasant and easy on the eyes. It's a simple concept but
|
|
rather hard to implement correctly. Luckily, the Material theme has already
|
|
3. test
|
|
1. test
|
|
2. test
|
|
3. test
|
|
* test
|
|
* test
|
|
|
|
### Headings <small>w/ or w/o secondary text</small>
|
|
|
|
Besides the default HTML headings `<h2>` to `<h6>`, the representational
|
|
classes `.h2` to `.h6` are defined to allow easy inline styling. The `<h1>`
|
|
should be only defined once and is integrated into the collapsing header.
|
|
|
|
Secondary text can be introduced to all headings (including `<h1>`) by using
|
|
the `<small>` tag directly inside Markdown.
|
|
|
|
## Blockquotes
|
|
|
|
> Text can also be written in blockquotes, for example to paraphrase
|
|
> something or someone.
|
|
>
|
|
> > And blockquotes can be nested?
|
|
>
|
|
> This is correct. Furthermore, they can contain __bold__ and _italic_ text,
|
|
> `fenced inline code blocks`, [links](#), headings and all kind of stuff.
|
|
|
|
## Lists
|
|
|
|
### Ordered lists
|
|
|
|
This is an ordered list of sentences for the sake of checking the styling is 👌!
|
|
|
|
1. The first sentence, free from markup.
|
|
2. The second sentence includes _italic_ text, and a [link](#) that should hopefully help it trigger a second line overflow to make sure spacing is a-ok.
|
|
3. The third sentence highlights some enjoyable fruits:
|
|
1. Mangoes, **yum**!
|
|
2. Blueberries
|
|
3. Strawberries
|
|
4. Apples (in particular)
|
|
1. Sundowner
|
|
|
|
My favourite 💕
|
|
|
|
2. Granny Smith
|
|
4. An this is just a footer sentence just to make sure.
|
|
|
|
### Unordered lists
|
|
|
|
Let's do that again, this time without the numbering.
|
|
|
|
- Free from markup, just like a bird.
|
|
- Let's try some [link](#) with some inline code `var home = '127.0.0.1'`, and now some extra __fluff__ to ensure we're using more than a single line.
|
|
- These are some varietes of beer.
|
|
- Lager
|
|
|
|
Lager is a type of beer that is conditioned at low temperatures, normally at the brewery. It may be pale, golden, amber, or dark.
|
|
|
|
- Kölsch
|
|
|
|
Kölsch is a beer brewed in Cologne, Germany. It is a clear, top-fermented beer with a bright, straw-yellow hue similar to other beers brewed from mainly Pilsener malt.
|
|
|
|
- Siason
|
|
|
|
Saison is a pale ale that is generally around 7% ABV, highly carbonated, fruity, spicy, and often bottle conditioned
|
|
|
|
- IPA
|
|
|
|
- An this is just a footer sentence just to make sure.
|
|
|
|
We can also use the alternative Markdown styling for lists (`*`, `+` or `-`), even mixing them:
|
|
|
|
* As shown by this item, which is a `*`.
|
|
+ This item uses `+`.
|
|
* And it also includes an nested item for good measure.
|
|
- The final item uses `-`.
|
|
- And for good measure, this also uses `-`.
|
|
|
|
Another default list:
|
|
|
|
* No checklist
|
|
* Foobar
|
|
|
|
``` js
|
|
function() test {
|
|
var foo = 12;
|
|
return foo;
|
|
}
|
|
```
|
|
|
|
## Checklists
|
|
|
|
Checklists are supported by the [PyMdown Extension][], [Tasklist][]:
|
|
|
|
* [ ] foo
|
|
* [x] bar
|
|
* [ ] baz
|
|
* [ ] foo
|
|
* [x] bar
|
|
* [ ] baz
|
|
|
|
### Critic
|
|
|
|
Here is some {--*incorrect*--} Markdown. I am adding this {++here.++}. Here is some more {--text
|
|
that I am removing--}text. And here is even more {++text that I
|
|
am ++}adding.{~~
|
|
|
|
~> ~~}Paragraph was deleted and replaced with some spaces.{~~ ~>
|
|
|
|
~~}Spaces were removed and a paragraph was added.
|
|
|
|
And here is a comment on {==some
|
|
==text== ==} asdhsjakh dkah dkash dkjas hdkash dksa sahdka kas dksa hdksah dksa kdsa kdask dask {>>This works quite well. I just wanted to comment on it.<<}. Substitutions {~~is~>are~~} great!
|
|
|
|
### Test {--headline--} [`with code`](http://google.com) and ==foo== [without](http://google.com)
|
|
|
|
This is also ==something that is marked (tm)==. Very cool.
|
|
|
|
Escape \{>>This text is preserved<<}.
|
|
|
|
General block handling.
|
|
|
|
{--
|
|
|
|
* test
|
|
* test
|
|
* test
|
|
* test
|
|
* test
|
|
|
|
--}
|
|
|
|
{++
|
|
|
|
* test
|
|
* test
|
|
* test
|
|
* test
|
|
* test
|
|
|
|
++}
|
|
|
|
## Code
|
|
|
|
### Inline
|
|
|
|
Code can also be written `inline`, however syntax
|
|
highlighting will only work on code listings unless you are using [inlinehilite][], which allows magic like `#!js var test = 0;`!
|
|
|
|
There has also been some recent conjecture about how articles will style [links that include `inline code` samples](https://www.impressivewebs.com/fixing-styles-on-code-tags-nested-inside-links/), so let's make sure we get that right too.
|
|
|
|
### Listing
|
|
|
|
Pre-formatted code blocks can host code examples and use the pygments extension
|
|
(if installed and enabled in `mkdocs.yml`) for syntax highlighting:
|
|
|
|
``` c hl_lines="14 15 20"
|
|
/*!
|
|
* Scan a buffer for a valid variable-sized integer.
|
|
*
|
|
* This function checks if an underrun might happen reading a variable-sized
|
|
* integer from a buffer. Only underruns can be checked using this method,
|
|
* overflows may still happen, but are properly reported by the unpack
|
|
* functions. SSE2 intrinsics are used if the compiler supports it.
|
|
*
|
|
* \param[in] data[] Source buffer
|
|
* \param[in] left Remaining bytes
|
|
* \return Bytes read
|
|
*/
|
|
extern size_t
|
|
pb_varint_scan(const uint8_t data[], size_t left) {
|
|
assert(data && left);
|
|
left = left > 10 ? 10 : left;
|
|
|
|
#ifdef __SSE2__
|
|
|
|
/* Mapping: remaining bytes ==> bitmask */
|
|
static const int mask_map[] = {
|
|
0x0000, 0x0001, 0x0003, 0x0007,
|
|
0x000F, 0x001F, 0x003F, 0x007F,
|
|
0x00FF, 0x01FF, 0x03FF
|
|
};
|
|
|
|
/* Load buffer into 128-bit integer and create high-bit mask */
|
|
__m128i temp = _mm_loadu_si128((const __m128i *)data);
|
|
__m128i high = _mm_set1_epi8(0x80);
|
|
|
|
/* Intersect and extract mask with high-bits set */
|
|
int mask = _mm_movemask_epi8(_mm_and_si128(temp, high));
|
|
mask = (mask & mask_map[left]) ^ mask_map[left];
|
|
|
|
/* Count trailing zeroes */
|
|
return mask ? __builtin_ctz(mask) + 1 : 0;
|
|
|
|
#else
|
|
|
|
/* Linear scan */
|
|
size_t size = 0;
|
|
while (data[size++] & 0x80)
|
|
if (!--left)
|
|
return 0;
|
|
return size;
|
|
|
|
#endif /* __SSE2__ */
|
|
|
|
}
|
|
```
|
|
|
|
For more examples of coding highlighting, see the [codehilite][] extensions page.
|
|
|
|
## Tables
|
|
|
|
| Feature / Implementation | protobluff | protobuf-c | nanopb | lwpb | pbc |
|
|
|--------------------------|------------|------------|---------|------|-----|
|
|
| Message types | yes | yes | yes | yes | yes |
|
|
| Nested message types | yes | yes | yes | yes | yes |
|
|
| Cyclic message types | yes | yes | partial | yes | yes |
|
|
| Scalar types | yes | yes | yes | yes | yes |
|
|
| Default values | yes | yes | yes | yes | yes |
|
|
| Enumerations | yes | yes | yes | yes | yes |
|
|
| Extensions | yes | - | yes | - | yes |
|
|
| Oneofs | yes | yes | yes | - | - |
|
|
| Packages | yes | yes | yes | yes | yes |
|
|
| Packed option | yes | yes | yes | yes | yes |
|
|
| Deprecations | yes | partial | - | - | - |
|
|
|
|
Tables might also include alignment indiciators:
|
|
|
|
| Left Align | Center Align | Right Align |
|
|
| :----------- | :------------: | ------------: |
|
|
| Hi | there | friend |
|
|
| How | are | you? |
|
|
|
|
And if you're using something like [Pandoc](http://pandoc.org/), you might get tables with `colgroup`, which is fun?
|
|
|
|
<table>
|
|
<colgroup>
|
|
<col width="30%">
|
|
<col width="70%">
|
|
</colgroup>
|
|
<thead>
|
|
<tr class="header">
|
|
<th>Company</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><a href='http://google.com'>Google</a></td>
|
|
<td>A search engine (among other things).</td>
|
|
</tr>
|
|
<tr>
|
|
<td><a href='http://bing.com'>Bing</a></td>
|
|
<td>Another search engine, from Microsoft.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
[codehilite]: extensions/codehilite.md
|
|
[inlinehilite]: extensions/pymdown/inlinehilite.md
|
|
[PyMdown Extension]: extensions/pymdown/overview.md
|
|
[Tasklist]: extensions/pymdown/tasklist.md
|