Skip to content
Snippets Groups Projects
Verified Commit d047db97 authored by Romain Deville's avatar Romain Deville
Browse files

:eye: Add preview content

Add preview folder which hold basic information to render preview of the
template with preview of all python markdown extensions.
parent b28f541e
Branches main
No related tags found
No related merge requests found
Showing
with 2360 additions and 0 deletions
*
\ No newline at end of file
# Repo information
# ===========================================================================
# First key MUST be the "slug" of the repo based on the remote, i.e. if remote
# is git@git.domain.tld:username/repo_name.git, then the key will be
# `repo_name`.
mkdocs_template:
# An explicit name for the repo that will be shown on the documentation
# page.
name: "Mkdocs Template"
#logo: assets/img/meta/mkdocs_template_logo.png
# (OPTIONATL) An extension of the explicit name with the namespace in which
# the repo is. For instance, using above remote, the entry will be
# `Username / Repo Name`.
# This entry is not used in the configuration of mkdocs.
git_name_with_namespace: "My Programs / Mkdocs Template"
# The complete path of the repo from the git_platform["url"]. For instance,
# using, above remote, the entry will be `username/repo_name.git`
git_slug_with_namespace: "rdeville.public/my_programs/mkdocs_template"
# If the repo documentation is part of a bigger repo, then provide the
# path of the rendered documentation. If the documentation is not part of
# another repo, leave it empty.
url_slug_with_namespace: "my_programs/mkdocs_template"
# (OPTIONAL) Path, relative to `docs_dir` mkdocs config, to the logo of the
# repo. If not specified, path will automatically be set to
# `assets/img/meta/reop_name_logo.png`
#logo: "assets/img/meta/repo_template_logo.png"
# Description of the repo, will be used to setup the mkdocs description.
desc: >-
Mkdocs Templates scaffolding project to host documentation configuration
and themes to manage homogenous documentation accros multiple projects.
# (OPTIONAL) If you plan to use `mkdocstring` plugins to render python
# source code, you will need to provide the path where your source files
# are relative to the root of the repo.
src_path:
- "templates/docs/_data/plugins.py"
- "user_config/docs/_data/plugins.py"
# List of informations about the main maintainers that will be automatically
# added to the license file in `docs/about/license.md`
maintainers:
- name: "Romain Deville"
mail: "dev@romaindeville.fr"
\ No newline at end of file
### BEGIN MKDOCS TEMPLATE ###
### WARNING, DO NOT UPDATE CONTENT BETWEEN MKDOCS TEMPLATE TAG !###
### Modified content will be overwritten when updating.###
# Extra Data Information & Customization
# ===========================================================================
# Dictionnary storing variables to be used as "Jinja2" variables within
# markdown files and _data/plugins.py
# Mkdocs.yaml
# ---------------------------------------------------------------------------
# Here you can overwrite main key you could find in mkdocs.yaml
# The name of your site, if not specified, will be the entry `name` of the repo in
# `_data/repo_name.yaml`
#site_name: "Your Site Name"
# The site description of your site, if not specified will be the description
# of the repo in `_data/repo_name.yaml`
#site_desc: "A short description"
# The url of your site, if not specified, then the site_url will be build from
# the key `site_base_url` below and the `url_slug_with_namespace` in
# `_data/repo_name.yaml`. If `site_base_url` is not specified, then value of
# `site_url` will not be overwritten.
#site_url: "https://my_site.tld"
# The name or company which old the copyright. No need to specify any date
# as it will be built based on the first commit of your repo. If not specify,
# then no copyright will be shown on the footer of the documentation.
#copyright: "Firstname Lastname"
# Name of your repo, if not specified, will be the key `mkdocs_repo_name` in
# `_data/repo_name.yaml` If value is EXACTLY "!!git_platform", then the value
# will be `git_platform["name"]` (see below).
#repo_name: "My Repo Name"
# URL to the source code of your repo. If not specified, will be build from
# `git_platform["url"]` (see below) and `repo_name["git_slug_with_namespace"]`
# in `_data/repo_name.yaml`.
#repo_url: "https://mygit.tld/namespace/repo_name
# You can override every entry of the `theme` key in `mkdocs.yaml`, here.
# Usefull to override templated mkdocs.
#
# REMARK, ONLY FOR MATERIAL-MKDOCS THEME
# If `theme["logo"]` is not specified, i.e. path to the logo image, then it
# will be set to the value of the key `repo_name["logo"]` in
# `_data/repo_name.yaml` if specified.
#
# If `theme["favicon"]` is not specified, i.e. path to the favicon image,
# then it will be set to the value of the key `repo_name["logo"]` in
# `_data/repo_name.yaml` if specified.
#
# If `theme["icon"]["repo"]` is not specified, i.e. icon "path" (see
# https://squidfunk.github.io/mkdocs-material/reference/icons-emojis/) that
# will be shown on the top rigt corner in front off the repo name, then it
# will be set to the value of the key `git_platform["icon"]` (see below).
#theme:
# logo: "path/to/logo.svg"
# icon:
# repo: fontawesome/brands/gitlab
# favicon: "path/to/favicon.svg"
# Main repo configuration
# ---------------------------------------------------------------------------
# Here you can specify variable about your main repo documentation
# The base url of your site, e.g. if you are using multiple nested
# documentation build with monorepo, you might want to share the same base URL
# for all your repo, then build link from the repo["url_slug_with_namespace"].
#site_url: "https://my_site.tld"
# Git platform
# ---------------------------------------------------------------------------
# In this REQUIRED section you will be able to specify some information for you
# git platform hosting your repo. This section will be used to automatically
# setup configuration for mkdocs such as `repo_url`, theme["icon"]["repo"] etc.
# Main dict entry
git_platform:
# The logo of the git platform you use. Not used in mkdocs configuration but
# can be used in markdown documentation file.
logo: " "
# Icon "path" (see
# https://squidfunk.github.io/mkdocs-material/reference/icons-emojis/) that
# will be shown on the top rigt corner in front off the repo name if not
# specified in `theme["icon"]["repo"]`.
icon: "fontawesome/brands/gitlab"
# Name of the platform you use.
name: "Framagit"
# URL of the platform you use, to be able to set `repo_url` for mkdocs
# configuration.
url: "https://framagit.org/"
### END MKDOCS TEMPLATE ###
---
toc:
toc_depth: 3
---
# Examples
!!! important "Informations"
Most of this content was directly take from [Pymdown
Extension](https://facelessuser.github.io/pymdown-extensions/).
This page aims to provide user example content for:
- Basic markdown
- Markdown Extension
- Pymdown Extension
To help seeing every possible thing to do to customize CSS.
Link to documentation of pymdown extension is provided with the title of
each section.
{% include "docs/preview_example/markdown.md" %}
{% include "docs/preview_example/arithmatex.md" %}
{% include "docs/preview_example/betterem.md" %}
{% include "docs/preview_example/caret.md" %}
{% include "docs/preview_example/critic.md" %}
{% include "docs/preview_example/details.md" %}
{% include "docs/preview_example/emoji.md" %}
{% include "docs/preview_example/escapeall.md" %}
{% include "docs/preview_example/inlinehilite.md" %}
{% include "docs/preview_example/keys.md" %}
{% include "docs/preview_example/magick.md" %}
{% include "docs/preview_example/mark.md" %}
{% include "docs/preview_example/progressbar.md" %}
{% include "docs/preview_example/saneheader.md" %}
{% include "docs/preview_example/smartsymbols.md" %}
{% include "docs/preview_example/striphtml.md" %}
{% include "docs/preview_example/superfences.md" %}
{% include "docs/preview_example/tabbed.md" %}
{% include "docs/preview_example/tasklist.md" %}
{% include "docs/preview_example/tilde.md" %}
{% include "docs/preview_example/code_sample.md" %}
## Videos Test
<div id="html5-videos" align="center">
<video controls>
<source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
Your browser does not support HTML5 video.
</video>
</div>
## [Arithmatex](https://facelessuser.github.io/pymdown-extensions/extensions/arithmatex/)
??? info "Arithmatex"
### Overview
Arithmatex is an extension that preserves LaTeX math equations during the
Markdown conversion process so that they can be used with libraries like
MathJax.
Arithmatex searches for the patterns `#!tex $...$` and `#!tex \(...\)` for
inline math, and `#!tex $$...$$`, `#!tex \[...\]`, and `#!tex
\begin{}...\end{}` for block math. By default, all formats are enabled, but
each format can individually be disabled if desired.
### Examples
!!! example "Inline Examples"
=== "Output"
$p(x|y) = \frac{p(y|x)p(x)}{p(y)}$, \(p(x|y) = \frac{p(y|x)p(x)}{p(y)}\).
=== "Markdown"
```tex
$p(x|y) = \frac{p(y|x)p(x)}{p(y)}$, \(p(x|y) = \frac{p(y|x)p(x)}{p(y)}\).
```
!!! example "Block Examples"
=== "Output"
$$
E(\mathbf{v}, \mathbf{h}) = -\sum_{i,j}w_{ij}v_i h_j - \sum_i b_i v_i - \sum_j c_j h_j
$$
\[3 < 4\]
\begin{align}
p(v_i=1|\mathbf{h}) & = \sigma\left(\sum_j w_{ij}h_j + b_i\right) \\
p(h_j=1|\mathbf{v}) & = \sigma\left(\sum_i w_{ij}v_i + c_j\right)
\end{align}
=== "Markdown"
```tex
$$
E(\mathbf{v}, \mathbf{h}) = -\sum_{i,j}w_{ij}v_i h_j - \sum_i b_i v_i - \sum_j c_j h_j
$$
\[3 < 4\]
\begin{align}
p(v_i=1|\mathbf{h}) & = \sigma\left(\sum_j w_{ij}h_j + b_i\right) \\
p(h_j=1|\mathbf{v}) & = \sigma\left(\sum_i w_{ij}v_i + c_j\right)
\end{align}
```
### Alternative Math Blocks
!!! example "Inline Math"
=== "Output"
`#!math p(x|y) = \frac{p(y|x)p(x)}{p(y)}`
=== "Markdown"
```
`#!math p(x|y) = \frac{p(y|x)p(x)}{p(y)}`
```
!!! example "Math Fences"
=== "Output"
```math
\begin{align}
p(v_i=1|\mathbf{h}) & = \sigma\left(\sum_j w_{ij}h_j + b_i\right) \\
p(h_j=1|\mathbf{v}) & = \sigma\left(\sum_i w_{ij}v_i + c_j\right)
\end{align}
```
=== "Markdown"
````
```math
\begin{align}
p(v_i=1|\mathbf{h}) & = \sigma\left(\sum_j w_{ij}h_j + b_i\right) \\
p(h_j=1|\mathbf{v}) & = \sigma\left(\sum_i w_{ij}v_i + c_j\right)
\end{align}
```
````
#### Subset h3 example
## [BetterEm](https://facelessuser.github.io/pymdown-extensions/extensions/betterem/)
??? info "BetterEM"
### Examples
!!! Note "Note"
For all examples on this page, underscores are __smart__ and asterisks are not.
BetterEm requires that non-whitespace characters follow the opening
token(s) and precede the closing token(s).
!!! example "Whitespace Example"
=== "Output"
This * won't emphasize *
This *will emphasize*
=== "Markdown"
```
* Won't highlight *
*Will highlight*
```
BetterEm allows for a more natural nested token feel.
!!! example "Nested Token Example"
=== "Output"
***I'm italic and bold* I am just bold.**
***I'm bold and italic!** I am just italic.*
=== "Markdown"
```
***I'm italic and bold* I am just bold.**
***I'm bold and italic!** I am just italic.*
```
BetterEm will ensure smart mode doesn't terminate in scenarios where there
are a large amount of consecutive tokens inside.
!!! example "Consecutive Token Example"
=== "Output"
___A lot of underscores____________is okay___
___A lot of underscores____________is okay___
=== "Markdown"
```
___A lot of underscores____________is okay___
___A lot of underscores____________is okay___
```
BetterEm will also ensure that smart mode breaks proper when an inner like
token signifies an end.
!!! example "Smart Break Example"
=== "Output"
__This will all be bold __because of the placement of the center underscores.__
__This will all be bold __ because of the placement of the center asterisks.__
__This will NOT all be bold__ because of the placement of the center underscores.__
__This will all be bold_ because the token count is less than that of the surrounding.__
=== "Markdown"
```
__This will all be bold __because of the placement of the center underscores.__
__This will all be bold __ because of the placement of the center underscores.__
__This will NOT all be bold__ because of the placement of the center underscores.__
__This will all be bold_ because of the token is less than that of the surrounding.__
```
BetterEm will allow non-smart emphasis to contain "floating" like tokens.
!!! example "Floating Token Example"
=== "Output"
*All will * be italic*
*All will *be italic*
*All will not* be italic*
*All will not ** be italic*
**All will * be bold**
**All will *be bold**
**All will not*** be bold**
**All will not ***be bold**
=== "Markdown"
```
*All will * be italic*
*All will *be italic*
*All will not* be italic*
*All will not ** be italic*
**All will * be bold**
**All will *be bold**
**All will not*** be bold**
**All will not *** be bold**
```
## [Caret](https://facelessuser.github.io/pymdown-extensions/extensions/caret/)
??? info "Caret"
### Example Insert
To wrap content in an **insert** tag, simply surround the text with double
`^`. You can also enable `smart_insert` in the options. Smart
behavior of **insert** models that of BetterEm.
!!! example "Insert Example"
=== "Output"
^^Insert me^^
=== "Markdown"
```
^^Insert me^^
```
### Example Superscript
To denote a superscript, you can surround the desired content in single
`^`. It uses Pandoc style logic, so if your superscript needs to have
spaces, you must escape the spaces.
!!! example "Superscript Example"
=== "Output"
H^2^0
text^a\ superscript^
=== "Markdown"
```
H^2^0
text^a\ superscript^
```
## Code samples
??? info "Code Sample"
=== "Python"
```python3
{% filter indent(width=8) %}
{% include "docs/preview_example/code_sample/python_sample.py" %}
{% endfilter %}
```
=== "Java"
```java
{% filter indent(width=8) %}
{% include "docs/preview_example/code_sample/java_sample.java" %}
{% endfilter %}
```
=== "HTML"
```html
{% filter indent(width=8) %}
{% include "docs/preview_example/code_sample/html_sample.html" %}
{% endfilter %}
```
=== "CSS"
```css
{% filter indent(width=8) %}
{% include "docs/preview_example/code_sample/css_sample.css" %}
{% endfilter %}
```
=== "Javascript"
```javascript
{% filter indent(width=8) %}
{% include "docs/preview_example/code_sample/javascript_sample.js" %}
{% endfilter %}
```
@font-face {
font-family: 'lg';
src:
url("../fonts/lg.ttf?22t19m") format("truetype"),
url("../fonts/lg.woff?22t19m") format("woff"),
url("../fonts/lg.svg?22t19m#lg") format("svg");
font-weight: normal;
font-style: normal;
font-display: block;
}
.lg-icon {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'lg' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.lg-actions .lg-next,
.lg-actions .lg-prev {
background-color: rgba(0, 0, 0, 0.45);
border-radius: 2px;
color: #999;
cursor: pointer;
display: block;
font-size: 22px;
margin-top: -10px;
padding: 8px 10px 9px;
position: absolute;
top: 50%;
z-index: 1080;
outline: none;
border: none;
background-color: transparent;
}
@-webkit-keyframes lg-right-end {
0% {
left: 0;
}
50% {
left: -30px;
}
100% {
left: 0;
}
}
.lg-outer.lg-right-end .lg-object {
-webkit-animation: lg-right-end 0.3s;
-o-animation: lg-right-end 0.3s;
animation: lg-right-end 0.3s;
position: relative;
}
.lg-toolbar .lg-icon {
color: #999;
cursor: pointer;
float: right;
font-size: 24px;
height: 47px;
line-height: 27px;
padding: 10px 0;
text-align: center;
width: 50px;
text-decoration: none !important;
outline: medium none;
background: none;
border: none;
box-shadow: none;
-webkit-transition: color 0.2s linear;
-o-transition: color 0.2s linear;
transition: color 0.2s linear;
}
.lg-toolbar .lg-close:after {
content: "\e070";
}
.lg-toolbar,
.lg-prev,
.lg-next {
opacity: 1;
-webkit-transition:
-webkit-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s,
opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s,
color 0.2s linear;
-moz-transition: -moz-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s,
opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s,
color 0.2s linear;
-o-transition:
-o-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s,
opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s,
color 0.2s linear;
transition:
transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s,
opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s,
color 0.2s linear;
}
body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
opacity: 1;
}
<!-- a -->
<a>Link without href</a>
<a class="button">Link without href: Button</a>
<a href="#">Link without href</a>
<a class="button" href="#">Link without href: Button</a>
<!-- abbr -->
<abbr title="Abbreviation">abbr</abbr>
<!-- address -->
<address>
You can contact author at <a href="http://www.somedomain.com/contact">www.somedomain.com</a>.<br>
If you see any bugs, please <a href="mailto:webmaster@somedomain.com">contact webmaster</a>.<br>
You may also want to visit us:<br>
Mozilla Foundation<br>
1981 Landings Drive<br>
Building K<br>
Mountain View, CA 94043-0801<br>
USA
</address>
<!-- area -->
<map name="primary">
<area shape="circle" coords="200,250,25" href="http://google.com" />
<area shape="default" nohref />
</map>
<!-- article -->
<article>
<h4>A really awesome article</h4>
<p>Lots of awesome text.</p>
</article>
<!-- aside -->
<article>
<p>
The Disney movie <em>The Little Mermaid</em> was
first released to theatres in 1989.
</p>
<aside>
The movie earned $87 million during its initial release.
</aside>
<p>
More info about the movie...
</p>
</article>
<!-- audio -->
<audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay>
Your browser does not support the <code>audio</code> element.
</audio>
<audio src="foo.ogg">
<track kind="captions" src="foo.en.vtt" srclang="en" label="English">
<track kind="captions" src="foo.sv.vtt" srclang="sv" label="Svenska">
</audio>
<audio controls="controls">
Your browser does not support the <code>audio</code> element.
<source src="foo.wav" type="audio/wav">
</audio>
<!-- b -->
<b>Bold</b>
<!-- bdi -->
<bdi>ARABIC_PLACEHOLDER</bdi>
<!-- bdo -->
<bdo dir="rtl">This text will go right to left.</bdo>
<!-- blockquote -->
<blockquote cite="http://developer.mozilla.org">
<p>This is a quotation taken from the Mozilla Developer Center.</p>
</blockquote>
<!-- button -->
<button>Button</button>
<!-- canvas -->
<canvas id="canvas" width="300" height="300">
Sorry, your browser doesn't support the &lt;canvas&gt; element.
</canvas>
<!-- cite -->
<cite>[ISO-0000]</cite>
<!-- code -->
<code>Code Block</code>
<!-- data -->
<data value="12345">Data</data>
<!-- datalist -->
<input list="browsers" />
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
</datalist>
<!-- del -->
<del>This text has been deleted</del>
<!-- details -->
<details>
<summary>Some details</summary>
<p>More info about the details.</p>
</details>
<!-- dfn, dt, dd, dl -->
<dl>
<dt>
<dfn>
<abbr title="World-Wide Web">WWW</abbr>
</dfn>
</dt>
<dd>The World-Wide Web (WWW) is a system of interlinked hypertext documents accessed on <a href="#def-internet">the Internet</a>.</dd>
</dl>
<!-- dialog -->
<dialog open>
<p>Greetings, one and all!</p>
</dialog>
<dialog id="favDialog">
<form method="dialog">
<section>
<p><label for="favAnimal">Favorite animal:</label>
<select id="favAnimal" name="favAnimal">
<option></option>
<option>Brine shrimp</option>
<option>Red panda</option>
<option>Spider monkey</option>
</select></p>
</section>
<menu>
<button id="cancel" type="reset">Cancel</button>
<button type="submit">Confirm</button>
</menu>
</form>
</dialog>
<menu>
<button id="updateDetails">Update details</button>
</menu>
<!-- em -->
<em>Emphasis</em>
<!-- embed -->
<embed type="video/quicktime" src="movie.mov" width="640" height="480"></embed>
<!-- fieldset -->
<form action="test.php" method="post">
<fieldset>
<legend>Title</legend>
<input type="radio" name="radio" id="radio"> <label for="radio">Click me</label>
</fieldset>
</form>
<!-- figure, figcaption -->
<figure>
<img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">
</figure>
<p></p>
<figure>
<img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">
<figcaption>Caption for the awesome picture</figcaption>
</figure>
<!-- footer -->
<footer>
Some copyright info or perhaps some author info for an &lt;article&gt;?
</footer>
<!-- form -->
<form action="">
<label for="GET-name">Name:</label>
<input id="GET-name" type="text" name="name">
<input type="submit" value="Save">
</form>
<form action="" method="post">
<label for="POST-name">Name:</label>
<input id="POST-name" type="text" name="name">
<input type="submit" value="Save">
</form>
<form action="" method="post">
<fieldset>
<legend>Title</legend>
<input type="radio" name="radio" id="radio"> <label for="radio">Click me</label>
</fieldset>
</form>
<!-- headings -->
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
<h1>Heading elements</h1>
<h2>Summary</h2>
<p>Some text here...</p>
<h2>Examples</h2>
<h3>Example 1</h3>
<p>Some text here...</p>
<h3>Example 2</h3>
<p>Some text here...</p>
<h2>See also</h2>
<p>Some text here...</p>
<!-- header -->
<header>
Header
</header>
<!-- hr -->
<hr>
<!-- i -->
<i>Italic</i>
<!-- iframe -->
<base target="_blank" />
<iframe width="400" height="215" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=es-419&amp;geocode=&amp;q=buenos+aires&amp;sll=37.0625,-95.677068&amp;sspn=38.638819,80.859375&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Buenos+Aires,+Argentina&amp;z=11&amp;ll=-34.603723,-58.381593&amp;output=embed">
</iframe><br />
<small>
<a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=es-419&amp;geocode=&amp;q=buenos+aires&amp;sll=37.0625,-95.677068&amp;sspn=38.638819,80.859375&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Buenos+Aires,+Argentina&amp;z=11&amp;ll=-34.603723,-58.381593"
style="color:#0000FF;text-align:left">
See bigger map
</a>
</small>
<!-- img -->
<img src="mdn-logo-sm.png" alt="MD Logo" />
<a href="https://developer.mozilla.org/"><img src="mdn-logo-sm.png" alt="MDN Logo" /> </a>
<img src="mdn-logo-sm.png" alt="MD Logo" srcset="mdn-logo-HD.png 2x, mdn-logo-small.png 15w, mdn-banner-HD.png 100w 2x" />
<!-- input -->
<input type="email" x-moz-errormessage="Please specify a valid email address.">
<form action="getform.php" method="get">
First name: <input type="text" name="first_name" /><br />
Last name: <input type="text" name="last_name" /><br />
E-mail: <input type="email" name="user_email" /><br />
<input type="submit" value="Submit" />
</form>
<input value="defalut" type="text" mozactionhint="next" name="sometext" />
<input value="defalut" type="button">
<input value="defalut" type="tel">
<input value="defalut" type="text">
<input value="defalut" type="time">
<input value="defalut" type="search">
<input value="defalut" type="week">
<input value="defalut" type="url">
<input value="defalut" type="submit">
<input value="defalut" type="reset">
<input value="defalut" type="range">
<input value="defalut" type="radio">
<input value="defalut" type="password">
<input value="defalut" type="month">
<input value="defalut" type="image">
<input value="defalut" type="date">
<input value="defalut" type="datetime">
<input value="defalut" type="datetime-local">
<input value="defalut" type="color">
<input value="defalut" type="checkbox">
<input value="defalut" type="file">
<input value="defalut">
<!-- ins -->
<ins>This text has been inserted</ins>
<!-- kbd -->
<p>Type the following in the Run dialog: <kbd>cmd</kbd><br />Then click the OK button.</p>
<p>Save the document by pressing <kbd><kbd>Ctrl</kbd>+<kbd>S</kbd></kbd></p>
<!-- keygen -->
<keygen name="name" challenge="challenge string" keytype="type" keyparams="pqg-params">
<!-- label -->
<label>Click me</label><input type="text" id="User" name="Name" />
<!-- li, ol, ul -->
<ol>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ol>
<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
<ul>
<li><ul>
<li><ul>
<li><ul>
<li><ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul></li>
<li>second item</li>
<li>third item</li>
</ul></li>
<li>second item</li>
<li>third item</li>
</ul></li>
<li>second item</li>
<li>third item</li>
</ul></li>
<li>second item</li>
<li>third item</li>
</ul>
<ol>
<li><ol>
<li><ol>
<li><ol>
<li><ol>
<li><ol>
<li>first</li>
<li>second item</li>
<li>third item</li>
</ol></li>
<li>second item</li>
<li>third item</li>
</ol></li>
<li>second item</li>
<li>third item</li>
</ol></li>
<li>second item</li>
<li>third item</li>
</ol></li>
<li>second item</li>
<li>third item</li>
</ol></li>
<li>second item</li>
<li>third item</li>
</ol>
<!-- main -->
<main>
<h1>Apples</h1>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<article>
<h2>Red Delicious</h2>
<p>These bright red apples are the most common found in many
supermarkets.</p>
<p>... </p>
<p>... </p>
</article>
<article>
<h2>Granny Smith</h2>
<p>These juicy, green apples make a great filling for
apple pies.</p>
<p>... </p>
<p>... </p>
</article>
</main>
<!-- mark -->
<p>The &lt;mark&gt; element is used to <mark>highlight</mark> text</p>
<!-- menu -->
<menu>
<li>
<button type="menu" value="File" menu="file-menu"></button>
<menu type="popup" id="file-menu">
<menuitem label="New..." onclick="newFile()"></menuitem>
<menuitem label="Save..." onclick="saveFile()"></menuitem>
</menu>
</li>
<li>
<button type="menu" value="Edit" menu="edit-menu"></button>
<menu type="popup" id="edit-menu">
<menuitem label="Cut..." onclick="cutEdit()"></menuitem>
<menuitem label="Copy..." onclick="copyEdit()"></menuitem>
<menuitem label="Paste..." onclick="pasteEdit()"></menuitem>
</menu>
</li>
</menu>
<!-- menuitem -->
<menuitem type="command" label="Save" icon="icons/save.png" onclick="save()">
<!-- meter -->
<p>Heat the oven to <meter min="200" max="500" value="350">350 degrees</meter>.</p>
<p>He got a <meter low="69" high="80" max="100" value="84">B</meter> on the exam.</p>
<!-- nav -->
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!-- object -->
<object data="move.swf" type="application/x-shockwave-flash"></object>
<object data="move.swf" type="application/x-shockwave-flash">
<param name="foo" value="bar">
</object>
<!-- optgroup -->
<select>
<optgroup label="Group 1">
<option>Option 1.1</option>
</optgroup>
<optgroup label="Group 2">
<option>Option 2.1</option>
<option>Option 2.2</option>
</optgroup>
<optgroup label="Group 3" disabled>
<option>Option 3.1</option>
<option>Option 3.2</option>
<option>Option 3.3</option>
</optgroup>
</select>
<!-- output -->
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" name="b" value="50" /> +
<input type="number" name="a" value="10" /> =
<output name="result"></output>
</form>
<!-- pre -->
<pre>
body {
color:red;
}
</pre>
<!-- progress -->
<progress value="70" max="100">70 %</progress>
<!-- q -->
<p>Everytime Kenny is killed, Stan will announce
<q cite="http://en.wikipedia.org/wiki/Kenny_McCormick#Cultural_impact">
Oh my God, you/they killed Kenny!
</q>.
</p>
<!-- ruby -->
<ruby>
<rp>(</rp><rt>Kan</rt><rp>)</rp>
<rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>
<ruby>
<rt>Kan</rt>
<rt>ji</rt>
</ruby>
<!-- s -->
<s>Today's Special: Salmon</s>
<!-- samp -->
<p>Regular text. <samp>This is sample text.</samp> Regular text.</p>
<!-- section -->
<section>
<h1>Heading</h1>
<p>Bunch of awesome content</p>
</section>
<!-- select -->
<select name="select">
<option value="value1">Value 1</option>
<option value="value2" selected>Value 2</option>
<option value="value3">Value 3</option>
</select>
<select name="select">
<optgroup label="one">
<option value="value1">Value 1</option>
<option value="value2" selected>Value 2</option>
<option value="value3">Value 3</option>
</optgroup>
<option value="value3">Value 3</option>
<optgroup label="two">
<option value="value1">Value 1</option>
<option value="value2" selected>Value 2</option>
<option value="value3">Value 3</option>
</optgroup>
</select>
<!-- sub -->
<p>The chemical formula of water is H<sub>2</sub>O</p>
<!-- sup -->
<p>This text is <sup>superscripted</sup></p>
<!-- table -->
<p>Simple table with header</p>
<table>
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
</tr>
</table>
<p>Table with thead, tfoot, and tbody</p>
<table>
<thead>
<tr>
<th>Header content 1</th>
<th>Header content 2</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Footer content 1</td>
<td>Footer content 2</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Body content 1</td>
<td>Body content 2</td>
</tr>
</tbody>
</table>
<p>Table with colgroup</p>
<table>
<colgroup span="4" class="columns"></colgroup>
<tr>
<th>Countries</th>
<th>Capitals</th>
<th>Population</th>
<th>Language</th>
</tr>
<tr>
<td>USA</td>
<td>Washington D.C.</td>
<td>309 million</td>
<td>English</td>
</tr>
<tr>
<td>Sweden</td>
<td>Stockholm</td>
<td>9 million</td>
<td>Swedish</td>
</tr>
</table>
<p>Table with colgroup and col</p>
<table>
<colgroup>
<col class="column1">
<col class="columns2plus3" span="2">
</colgroup>
<tr>
<th>Lime</th>
<th>Lemon</th>
<th>Orange</th>
</tr>
<tr>
<td>Green</td>
<td>Yellow</td>
<td>Orange</td>
</tr>
</table>
<p>Simple table with caption</p>
<table>
<caption>Awesome caption</caption>
<tr>
<td>Awesome data</td>
</tr>
</table>
<!-- template -->
<table id="producttable">
<thead>
<tr>
<td>UPC_Code</td>
<td>Product_Name</td>
</tr>
</thead>
<tbody>
<!-- existing data could optionally be included here -->
</tbody>
</table>
<template id="productrow">
<tr>
<td class="record"></td>
<td></td>
</tr>
</template>
<!-- textarea -->
<textarea name="textarea" rows="10" cols="50">Write something here</textarea>
<!-- time -->
<p>The concert starts at <time>20:00</time>.</p>
<p>The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.</p>
<!-- track -->
<video controls>
<source src="sample.ogv" type="video/ogv">
<track kind="captions" src="sampleCaptions.srt" srclang="en">
<track kind="descriptions" src="sampleDesciptions.srt" srclang="en">
<track kind="chapters" src="sampleChapters.srt" srclang="en">
<track kind="subtitles" src="sampleSubtitles_de.srt" srclang="de">
<track kind="subtitles" src="sampleSubtitles_en.srt" srclang="en">
<track kind="subtitles" src="sampleSubtitles_ja.srt" srclang="ja">
<track kind="subtitles" src="sampleSubtitles_oz.srt" srclang="oz">
<track kind="metadata" src="keyStage1.srt" srclang="en" label="Key Stage 1">
<track kind="metadata" src="keyStage2.srt" srclang="en" label="Key Stage 2">
<track kind="metadata" src="keyStage3.srt" srclang="en" label="Key Stage 3">
</video>
<!-- var -->
<p> A simple equation: <var>x</var> = <var>y</var> + 2 </p>
<!-- video -->
<video src="videofile.ogg" autoplay poster="posterimage.jpg">
Sorry, your browser doesn't support embedded videos,
but don't worry, you can <a href="videofile.ogg">download it</a>
and watch it with your favorite video player!
</video>
<video src="foo.ogg">
<track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
<track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska">
</video>
<!-- wbr -->
<p>http://this<wbr>.is<wbr>.a<wbr>.really<wbr>.long<wbr>.example<wbr>.com/With<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages</p>
```
\ No newline at end of file
// generic methods
public <T> List<T> fromArrayToList(T[] a) {
return Arrays.stream(a).collect(Collectors.toList());
}
public static <T, G> List<G> fromArrayToList(T[] a, Function<T, G> mapperFunction) {
return Arrays.stream(a)
.map(mapperFunction)
.collect(Collectors.toList());
}
// bounded generics
public <T extends Number> List<T> fromArrayToList(T[] a) {
...
}
//multiple bounds
<T extends Number & Comparable>
// upper bound wildcards
public static void paintAllBuildings(List<? extends Building> buildings) {
...
}
// lower bound wildcard
<? super T>
import React, { PropTypes, Component } from 'react';
import { connect } from 'react-redux';
// Import Components
import PostList from '../../components/PostList';
import PostCreateWidget from '../../components/PostCreateWidget/PostCreateWidget';
// Import Actions
import { addPostRequest, fetchPosts, deletePostRequest } from '../../PostActions';
import { toggleAddPost } from '../../../App/AppActions';
// Import Selectors
import { getShowAddPost } from '../../../App/AppReducer';
import { getPosts } from '../../PostReducer';
class PostListPage extends Component {
componentDidMount() {
this.props.dispatch(fetchPosts());
}
handleDeletePost = post => {
if (confirm('Do you want to delete this post')) { // eslint-disable-line
this.props.dispatch(deletePostRequest(post));
}
};
handleAddPost = (name, title, content) => {
this.props.dispatch(toggleAddPost());
this.props.dispatch(addPostRequest({ name, title, content }));
};
render() {
return (
<div>
<PostCreateWidget addPost={this.handleAddPost} showAddPost={this.props.showAddPost} />
<PostList handleDeletePost={this.handleDeletePost} posts={this.props.posts} />
</div>
);
}
}
// Actions required to provide data for this component to render in sever side.
PostListPage.need = [() => { return fetchPosts(); }];
// Retrieve data from store as props
function mapStateToProps(state) {
return {
showAddPost: getShowAddPost(state),
posts: getPosts(state),
};
}
PostListPage.propTypes = {
posts: PropTypes.arrayOf(PropTypes.shape({
name: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
content: PropTypes.string.isRequired,
})).isRequired,
showAddPost: PropTypes.bool.isRequired,
dispatch: PropTypes.func.isRequired,
};
PostListPage.contextTypes = {
router: React.PropTypes.object,
};
export default connect(mapStateToProps)(PostListPage);
# -*- coding: utf-8 -*-
"""
Created on Mon Feb 26 14:29:11 2018
https://domain.tld
@author: Christian Bender
@license: MIT-license
This module contains some useful classes and functions for dealing
with linear algebra in python.
Overview:
- class Vector
- function zeroVector(dimension)
- function unitBasisVector(dimension,pos)
- function axpy(scalar,vector1,vector2)
- function randomVector(N,a,b)
"""
import math
import random
class Vector(object):
"""
This class represents a vector of arbitray size.
You need to give the vector components.
Overview about the methods:
constructor(components : list) : init the vector
set(components : list) : changes the vector components.
__str__() : toString method
component(i : int): gets the i-th component (start by 0)
size() : gets the size of the vector (number of components)
euclidLength() : returns the eulidean length of the vector.
operator + : vector addition
operator - : vector subtraction
operator * : scalar multiplication and dot product
copy() : copies this vector and returns it.
changeComponent(pos,value) : changes the specified component.
TODO: compare-operator
"""
def __init__(self, components):
"""
input: components or nothing
simple constructor for init the vector
"""
self.__components = components
def set(self, components):
"""
input: new components
changes the components of the vector.
replace the components with newer one.
"""
if len(components) > 0:
self.__components = components
else:
raise Exception("please give any vector")
def __str__(self):
"""
returns a string representation of the vector
"""
ans = "("
length = len(self.__components)
for i in range(length):
if i != length - 1:
ans += str(self.__components[i]) + ","
else:
ans += str(self.__components[i]) + ")"
if len(ans) == 1:
ans += ")"
return ans
def component(self, i):
"""
input: index (start at 0)
output: the i-th component of the vector.
"""
if i < len(self.__components) and i >= 0:
return self.__components[i]
else:
raise Exception("index out of range")
def size(self):
"""
returns the size of the vector
"""
return len(self.__components)
def eulidLength(self):
"""
returns the eulidean length of the vector
"""
summe = 0
for c in self.__components:
summe += c ** 2
return math.sqrt(summe)
def __add__(self, other):
"""
input: other vector
assumes: other vector has the same size
returns a new vector that represents the sum.
"""
size = self.size()
result = []
if size == other.size():
for i in range(size):
result.append(self.__components[i] + other.component(i))
else:
raise Exception("must have the same size")
return Vector(result)
def __sub__(self, other):
"""
input: other vector
assumes: other vector has the same size
returns a new vector that represents the differenz.
"""
size = self.size()
result = []
if size == other.size():
for i in range(size):
result.append(self.__components[i] - other.component(i))
else: # error case
raise Exception("must have the same size")
return Vector(result)
def __mul__(self, other):
"""
mul implements the scalar multiplication
and the dot-product
"""
ans = []
if isinstance(other, float) or isinstance(other, int):
for c in self.__components:
ans.append(c * other)
elif isinstance(other, Vector) and (self.size() == other.size()):
size = self.size()
summe = 0
for i in range(size):
summe += self.__components[i] * other.component(i)
return summe
else: # error case
raise Exception("invalide operand!")
return Vector(ans)
def copy(self):
"""
copies this vector and returns it.
"""
components = [x for x in self.__components]
return Vector(components)
def changeComponent(self, pos, value):
"""
input: an index (pos) and a value
changes the specified component (pos) with the
'value'
"""
# precondition
assert pos >= 0 and pos < len(self.__components)
self.__components[pos] = value
def norm(self):
"""
normalizes this vector and returns it.
"""
eLength = self.eulidLength()
quotient = 1.0 / eLength
for i in range(len(self.__components)):
self.__components[i] = self.__components[i] * quotient
return self
def __eq__(self, other):
"""
returns true if the vectors are equal otherwise false.
"""
ans = True
SIZE = self.size()
if SIZE == other.size():
for i in range(SIZE):
if self.__components[i] != other.component(i):
ans = False
break
else:
ans = False
return ans
def zeroVector(dimension):
"""
returns a zero-vector of size 'dimension'
"""
# precondition
assert isinstance(dimension, int)
ans = []
for i in range(dimension):
ans.append(0)
return Vector(ans)
def unitBasisVector(dimension, pos):
"""
returns a unit basis vector with a One
at index 'pos' (indexing at 0)
"""
# precondition
assert isinstance(dimension, int) and (isinstance(pos, int))
ans = []
for i in range(dimension):
if i != pos:
ans.append(0)
else:
ans.append(1)
return Vector(ans)
def axpy(scalar, x, y):
"""
input: a 'scalar' and two vectors 'x' and 'y'
output: a vector
computes the axpy operation
"""
# precondition
assert (
isinstance(x, Vector)
and (isinstance(y, Vector))
and (isinstance(scalar, int) or isinstance(scalar, float))
)
return x * scalar + y
def randomVector(N, a, b):
"""
input: size (N) of the vector.
random range (a,b)
output: returns a random vector of size N, with
random integer components between 'a' and 'b'.
"""
ans = zeroVector(N)
random.seed(None)
for i in range(N):
ans.changeComponent(i, random.randint(a, b))
return ans
## [Critic](https://facelessuser.github.io/pymdown-extensions/extensions/critic/)
??? info "Critic"
### Examples
!!! example "Critic Markup Preview Example"
=== "Output"
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==}{>>This works quite well. I
just wanted to comment on it.<<}. Substitutions {~~is~>are~~}
great!
General block handling.
{--
* test remove
* test remove
* test remove
* test remove
* test remove
--}
{++
* test add
* test add
* test add
* test add
* test add
++}
## [Details](https://facelessuser.github.io/pymdown-extensions/extensions/details/)
??? info "Details"
### Supported types
Following is a list of type qualifiers provided by Material for MkDocs,
whereas the default type, and thus fallback for unknown type qualifiers, is
`note`:
!!! note
Content.
!!! abstract
Content.
!!! info
Content.
!!! tip
Content.
!!! success
Content.
!!! question
Content.
!!! warning
Content.
!!! failure
Content.
!!! danger
Content.
!!! bug
Content.
!!! example
Content.
!!! quote
## [Emoji](https://facelessuser.github.io/pymdown-extensions/extensions/emoji/)
??? info "Emoji"
### All Emoji from [emoji-cheat-sheet](https://www.webfx.com/tools/emoji-cheat-sheet/)
=== "People"
:bowtie: :smile: :simple_smile: :laughing: :blush: :smiley: :relaxed:
:smirk: :heart_eyes: :kissing_heart: :kissing_closed_eyes: :flushed:
:relieved: :satisfied: :grin: :wink: :stuck_out_tongue_winking_eye:
:stuck_out_tongue_closed_eyes: :grinning: :kissing:
:kissing_smiling_eyes: :stuck_out_tongue: :sleeping: :worried:
:frowning: :anguished: :open_mouth: :grimacing: :confused: :hushed:
:expressionless: :unamused: :sweat_smile: :sweat:
:disappointed_relieved: :weary: :pensive: :disappointed: :confounded:
:fearful: :cold_sweat: :persevere: :cry: :sob: :joy: :astonished:
:scream: :neckbeard: :tired_face: :angry: :rage: :triumph: :sleepy:
:yum: :mask: :sunglasses: :dizzy_face: :imp: :smiling_imp:
:neutral_face: :no_mouth: :innocent: :alien: :yellow_heart:
:blue_heart: :purple_heart: :heart: :green_heart: :broken_heart:
:heartbeat: :heartpulse: :two_hearts: :revolving_hearts: :cupid:
:sparkling_heart: :sparkles: :star: :star2: :dizzy: :boom: :collision:
:anger: :exclamation: :question: :grey_exclamation: :grey_question:
:zzz: :dash: :sweat_drops: :notes: :musical_note: :fire: :hankey:
:poop: :shit: :+1: :thumbsup: :-1: :thumbsdown: :ok_hand: :punch:
:facepunch: :fist: :v: :wave: :hand: :raised_hand: :open_hands:
:point_up: :point_down: :point_left: :point_right: :raised_hands:
:pray: :point_up_2: :clap: :muscle: :metal: :fu: :runner: :running:
:couple: :family: :two_men_holding_hands: :two_women_holding_hands:
:dancer: :dancers: :ok_woman: :no_good: :information_desk_person:
:raising_hand: :bride_with_veil: :person_with_pouting_face:
:person_frowning: :bow: :couplekiss: :couple_with_heart: :massage:
:haircut: :nail_care: :boy: :girl: :woman: :man: :baby: :older_woman:
:older_man: :person_with_blond_hair: :man_with_gua_pi_mao:
:man_with_turban: :construction_worker: :cop: :angel: :princess:
:smiley_cat: :smile_cat: :heart_eyes_cat: :kissing_cat: :smirk_cat:
:scream_cat: :crying_cat_face: :joy_cat: :pouting_cat: :japanese_ogre:
:japanese_goblin: :see_no_evil: :hear_no_evil: :speak_no_evil:
:guardsman: :skull: :feet: :lips: :kiss: :droplet: :ear: :eyes: :nose:
:tongue: :love_letter: :bust_in_silhouette: :busts_in_silhouette:
:speech_balloon: :thought_balloon: :feelsgood: :finnadie: :goberserk:
:godmode: :hurtrealbad: :rage1: :rage2: :rage3: :rage4: :suspect:
:trollface:
=== "Nature"
:sunny: :umbrella: :cloud: :snowflake: :snowman: :zap: :cyclone:
:foggy: :ocean: :cat: :dog: :mouse: :hamster: :rabbit: :wolf: :frog:
:tiger: :koala: :bear: :pig: :pig_nose: :cow: :boar: :monkey_face:
:monkey: :horse: :racehorse: :camel: :sheep: :elephant: :panda_face:
:snake: :bird: :baby_chick: :hatched_chick: :hatching_chick: :chicken:
:penguin: :turtle: :bug: :honeybee: :ant: :beetle: :snail: :octopus:
:tropical_fish: :fish: :whale: :whale2: :dolphin: :cow2: :ram: :rat:
:water_buffalo: :tiger2: :rabbit2: :dragon: :goat: :rooster: :dog2:
:pig2: :mouse2: :ox: :dragon_face: :blowfish: :crocodile:
:dromedary_camel: :leopard: :cat2: :poodle: :paw_prints: :bouquet:
:cherry_blossom: :tulip: :four_leaf_clover: :rose: :sunflower:
:hibiscus: :maple_leaf: :leaves: :fallen_leaf: :herb: :mushroom:
:cactus: :palm_tree: :evergreen_tree: :deciduous_tree: :chestnut:
:seedling: :blossom: :ear_of_rice: :shell: :globe_with_meridians:
:sun_with_face: :full_moon_with_face: :new_moon_with_face: :new_moon:
:waxing_crescent_moon: :first_quarter_moon: :waxing_gibbous_moon:
:full_moon: :waning_gibbous_moon: :last_quarter_moon:
:waning_crescent_moon: :last_quarter_moon_with_face:
:first_quarter_moon_with_face: :crescent_moon: :earth_africa:
:earth_americas: :earth_asia: :volcano: :milky_way: :partly_sunny:
:octocat: :squirrel:
=== "Objects"
:bamboo: :gift_heart: :dolls: :school_satchel: :mortar_board: :flags:
:fireworks: :sparkler: :wind_chime: :rice_scene: :jack_o_lantern:
:ghost: :santa: :christmas_tree: :gift: :bell: :no_bell:
:tanabata_tree: :tada: :confetti_ball: :balloon: :crystal_ball: :cd:
:dvd: :floppy_disk: :camera: :video_camera: :movie_camera: :computer:
:tv: :iphone: :phone: :telephone: :telephone_receiver: :pager: :fax:
:minidisc: :vhs: :sound: :speaker: :mute: :loudspeaker: :mega:
:hourglass: :hourglass_flowing_sand: :alarm_clock: :watch: :radio:
:satellite: :loop: :mag: :mag_right: :unlock: :lock:
:lock_with_ink_pen: :closed_lock_with_key: :key: :bulb: :flashlight:
:high_brightness: :low_brightness: :electric_plug: :battery: :calling:
:email: :mailbox: :postbox: :bath: :bathtub: :shower: :toilet: :wrench:
:nut_and_bolt: :hammer: :seat: :moneybag: :yen: :dollar: :pound: :euro:
:credit_card: :money_with_wings: :e-mail: :inbox_tray: :outbox_tray:
:envelope: :incoming_envelope: :postal_horn: :mailbox_closed:
:mailbox_with_mail: :mailbox_with_no_mail: :package: :door: :smoking:
:bomb: :gun: :hocho: :pill: :syringe: :page_facing_up: :page_with_curl:
:bookmark_tabs: :bar_chart: :chart_with_upwards_trend:
:chart_with_downwards_trend: :scroll: :clipboard: :calendar: :date:
:card_index: :file_folder: :open_file_folder: :scissors: :pushpin:
:paperclip: :black_nib: :pencil2: :straight_ruler: :triangular_ruler:
:closed_book: :green_book: :blue_book: :orange_book: :notebook:
:notebook_with_decorative_cover: :ledger: :books: :bookmark:
:name_badge: :microscope: :telescope: :newspaper: :football:
:basketball: :soccer: :baseball: :tennis: :8ball: :rugby_football:
:bowling: :golf: :mountain_bicyclist: :bicyclist: :horse_racing:
:snowboarder: :swimmer: :surfer: :ski: :spades: :hearts: :clubs:
:diamonds: :gem: :ring: :trophy: :musical_score: :musical_keyboard:
:violin: :space_invader: :video_game: :black_joker:
:flower_playing_cards: :game_die: :dart: :mahjong: :clapper: :memo:
:pencil: :book: :art: :microphone: :headphones: :trumpet: :saxophone:
:guitar: :shoe: :sandal: :high_heel: :lipstick: :boot: :shirt: :tshirt:
:necktie: :womans_clothes: :dress: :running_shirt_with_sash: :jeans:
:kimono: :bikini: :ribbon: :tophat: :crown: :womans_hat: :mans_shoe:
:closed_umbrella: :briefcase: :handbag: :pouch: :purse: :eyeglasses:
:fishing_pole_and_fish: :coffee: :tea: :sake: :baby_bottle: :beer:
:beers: :cocktail: :tropical_drink: :wine_glass: :fork_and_knife:
:pizza: :hamburger: :fries: :poultry_leg: :meat_on_bone: :spaghetti:
:curry: :fried_shrimp: :bento: :sushi: :fish_cake: :rice_ball:
:rice_cracker: :rice: :ramen: :stew: :oden: :dango: :egg: :bread:
:doughnut: :custard: :icecream: :ice_cream: :shaved_ice: :birthday:
:cake: :cookie: :chocolate_bar: :candy: :lollipop: :honey_pot: :apple:
:green_apple: :tangerine: :lemon: :cherries: :grapes: :watermelon:
:strawberry: :peach: :melon: :banana: :pear: :pineapple: :sweet_potato:
:eggplant: :tomato: :corn:
=== "Places"
:house: :house_with_garden: :school: :office: :post_office: :hospital:
:bank: :convenience_store: :love_hotel: :hotel: :wedding: :church:
:department_store: :european_post_office: :city_sunrise: :city_sunset:
:japanese_castle: :european_castle: :tent: :factory: :tokyo_tower:
:japan: :mount_fuji: :sunrise_over_mountains: :sunrise: :stars:
:statue_of_liberty: :bridge_at_night: :carousel_horse: :rainbow:
:ferris_wheel: :fountain: :roller_coaster: :ship: :speedboat: :boat:
:sailboat: :rowboat: :anchor: :rocket: :airplane: :helicopter:
:steam_locomotive: :tram: :mountain_railway: :bike: :aerial_tramway:
:suspension_railway: :mountain_cableway: :tractor: :blue_car:
:oncoming_automobile: :car: :red_car: :taxi: :oncoming_taxi:
:articulated_lorry: :bus: :oncoming_bus: :rotating_light: :police_car:
:oncoming_police_car: :fire_engine: :ambulance: :minibus: :truck:
:train: :station: :train2: :bullettrain_front: :bullettrain_side:
:light_rail: :monorail: :railway_car: :trolleybus: :ticket: :fuelpump:
:vertical_traffic_light: :traffic_light: :warning: :construction:
:beginner: :atm: :slot_machine: :busstop: :barber: :hotsprings:
:checkered_flag: :crossed_flags: :izakaya_lantern: :moyai:
:circus_tent: :performing_arts: :round_pushpin:
:triangular_flag_on_post: :jp: :kr: :cn: :us: :fr: :es: :it: :ru: :gb:
:uk: :de:
=== "Symbols"
:one: :two: :three: :four: :five: :six: :seven: :eight: :nine:
:keycap_ten: :1234: :zero: :hash: :symbols: :arrow_backward:
:arrow_down: :arrow_forward: :arrow_left: :capital_abcd: :abcd: :abc:
:arrow_lower_left: :arrow_lower_right: :arrow_right: :arrow_up:
:arrow_upper_left: :arrow_upper_right: :arrow_double_down:
:arrow_double_up: :arrow_down_small: :arrow_heading_down:
:arrow_heading_up: :leftwards_arrow_with_hook: :arrow_right_hook:
:left_right_arrow: :arrow_up_down: :arrow_up_small: :arrows_clockwise:
:arrows_counterclockwise: :rewind: :fast_forward: :information_source:
:ok: :twisted_rightwards_arrows: :repeat: :repeat_one: :new: :top: :up:
:cool: :free: :ng: :cinema: :koko: :signal_strength: :u5272: :u5408:
:u55b6: :u6307: :u6708: :u6709: :u6e80: :u7121: :u7533: :u7a7a: :u7981:
:sa: :restroom: :mens: :womens: :baby_symbol: :no_smoking: :parking:
:wheelchair: :metro: :baggage_claim: :accept: :wc: :potable_water:
:put_litter_in_its_place: :secret: :congratulations: :m:
:passport_control: :left_luggage: :customs: :ideograph_advantage: :cl:
:sos: :id: :no_entry_sign: :underage: :no_mobile_phones:
:do_not_litter: :non-potable_water: :no_bicycles: :no_pedestrians:
:children_crossing: :no_entry: :eight_spoked_asterisk: :sparkle:
:eight_pointed_black_star: :heart_decoration: :vs: :vibration_mode:
:mobile_phone_off: :chart: :currency_exchange: :aries: :taurus:
:gemini: :cancer: :leo: :virgo: :libra: :scorpius: :sagittarius:
:capricorn: :aquarius: :pisces: :ophiuchus: :six_pointed_star:
:negative_squared_cross_mark: :a: :b: :ab: :o2:
:diamond_shape_with_a_dot_inside: :recycle: :end: :back: :on: :soon:
:clock1: :clock130: :clock10: :clock1030: :clock11: :clock1130:
:clock12: :clock1230: :clock2: :clock230: :clock3: :clock330: :clock4:
:clock430: :clock5: :clock530: :clock6: :clock630: :clock7: :clock730:
:clock8: :clock830: :clock9: :clock930: :heavy_dollar_sign: :copyright:
:registered: :tm: :x: :heavy_exclamation_mark: :bangbang: :interrobang:
:o: :heavy_multiplication_x: :heavy_plus_sign: :heavy_minus_sign:
:heavy_division_sign: :white_flower: :100: :heavy_check_mark:
:ballot_box_with_check: :radio_button: :link: :curly_loop: :wavy_dash:
:part_alternation_mark: :trident: :black_small_square:
:white_small_square: :black_medium_small_square:
:white_medium_small_square: :black_medium_square: :white_medium_square:
:black_large_square: :white_large_square: :white_check_mark:
:black_square_button: :white_square_button: :black_circle:
:white_circle: :red_circle: :large_blue_circle: :large_blue_diamond:
:large_orange_diamond: :small_blue_diamond: :small_orange_diamond:
:small_red_triangle: :small_red_triangle_down: :shipit:
===! "Twemoji"
!!! info "Twemoji Specific Emoji"
Twemoji provides some non-standard emoji. We've made them available
following the naming patterns that EmojiOne follows as we are using
their short name index.
The emoji are either some that only Twemoji supports, rarely
supported by others, or emoji that have tone and/or gender
modifiers that aren't supported in the Unicode specifications.
We've also provided appropriate aliases for consistency with other
like emoji.
:pirate_flag: :shibuya:
:skier_tone1: :skier_tone2: :skier_tone3: :skier_tone4:
:skier_tone5:
:woman_levitate: :woman_levitate_tone1: :woman_levitate_tone2:
:woman_levitate_tone3: :woman_levitate_tone4:
:woman_levitate_tone5:
:woman_in_business_suit_levitating_tone1:
:woman_in_business_suit_levitating_tone2:
:woman_in_business_suit_levitating_tone3:
:woman_in_business_suit_levitating_tone4:
:woman_in_business_suit_levitating_tone5:
:woman_in_tuxedo: :woman_in_tuxedo_tone1: :woman_in_tuxedo_tone2:
:woman_in_tuxedo_tone3: :woman_in_tuxedo_tone4:
:woman_in_tuxedo_tone5:
:transgender_sign: :transgender_flag:
## [EscapeAll](https://facelessuser.github.io/pymdown-extensions/extensions/escapeall)
??? info "EscapeAll"
### Examples
If you ever have to stop and try to remember, *Can I escape this char?* or
*Will a backslash escape this?*, you are not alone. EscapeAll makes `\`
escape everything making such questions moot. Now instead of questioning
or looking up what can be escaped, you can expect that `\` will escape the
character following it. So if you need a literal `\`, just escape it:
`\\`. Keep in mind this will not escape things in code blocks of any kind.
!!! example "Escape Example"
=== "Output"
\W\e\ \c\a\n\ \e\s\c\a\p\e
\e\v\e\r\y\t\h\i\n\g\!\ \
\❤\😄
=== "Markdown"
```
\W\e\ \c\a\n\ \e\s\c\a\p\e
\e\v\e\r\y\t\h\i\n\g\!\ \
\❤\😄
```
## [InlineHilite](https://facelessuser.github.io/pymdown-extensions/extensions/inlinehilite)
??? info "InlineHilite"
### Examples
Like SuperFences, InlineHilite now provides a support for custom inline
blocks.
!!! example "Inline Math"
For more indepth information on how to reproduce the example above,
check out Arithmatex Documentation.
=== "Output"
`#!math p(x|y) = \frac{p(y|x)p(x)}{p(y)}`
=== "Markdown"
```
`#!math p(x|y) = \frac{p(y|x)p(x)}{p(y)}`
```
## [Keys](https://facelessuser.github.io/pymdown-extensions/extensions/keys)
??? info "Keys"
### Examples
=== "Alphanumeric and Space Keys"
<div align="center">
Name | Display | Aliases
------- | --------- | -------
`0` | ++0++ |
`1` | ++1++ |
`2` | ++2++ |
`3` | ++3++ |
`4` | ++4++ |
`5` | ++5++ |
`6` | ++6++ |
`7` | ++7++ |
`8` | ++8++ |
`9` | ++9++ |
`a` | ++a++ |
`b` | ++b++ |
`c` | ++c++ |
`d` | ++d++ |
`e` | ++e++ |
`f` | ++f++ |
`g` | ++g++ |
`h` | ++h++ |
`i` | ++i++ |
`j` | ++j++ |
`k` | ++k++ |
`l` | ++l++ |
`m` | ++m++ |
`n` | ++n++ |
`o` | ++o++ |
`p` | ++p++ |
`q` | ++q++ |
`r` | ++r++ |
`s` | ++s++ |
`t` | ++t++ |
`u` | ++u++ |
`v` | ++v++ |
`w` | ++w++ |
`x` | ++x++ |
`y` | ++y++ |
`z` | ++z++ |
`space` | ++space++ | `spc`
</div>
=== "Punctuation Keys"
<div align="center">
Name | Display | Aliases
--------------- | ----------------- | -------
`backslash` | ++backslash++ |
`bar` | ++bar++ | `pipe`
`brace-left` | ++brace-left++ | `open-brace`
`brace-right` | ++brace-right++ | `close-bracket`
`bracket-left` | ++bracket-left++ | `open-bracket`
`bracket-right` | ++bracket-right++ | `close-bracket`
`colon` | ++colon++ |
`comma` | ++comma++ |
`double-quote` | ++double-quote++ | `dblquote`
`equal` | ++equal++ |
`exclam` | ++exclam++ | `exclamation`
`grave` | ++grave++ | `grave-accent`
`greater` | ++greater++ | `greater-than`, `gt`
`less` | ++less++ | `less-than`, `lt`
`minus` | ++minus++ | `hyphen`
`period` | ++period++ |
`plus` | ++plus++ |
`question` | ++question++ | `question-mark`
`semicolon` | ++semicolon++ |
`single-quote` | ++single-quote++ |
`slash` | ++slash++ |
`tilde` | ++tilde++ |
`underscore` | ++underscore++ |
</div>
=== "Navigation Keys"
<div align="center">
Name | Display | Aliases
------------- | --------------- | -------
`arrow-up` | ++arrow-up++ | `up`
`arrow-down` | ++arrow-down++ | `down`
`arrow-left` | ++arrow-left++ | `left`
`arrow-right` | ++arrow-right++ | `right`
`page-up` | ++page-up++ | `prior`, `page-up`, `pg-up`
`page-down` | ++page-down++ | `next`, `page-dn`, `pg-dn`
`home` | ++home++ |
`end` | ++end++ |
`tab` | ++tab++ | `tabulator`
</div>
=== "Editing Keys"
<div align="center">
Name | Display | Aliases
----------- | ------------- | -------
`backspace` | ++backspace++ | `back`, `bksp`
`delete` | ++delete++ | `del`
`insert` | ++insert++ | `ins`
</div>
=== "Action Keys"
<div align="center">
Name | Display | Aliases
-------------- | -----------------| -------
`break` | ++break++ | `cancel`
`caps-lock` | ++caps-lock++ | `capital`, `cplk`
`clear` | ++clear++ | `clr`
`eject` | ++eject++ |
`enter` | ++enter++ | `return`
`escape` | ++escape++ | `esc`
`help` | ++help++ |
`print-screen` | ++print-screen++ | `prtsc`
`scroll-lock` | ++scroll-lock++ | `scroll`
</div>
=== "Numeric Keypad Keys"
<div align="center">
Name | Display | Aliases
--------------- | ----------------- | -------
`num0` | ++num0++ |
`num1` | ++num1++ |
`num2` | ++num2++ |
`num3` | ++num3++ |
`num4` | ++num4++ |
`num5` | ++num5++ |
`num6` | ++num6++ |
`num7` | ++num7++ |
`num8` | ++num8++ |
`num9` | ++num9++ |
`num-asterisk` | ++num-asterisk++ | `multiply`
`num-clear` | ++num-clear++ |
`num-delete` | ++num-delete++ | `num-del`
`num-equal` | ++num-equal++ |
`num-lock` | ++num-lock++ | `numlk`, `numlock`
`num-minus` | ++num-minus++ | `subtract`
`num-plus` | ++num-plus++ | `add`
`num-separator` | ++num-separator++ | `decimal`, `separator`
`num-slash` | ++num-slash++ | `divide`
`num-enter` | ++num-enter++ |
</div>
=== "Modifier keys"
<div align="center">
Name | Display | Aliases
--------------- | ----------------- | -------
`alt` | ++alt++ |
`left-alt` | ++left-alt++ | `lalt`
`right-alt` | ++right-alt++ | `ralt`
`alt-graph` | ++alt-graph++ | `altgr`
`command` | ++command++ | `cmd`
`left-command` | ++left-command++ | `lcommand`, `lcmd`, `left-cmd`
`right-command` | ++right-command++ | `rcommand`, `rcmd`, `right-cmd`
`control` | ++control++ | `ctrl`
`left-control` | ++left-control++ | `lcontrol`, `lctrl`, `left-ctrl`
`right-control` | ++right-control++ | `rcontrol`, `rctrl`, `right-ctrl`
`function` | ++function++ | `fn`
`meta` | ++meta++ |
`left-meta` | ++left-meta++ | `lmeta`
`right-meta` | ++right-meta++ | `rmeta`
`option` | ++option++ | `opt`
`left-option` | ++left-option++ | `loption`, `lopt`, `left-opt`
`right-option` | ++right-option++ | `roption`, `ropt`, `right-opt`
`shift` | ++shift++ |
`left-shift` | ++left-shift++ | `lshift`
`right-shift` | ++right-shift++ | `rshift`
`super` | ++super++ |
`left-super` | ++left-super++ | `lsuper`
`right-super` | ++right-super++ | `rsuper`
`windows` | ++windows++ | `win`
`left-windows` | ++left-windows++ | `lwindows`, `left-win`, `lwin`
`right-windows` | ++right-windows++ | `rwindows`, `right-win`, `rwin`
</div>
=== "Function keys"
<div align="center">
Name | Display | Aliases
----- | ------- | -------
`f1` | ++f1++ |
`f2` | ++f2++ |
`f3` | ++f3++ |
`f4` | ++f4++ |
`f5` | ++f5++ |
`f6` | ++f6++ |
`f7` | ++f7++ |
`f8` | ++f8++ |
`f9` | ++f9++ |
`f10` | ++f10++ |
`f11` | ++f11++ |
`f12` | ++f12++ |
`f13` | ++f13++ |
`f14` | ++f14++ |
`f15` | ++f15++ |
`f16` | ++f16++ |
`f17` | ++f17++ |
`f18` | ++f18++ |
`f19` | ++f19++ |
`f20` | ++f20++ |
`f21` | ++f21++ |
`f22` | ++f22++ |
`f23` | ++f23++ |
`f24` | ++f24++ |
</div>
=== "Extra Keys"
<div align="center">
Name | Display | Aliases
------------------- | --------------------- | -------
`backtab` | ++backtab++ | `bktab`
`browser-back` | ++browser-back++ |
`browser-favorites` | ++browser-favorites++ | `favorites`
`browser-forward` | ++browser-forward++ | `forward`
`browser-home` | ++browser-home++ |
`browser-refresh` | ++browser-refresh++ | `refresh`
`browser-search` | ++browser-search++ | `search`
`browser-stop` | ++browser-stop++ |
`copy` | ++copy++ |
`context-menu` | ++context-menu++ | `apps`, `menu`
`mail` | ++mail++ | `launch-mail`
`media` | ++media++ | `launch-media`
`media-next-track` | ++media-next-track++ | `next-track`
`media-pause` | ++media-pause++ | `pause`
`media-play` | ++media-play++ | `play`
`media-play-pause` | ++media-play-pause++ | `play-pause`
`media-prev-track` | ++media-prev-track++ | `prev-track`
`media-stop` | ++media-stop++ | `stop`
`print` | ++print++ |
`reset` | ++reset++ |
`select` | ++select++ |
`sleep` | ++sleep++ |
`volume-down` | ++volume-down++ | `vol-down`
`volume-mute` | ++volume-mute++ | `mute`
`volume-up` | ++volume-up++ | `vol-up`
`zoom` | ++zoom++ |
</div>
=== "Mouse"
<div align="center">
Name | Display | Aliases
--------------- | ----------------- | -------
`left-button` | ++left-button++ | `lbutton`
`middle-button` | ++middle-button++ | `mbutton`
`right-button` | ++right-button++ | `rbutton`
`x-button1` | ++x-button1++ | `xbutton1`
`x-button2` | ++x-button2++ | `xbutton2`
</div>
## [MagicLink](https://facelessuser.github.io/pymdown-extensions/extensions/magiclink)
??? info "MagicLink"
!!! note "Icons"
This documentation implements additional styling with CSS that inserts
icons before special links, such as GitHub, logos, bug icons, etc.
MagicLink does not inject icons or CSS to insert icons, but it is left
to the user to implement (if desired) via the provided [classes](#css).
User's are free to reference this documentation's source to learn how.
### Auto-Linking
MagicLink supports auto-linking HTTP, FTP and email links. You can specify
these links in raw text and they should get auto-linked. There are some
limitations placed on MagicLink to keep it from aggressively auto-linking
text that is not part of links. If you have a link that cannot be detected,
you can always use the old style angle bracketed link format: `#!md
<https://www.link.com>`.
!!! example "Auto-Linking Example"
=== "Output"
- Just paste links directly in the document like this: https://google.com.
- Or even an email address: fake.email@email.com.
=== "Markdown"
```
- Just paste links directly in the document like this: https://google.com.
- Or even an email address: fake.email@email.com.
```
### Repository Link Shortener
MagicLink can also recognize issue, pull request, commit, and compare
links, and render them in the same output format as the repository
shortcut links feature.
If we specify long form URLs from external providers, they will be
shortened appropriately.
!!! example "External Provider Example"
=== "Output"
- https://github.com/facelessuser
- https://github.com/facelessuser/pymdown-extensions
- https://gitlab.com/pycqa/flake8/issues/385
- https://bitbucket.org/mrabarnett/mrab-regex/issues/260/extremely-slow-matching-using-ignorecase
=== "Markdown"
```
- https://github.com/facelessuser
- https://github.com/facelessuser/pymdown-extensions
- https://gitlab.com/pycqa/flake8/issues/385
- https://bitbucket.org/mrabarnett/mrab-regex/issues/260/extremely-slow-matching-using-ignorecase
```
When specifying links that reference the configured `provider`, `user`, and
`repo`, some links will be shortened differently in light of that context.
!!! example "Internal Provider Example"
=== "Output"
- https://github.com/facelessuser/pymdown-extensions/issues/1
- https://github.com/facelessuser/pymdown-extensions/pull/13
- https://github.com/facelessuser/pymdown-extensions/commit/3f6b07a8eeaa9d606115758d90f55fec565d4e2a
- https://github.com/facelessuser/pymdown-extensions/compare/e2ed7e0b3973f3f9eb7a26b8ef7ae514eebfe0d2...90b6fb8711e75732f987982cc024e9bb0111beac
- https://github.com/facelessuser/Rummage/commit/181c06d1f11fa29961b334e90606ed1f1ec7a7cc
=== "Markdown"
```
- https://github.com/facelessuser/pymdown-extensions/issues/1
- https://github.com/facelessuser/pymdown-extensions/pull/13
- https://github.com/facelessuser/pymdown-extensions/commit/3f6b07a8eeaa9d606115758d90f55fec565d4e2a
- https://github.com/facelessuser/pymdown-extensions/compare/e2ed7e0b3973f3f9eb7a26b8ef7ae514eebfe0d2...90b6fb8711e75732f987982cc024e9bb0111beac
- https://github.com/facelessuser/Rummage/commit/181c06d1f11fa29961b334e90606ed1f1ec7a7cc
```
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment