diff --git a/preview/.gitignore b/preview/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..f59ec20aabf5842d237244ece8c81ab184faeac1
--- /dev/null
+++ b/preview/.gitignore
@@ -0,0 +1 @@
+*
\ No newline at end of file
diff --git a/preview/docs/_data/mkdocs_template.yaml b/preview/docs/_data/mkdocs_template.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..8435f4ffb408616ddb2259b2ee6575de83ac73c9
--- /dev/null
+++ b/preview/docs/_data/mkdocs_template.yaml
@@ -0,0 +1,49 @@
+# 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
diff --git a/preview/docs/_data/vars.yaml b/preview/docs/_data/vars.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..73bf21779dff38d42e11da04f2141aa05a71dde6
--- /dev/null
+++ b/preview/docs/_data/vars.yaml
@@ -0,0 +1,97 @@
+### 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 ###
diff --git a/preview/docs/example.md b/preview/docs/example.md
new file mode 100644
index 0000000000000000000000000000000000000000..e1b78a0bab46e5e1097e140f18932eb6ad4c157e
--- /dev/null
+++ b/preview/docs/example.md
@@ -0,0 +1,72 @@
+---
+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>
diff --git a/preview/docs/preview_example/arithmatex.md b/preview/docs/preview_example/arithmatex.md
new file mode 100644
index 0000000000000000000000000000000000000000..e5c50447ee9785f037866f6c494dd5c827fc48fe
--- /dev/null
+++ b/preview/docs/preview_example/arithmatex.md
@@ -0,0 +1,90 @@
+## [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
diff --git a/preview/docs/preview_example/betterem.md b/preview/docs/preview_example/betterem.md
new file mode 100644
index 0000000000000000000000000000000000000000..94bc834e796a9635d8b84af2401d2d88d89c3314
--- /dev/null
+++ b/preview/docs/preview_example/betterem.md
@@ -0,0 +1,127 @@
+## [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**
+ ```
+
diff --git a/preview/docs/preview_example/caret.md b/preview/docs/preview_example/caret.md
new file mode 100644
index 0000000000000000000000000000000000000000..d89c4fc2ad68b1e23cbd4336d817b866363beb4f
--- /dev/null
+++ b/preview/docs/preview_example/caret.md
@@ -0,0 +1,39 @@
+## [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^
+ ```
diff --git a/preview/docs/preview_example/code_sample.md b/preview/docs/preview_example/code_sample.md
new file mode 100644
index 0000000000000000000000000000000000000000..f0cb5befefa3ab700e710f65b97340f5a6a3edfb
--- /dev/null
+++ b/preview/docs/preview_example/code_sample.md
@@ -0,0 +1,44 @@
+## 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 %}
+ ```
+
diff --git a/preview/docs/preview_example/code_sample/css_sample.css b/preview/docs/preview_example/code_sample/css_sample.css
new file mode 100644
index 0000000000000000000000000000000000000000..7b3de0a43772b51d7a020504d38dbb5a2d6cb0d3
--- /dev/null
+++ b/preview/docs/preview_example/code_sample/css_sample.css
@@ -0,0 +1,112 @@
+@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;
+}
diff --git a/preview/docs/preview_example/code_sample/html_sample.html b/preview/docs/preview_example/code_sample/html_sample.html
new file mode 100644
index 0000000000000000000000000000000000000000..5e8c666b635d1b2f86ec93a2b5f6de8244e391b7
--- /dev/null
+++ b/preview/docs/preview_example/code_sample/html_sample.html
@@ -0,0 +1,660 @@
+<!-- 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 <canvas> 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 <article>?
+</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&source=s_q&hl=es-419&geocode=&q=buenos+aires&sll=37.0625,-95.677068&sspn=38.638819,80.859375&t=h&ie=UTF8&hq=&hnear=Buenos+Aires,+Argentina&z=11&ll=-34.603723,-58.381593&output=embed">
+</iframe><br />
+<small>
+ <a href="https://maps.google.com/maps?f=q&source=embed&hl=es-419&geocode=&q=buenos+aires&sll=37.0625,-95.677068&sspn=38.638819,80.859375&t=h&ie=UTF8&hq=&hnear=Buenos+Aires,+Argentina&z=11&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 <mark> 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
diff --git a/preview/docs/preview_example/code_sample/java_sample.java b/preview/docs/preview_example/code_sample/java_sample.java
new file mode 100644
index 0000000000000000000000000000000000000000..46db36dfe5bb7a4be0cacea315a8cf8b8425b921
--- /dev/null
+++ b/preview/docs/preview_example/code_sample/java_sample.java
@@ -0,0 +1,27 @@
+// 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>
+
diff --git a/preview/docs/preview_example/code_sample/javascript_sample.js b/preview/docs/preview_example/code_sample/javascript_sample.js
new file mode 100644
index 0000000000000000000000000000000000000000..e1d051a04293d51fec448e6ec400e4abee87cd51
--- /dev/null
+++ b/preview/docs/preview_example/code_sample/javascript_sample.js
@@ -0,0 +1,67 @@
+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);
diff --git a/preview/docs/preview_example/code_sample/python_sample.py b/preview/docs/preview_example/code_sample/python_sample.py
new file mode 100644
index 0000000000000000000000000000000000000000..d79153dd8bee8dacf4707aa48e4a7a739c6ac4eb
--- /dev/null
+++ b/preview/docs/preview_example/code_sample/python_sample.py
@@ -0,0 +1,251 @@
+# -*- 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
diff --git a/preview/docs/preview_example/critic.md b/preview/docs/preview_example/critic.md
new file mode 100644
index 0000000000000000000000000000000000000000..233852100ff09e843cf81b184736d5bb5d4319c8
--- /dev/null
+++ b/preview/docs/preview_example/critic.md
@@ -0,0 +1,42 @@
+## [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
+
+ ++}
diff --git a/preview/docs/preview_example/details.md b/preview/docs/preview_example/details.md
new file mode 100644
index 0000000000000000000000000000000000000000..98e1e5b3c8742080ad5d5bb67050f677e5f5827f
--- /dev/null
+++ b/preview/docs/preview_example/details.md
@@ -0,0 +1,58 @@
+## [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
+
+
+
diff --git a/preview/docs/preview_example/emoji.md b/preview/docs/preview_example/emoji.md
new file mode 100644
index 0000000000000000000000000000000000000000..eb8d04cc478027d25e9455ee3a450ff322625495
--- /dev/null
+++ b/preview/docs/preview_example/emoji.md
@@ -0,0 +1,221 @@
+## [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:
+
+
diff --git a/preview/docs/preview_example/escapeall.md b/preview/docs/preview_example/escapeall.md
new file mode 100644
index 0000000000000000000000000000000000000000..7e3a551b615f4f8e7eee2838ef1c2cb430b5b610
--- /dev/null
+++ b/preview/docs/preview_example/escapeall.md
@@ -0,0 +1,26 @@
+## [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\!\ \
+ \â¤\😄
+ ```
diff --git a/preview/docs/preview_example/inlinehilite.md b/preview/docs/preview_example/inlinehilite.md
new file mode 100644
index 0000000000000000000000000000000000000000..5ef760f29cd3ab89bc3898c779e67237cd8e30e0
--- /dev/null
+++ b/preview/docs/preview_example/inlinehilite.md
@@ -0,0 +1,21 @@
+## [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)}`
+ ```
diff --git a/preview/docs/preview_example/keys.md b/preview/docs/preview_example/keys.md
new file mode 100644
index 0000000000000000000000000000000000000000..3926fc970ab95d52d37f3edb061d04801b4f0a4f
--- /dev/null
+++ b/preview/docs/preview_example/keys.md
@@ -0,0 +1,278 @@
+## [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>
+
diff --git a/preview/docs/preview_example/magick.md b/preview/docs/preview_example/magick.md
new file mode 100644
index 0000000000000000000000000000000000000000..7ecaa6ccd01b699426b57bb54648451d3e9321c8
--- /dev/null
+++ b/preview/docs/preview_example/magick.md
@@ -0,0 +1,78 @@
+## [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
+ ```
diff --git a/preview/docs/preview_example/mark.md b/preview/docs/preview_example/mark.md
new file mode 100644
index 0000000000000000000000000000000000000000..eb6d561234782a248f7beb8acc454f077db02ff1
--- /dev/null
+++ b/preview/docs/preview_example/mark.md
@@ -0,0 +1,27 @@
+## [Mark](https://facelessuser.github.io/pymdown-extensions/extensions/mark)
+
+??? info "Mark"
+
+ ### Examples
+
+ Mark adds the ability to insert `#!html <mark></mark>` tags. The syntax
+ requires the text to be surrounded by double equal signs. It can optionally
+ be configured to use smart logic. Syntax behavior for smart and non-smart
+ variants of **mark** models that of BetterEm.
+
+ To Mark some text, simply surround the text with double `=`.
+
+ !!! example "Mark Example"
+
+ === "Output"
+ ==mark me==
+
+ ==smart==mark==
+
+ === "Markdown"
+ ```
+ ==mark me==
+
+ ==smart==mark==
+ ```
+
diff --git a/preview/docs/preview_example/markdown.md b/preview/docs/preview_example/markdown.md
new file mode 100644
index 0000000000000000000000000000000000000000..f75b788c3684f6e7cecf5f14245cb57d86cbd905
--- /dev/null
+++ b/preview/docs/preview_example/markdown.md
@@ -0,0 +1,382 @@
+## Basic Markdown
+
+??? info "Basic Markdown"
+
+ ### Basic Markdown
+
+ #### Headings
+
+ === "Output"
+
+ ## h2 Heading
+ ### h3 Heading
+ #### h4 Heading
+ ##### h5 Heading
+ ###### h6 Heading
+
+ === "Markdown"
+
+ ````markdown
+ ## h2 Heading
+ #### h3 Heading
+ ##### h4 Heading
+ ###### h5 Heading
+ ####### h6 Heading
+ ````
+
+ #### Horizontal Rules
+
+ === "Output"
+
+ ___
+
+ ---
+
+ ***
+
+ === "Markdown"
+
+ ````markdown
+ ___
+
+ ---
+
+ ***
+ ````
+
+
+ #### Typographic replacements
+
+ === "Output"
+
+ (c) (C) (r) (R) (tm) (TM) (p) (P) +-
+
+ test.. test... test..... test?..... test!....
+
+ !!!!!! ???? ,, -- ---
+
+ "Smartypants, double quotes" and 'single quotes'
+
+ === "Markdown"
+ ````markdown
+
+ (c) (C) (r) (R) (tm) (TM) (p) (P) +-
+
+ test.. test... test..... test?..... test!....
+
+ !!!!!! ???? ,, -- ---
+
+ "Smartypants, double quotes" and 'single quotes'
+
+ ````
+
+ #### Emphasis
+
+ === "Output"
+
+ **This is bold text**
+
+ __This is bold text__
+
+ *This is italic text*
+
+ _This is italic text_
+
+ ~~Strikethrough~~
+
+ === "Markdown"
+ ````markdown
+
+ **This is bold text**
+
+ __This is bold text__
+
+ *This is italic text*
+
+ _This is italic text_
+
+ ~~Strikethrough~~
+
+ ````
+
+ #### Blockquotes
+
+ === "Output"
+
+ > Blockquotes can also be nested...
+ >> ...by using additional greater-than signs right next to each other...
+ > > > ...or with spaces between arrows.
+
+ === "Markdown"
+ ````markdown
+
+ > Blockquotes can also be nested...
+ >> ...by using additional greater-than signs right next to each other...
+ > > > ...or with spaces between arrows.
+ ````
+
+
+ #### Lists
+
+ === "Output"
+
+ Unordered
+
+ + Create a list by starting a line with `+`, `-`, or `*`
+ + Sub-lists are made by indenting 2 spaces:
+ - Marker character change forces new list start:
+ * Ac tristique libero volutpat at
+ + Facilisis in pretium nisl aliquet
+ - Nulla volutpat aliquam velit
+ + Very easy!
+
+ Ordered
+
+ 1. Lorem ipsum dolor sit amet
+ 2. Consectetur adipiscing elit
+ 3. Integer molestie lorem at massa
+
+
+ 1. You can use sequential numbers...
+ 1. ...or keep all the numbers as `1.`
+
+ Start numbering with offset:
+
+ 57. foo
+ 1. bar
+
+ === "Markdown"
+ ````markdown
+
+ Unordered
+
+ + Create a list by starting a line with `+`, `-`, or `*`
+ + Sub-lists are made by indenting 2 spaces:
+ - Marker character change forces new list start:
+ * Ac tristique libero volutpat at
+ + Facilisis in pretium nisl aliquet
+ - Nulla volutpat aliquam velit
+ + Very easy!
+
+ Ordered
+
+ 1. Lorem ipsum dolor sit amet
+ 2. Consectetur adipiscing elit
+ 3. Integer molestie lorem at massa
+
+
+ 1. You can use sequential numbers...
+ 1. ...or keep all the numbers as `1.`
+
+ Start numbering with offset:
+
+ 57. foo
+ 1. bar
+ ````
+
+
+ #### Code
+
+ === "Output"
+
+ Inline `code`
+
+ Indented code
+
+ // Some comments
+ line 1 of code
+ line 2 of code
+ line 3 of code
+
+
+ Block code "fences"
+
+ ```
+ Sample text here...
+ ```
+
+ Syntax highlighting
+
+ ```js
+ var foo = function (bar) {
+ return bar++;
+ };
+
+ console.log(foo(5));
+ ```
+
+ === "Markdown"
+ ````markdown
+
+ Inline `code`
+
+ Indented code
+
+ // Some comments
+ line 1 of code
+ line 2 of code
+ line 3 of code
+
+
+ Block code "fences"
+
+ ```
+ Sample text here...
+ ```
+
+ Syntax highlighting
+
+ ```js
+ var foo = function (bar) {
+ return bar++;
+ };
+
+ console.log(foo(5));
+ ```
+ ````
+
+ #### Tables
+
+ === "Output"
+
+ | Option | Description |
+ | ------ | ----------- |
+ | data | path to data files to supply the data that will be passed into templates. |
+ | engine | engine to be used for processing templates. Handlebars is the default. |
+ | ext | extension to be used for dest files. |
+
+ Right aligned columns
+
+ | Option | Description |
+ | ------: | -----------: |
+ | data | path to data files to supply the data that will be passed into templates. |
+ | engine | engine to be used for processing templates. Handlebars is the default. |
+ | ext | extension to be used for dest files. |
+
+
+ === "Markdown"
+ ````markdown
+
+ | Option | Description |
+ | ------ | ----------- |
+ | data | path to data files to supply the data that will be passed into templates. |
+ | engine | engine to be used for processing templates. Handlebars is the default. |
+ | ext | extension to be used for dest files. |
+
+ Right aligned columns
+
+ | Option | Description |
+ | ------: | -----------: |
+ | data | path to data files to supply the data that will be passed into templates. |
+ | engine | engine to be used for processing templates. Handlebars is the default. |
+ | ext | extension to be used for dest files. |
+
+ ````
+
+ #### Links
+
+ === "Output"
+
+ [link text](http://dev.nodeca.com)
+
+ [link with title](http://nodeca.github.io/pica/demo/ "title text!")
+
+ Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
+
+ === "Markdown"
+
+ ````markdown
+
+ [link text](http://dev.nodeca.com)
+
+ [link with title](http://nodeca.github.io/pica/demo/ "title text!")
+
+ Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
+
+ ````
+
+
+ #### Images
+
+ === "Output"
+
+ Like links, Images also have a footnote style syntax
+
+ ![Alt text][id]
+
+ With a reference later in the document defining the URL location:
+
+ [id]: https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat"
+
+ === "Markdown"
+ ````markdown
+
+ Like links, Images also have a footnote style syntax
+
+ ![Alt text][id]
+
+ With a reference later in the document defining the URL location:
+
+ [id]: https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat"
+
+ ````
+
+??? info "Markdown Extension"
+
+ ### Markdown Extension
+
+ #### Footnotes
+
+ === "Output"
+
+ Footnote 1 link[^first].
+
+ Footnote 2 link[^second].
+
+ Inline footnote^[Text of inline footnote] definition.
+
+ Duplicated footnote reference[^second].
+
+ [^first]: Footnote **can have markup**
+
+ and multiple paragraphs.
+
+ [^second]: Footnote text.
+
+ === "Markdown"
+ ````markdown
+
+ Footnote 1 link[^first].
+
+ Footnote 2 link[^second].
+
+ Inline footnote^[Text of inline footnote] definition.
+
+ Duplicated footnote reference[^second].
+
+ [^first]: Footnote **can have markup**
+
+ and multiple paragraphs.
+
+ [^second]: Footnote text.
+ ````
+
+
+ #### Abbreviations
+
+ === "Output"
+ This is HTML abbreviation example.
+
+ It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.
+
+ *[HTML]: Hyper Text Markup Language
+
+ === "Markdown"
+ ````markdown
+ This is HTML abbreviation example.
+
+ It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.
+
+ *[HTML]: Hyper Text Markup Language
+
+ ````
diff --git a/preview/docs/preview_example/progressbar.md b/preview/docs/preview_example/progressbar.md
new file mode 100644
index 0000000000000000000000000000000000000000..10700ac33b81dbe26774f3f915705e672a5c4a82
--- /dev/null
+++ b/preview/docs/preview_example/progressbar.md
@@ -0,0 +1,73 @@
+## [ProgressBar](https://facelessuser.github.io/pymdown-extensions/extensions/progressbar)
+
+
+??? info "ProgressBar"
+
+ ### Overview
+
+ ProgressBar is an extension that adds support for progress/status bars. It
+ can take percentages or fractions, and it can optionally generate classes
+ for percentages at specific value levels. It also works with Python
+ Markdown's built in `attr_list` extension.
+
+ The basic syntax for progress bars is: `[= <percentage or fraction>
+ "optional single or double quoted title"]`. The opening `[` can be
+ followed by one or more `=` characters. After the `=` char(s) the
+ percentage is specified as either a fraction or percentage and can
+ optionally be followed by a title surrounded in either double quotes or
+ single quotes.
+
+ !!! example "Progress Bar Example"
+
+ === "Output"
+ [=0% "0%"]
+ [=5% "5%"]
+ [=25% "25%"]
+ [=45% "45%"]
+ [=65% "65%"]
+ [=85% "85%"]
+ [=100% "100%"]
+
+ === "Markdown"
+ ```
+ [=0% "0%"]
+ [=5% "5%"]
+ [=25% "25%"]
+ [=45% "45%"]
+ [=65% "65%"]
+ [=85% "85%"]
+ [=100% "100%"]
+ ```
+
+ Though progress bars are rendered as block items, it accepts `attr_list`'s
+ inline format. `markdown.extensions.attr_list` must be enabled for the
+ following to work.
+
+ !!! example "Progress Bar with Attributes"
+
+ === "Output"
+ [=85% "85%"]{: .candystripe}
+ [=100% "100%"]{: .candystripe .candystripe-animate}
+
+ [=0%]{: .thin}
+ [=5%]{: .thin}
+ [=25%]{: .thin}
+ [=45%]{: .thin}
+ [=65%]{: .thin}
+ [=85%]{: .thin}
+ [=100%]{: .thin}
+
+ === "Markdown"
+ ```
+ [=85% "85%"]{: .candystripe}
+ [=100% "100%"]{: .candystripe .candystripe-animate}
+
+ [=0%]{: .thin}
+ [=5%]{: .thin}
+ [=25%]{: .thin}
+ [=45%]{: .thin}
+ [=65%]{: .thin}
+ [=85%]{: .thin}
+ [=100%]{: .thin}
+ ```
+
diff --git a/preview/docs/preview_example/saneheader.md b/preview/docs/preview_example/saneheader.md
new file mode 100644
index 0000000000000000000000000000000000000000..3b70aec8db5a1e10c37142f36b4b443f10df68e6
--- /dev/null
+++ b/preview/docs/preview_example/saneheader.md
@@ -0,0 +1,26 @@
+## [SaneHeaders](https://facelessuser.github.io/pymdown-extensions/extensions/saneheaders)
+
+??? info "SaneHeaders"
+ ### Examples
+
+
+ The syntax when using SaneHeaders is exactly like Python Markdown's default
+ logic with the only exception being that SaneHeaders will not treat hashes
+ at the beginning of a line as a header if they do not have space after
+ them.
+
+ In Python Markdown, both of these are treated as headers:
+
+ ```
+ ## Header
+
+ ##Also a Header
+ ```
+
+ With SaneHeaders, only the first is a header:
+
+ ```
+ ## Header
+
+ ##Not a Header
+ ```
diff --git a/preview/docs/preview_example/smartsymbols.md b/preview/docs/preview_example/smartsymbols.md
new file mode 100644
index 0000000000000000000000000000000000000000..196615844cdcba8baf39aca388e04ca5769da479
--- /dev/null
+++ b/preview/docs/preview_example/smartsymbols.md
@@ -0,0 +1,24 @@
+## [SmartSymbols](https://facelessuser.github.io/pymdown-extensions/extensions/smartsymbols)
+
+??? info "SmartSymbols"
+ ### Examples
+
+ SmartSymbols adds syntax for creating special characters such as
+ trademarks, arrows, fractions, etc. It basically allows for more
+ "smarty-pants" like replacements. It is meant to be used along side Python
+ Markdown's `smarty` extension not to replace.
+
+ Markdown | Result
+ -------------- |--------
+ `(tm)` | (tm)
+ `(c)` | (c)
+ `(r)` | (r)
+ `c/o` | c/o
+ `+/-` | +/-
+ `-->` | -->
+ `<--` | <--
+ `<-->` | <-->
+ `=/=` | =/=
+ `1/4, etc.` | 1/4, etc.
+ `1st 2nd etc.` |1st 2nd etc.
+
diff --git a/preview/docs/preview_example/striphtml.md b/preview/docs/preview_example/striphtml.md
new file mode 100644
index 0000000000000000000000000000000000000000..34e4fecebdd2ea8f611256abe9dfa0ae7071596f
--- /dev/null
+++ b/preview/docs/preview_example/striphtml.md
@@ -0,0 +1,26 @@
+## [StripHTML](https://facelessuser.github.io/pymdown-extensions/extensions/striphtml)
+
+??? info "StripHTML"
+
+ ### Examples
+
+ StripHTML (formally known as PlainHTML) is a simple extension that is run
+ at the end of post-processing. It searches the final output stripping out
+ unwanted comments and/or tag attributes. Though it does its best to be
+ loaded at the very end of the process, it helps to include this one last
+ when loading up your extensions.
+
+ !!! example "Strip Comment"
+
+ === "HTML"
+ ```html
+ <p>Here is a <strong>test</strong>.</p>
+ ```
+
+ === "Markdown"
+ ```
+ <!-- We are only allowing strip_comments and strip_js_on_attributes
+ in this example. -->
+ Here is a <strong onclick="myFunction();">test</strong>.
+ ```
+
diff --git a/preview/docs/preview_example/superfences.md b/preview/docs/preview_example/superfences.md
new file mode 100644
index 0000000000000000000000000000000000000000..e82262ad87884b5ba89dc0904750861fa9f7c310
--- /dev/null
+++ b/preview/docs/preview_example/superfences.md
@@ -0,0 +1,198 @@
+## [SuperFences](https://facelessuser.github.io/pymdown-extensions/extensions/superfences)
+
+??? info "SuperFences"
+
+ ### Preserve Tabs
+
+ !!! example "Tabs in Content"
+
+ === "Output"
+ ```
+ ============================================================
+ T Tp Sp D Dp S D7 T
+ ------------------------------------------------------------
+ A F#m Bm E C#m D E7 A
+ A# Gm Cm F Dm D# F7 A#
+ Bâ™ Gm Cm F Dm Eâ™m F7 Bâ™
+ ```
+
+ === "Markdown"
+ ````
+ ```
+ ============================================================
+ T Tp Sp D Dp S D7 T
+ ------------------------------------------------------------
+ A F#m Bm E C#m D E7 A
+ A# Gm Cm F Dm D# F7 A#
+ Bâ™ Gm Cm F Dm Eâ™m F7 Bâ™
+ ```
+ ````
+
+ ### Code Highlighting
+
+ !!! example "Highlight Example"
+
+ === "Output"
+ ```py3
+ import foo.bar
+ ```
+
+ === "Markdown"
+ ````
+ ```py3
+ import foo.bar
+ ```
+ ````
+
+ ### Showing Line Numbers
+
+ !!! example "Line Number Example"
+
+ === "Output"
+ ``` {linenums="1"}
+ import foo.bar
+ ```
+
+ === "Markdown"
+ ````
+ ``` {linenums="1"}
+ import foo.bar
+ ```
+ ````
+
+ !!! example "Nth Line Example"
+
+ === "Output"
+ ``` {linenums="2 2"}
+ """Some file."""
+ import foo.bar
+ import boo.baz
+ import foo.bar.baz
+ ```
+
+ === "Markdown"
+ ````
+ ``` {linenums="2 2"}
+ """Some file."""
+ import foo.bar
+ import boo.baz
+ import foo.bar.baz
+ ```
+ ````
+
+ !!! example "Special Line Example"
+
+ === "Output"
+ ``` {linenums="1 1 2"}
+ """Some file."""
+ import foo.bar
+ import boo.baz
+ import foo.bar.baz
+ ```
+
+ === "Markdown"
+ ````
+ ``` {linenums="1 1 2"}
+ """Some file."""
+ import foo.bar
+ import boo.baz
+ import foo.bar.baz
+ ```
+ ````
+
+ ### Highlighting Lines
+
+
+ !!! example "Highlight Lines Example"
+
+ === "Output"
+ ```{.py3 hl_lines="1 3"}
+ """Some file."""
+ import foo.bar
+ import boo.baz
+ import foo.bar.baz
+ ```
+
+ === "Markdown"
+ ````
+ ```{.py3 hl_lines="1 3"}
+ """Some file."""
+ import foo.bar
+ import boo.baz
+ import foo.bar.baz
+ ```
+ ````
+
+ !!! example "Highlight Lines with Line Numbers Example"
+
+ === "Output"
+ ```{.py3 hl_lines="1 3" linenums="2"}
+ """Some file."""
+ import foo.bar
+ import boo.baz
+ import foo.bar.baz
+ ```
+
+ === "Markdown"
+ ````
+ ```{.py3 hl_lines="1 3" linenums="2"}
+ """Some file."""
+ import foo.bar
+ import boo.baz
+ import foo.bar.baz
+ ```
+ ````
+
+ !!! example "Highlight Ranges"
+
+ === "Output"
+ ```{.py3 hl_lines="1-2 5 7-8"}
+ import foo
+ import boo.baz
+ import foo.bar.baz
+
+ class Foo:
+ def __init__(self):
+ self.foo = None
+ self.bar = None
+ self.baz = None
+ ```
+
+ === "Markdown"
+ ````
+ ```{.py3 hl_lines="1-2 5 7-8"}
+ import foo
+ import boo.baz
+ import foo.bar.baz
+
+ class Foo:
+ def __init__(self):
+ self.foo = None
+ self.bar = None
+ self.baz = None
+ ```
+ ````
+
+ ### Custom Fences
+
+ !!! example "Flow Chart Example"
+
+ === "Output"
+ ```mermaid
+ graph TD
+ A[Hard] -->|Text| B(Round)
+ B --> C{Decision}
+ C -->|One| D[Result 1]
+ C -->|Two| E[Result 2]
+ ```
+
+ === "Markdown"
+ ````
+ ```mermaid
+ graph TD
+ A[Hard] -->|Text| B(Round)
+ B --> C{Decision}
+ C -->|One| D[Result 1]
+ C -->|Two| E[Result 2]
+ ```
+ ````
diff --git a/preview/docs/preview_example/tabbed.md b/preview/docs/preview_example/tabbed.md
new file mode 100644
index 0000000000000000000000000000000000000000..932fe990db9408d682f2a83a7535cd7220425459
--- /dev/null
+++ b/preview/docs/preview_example/tabbed.md
@@ -0,0 +1,86 @@
+## [Tabbed](https://facelessuser.github.io/pymdown-extensions/extensions/tabbed)
+
+??? info "Tabbed"
+
+ ### Examples
+
+ Tabs start with `===` to signify a tab followed by a quoted title.
+ Consecutive tabs are grouped into a tab set.
+
+ !!! example "Example Tabs"
+
+ === "Output"
+ === "Tab 1"
+ Markdown **content**.
+
+ Multiple paragraphs.
+
+ === "Tab 2"
+ More Markdown **content**.
+
+ - list item a
+ - list item b
+
+ === "Markdown"
+ ```
+ === "Tab 1"
+ Markdown **content**.
+
+ Multiple paragraphs.
+
+ === "Tab 2"
+ More Markdown **content**.
+
+ - list item a
+ - list item b
+ ```
+
+ In the rare case that you want to follow two separate tab sets right after
+ each other, you can explicitly mark the start of a new tab set with `!`.
+
+
+ !!! example "Example Tab Breaks"
+
+ === "Output"
+ === "Tab 1"
+ Markdown **content**.
+
+ Multiple paragraphs.
+
+ === "Tab 2"
+ More Markdown **content**.
+
+ - list item a
+ - list item b
+
+ ===! "Tab A"
+ Different tab set.
+
+ === "Tab B"
+ ```
+ More content.
+ ```
+
+ === "Markdown"
+
+ ```
+ === "Tab 1"
+ Markdown **content**.
+
+ Multiple paragraphs.
+
+ === "Tab 2"
+ More Markdown **content**.
+
+ - list item a
+ - list item b
+
+ ===! "Tab A"
+ Different tab set.
+
+ === "Tab B"
+ ```
+ More content.
+ ```
+ ```
+
diff --git a/preview/docs/preview_example/tasklist.md b/preview/docs/preview_example/tasklist.md
new file mode 100644
index 0000000000000000000000000000000000000000..bbcdec4b18550df0c69b88ec27a310b1534ecad7
--- /dev/null
+++ b/preview/docs/preview_example/tasklist.md
@@ -0,0 +1,43 @@
+## [Tasklist](https://facelessuser.github.io/pymdown-extensions/extensions/tasklist)
+
+??? info "Tasklist"
+ ### Overview
+
+ The Tasklist extension adds GFM style task lists. They follow the same
+ syntax as GFM. Simply start each list item with a square bracket pair
+ containing either a space (an unchecked item) or a `x` (a checked item).
+
+ !!! example "Task List Example"
+
+ All task lists in this documentation are generated with [`custom_checkbox`](#options) enabled.
+
+ === "Output"
+ Task List
+
+ - [X] item 1
+ * [X] item A
+ * [ ] item B
+ more text
+ + [x] item a
+ + [ ] item b
+ + [x] item c
+ * [X] item C
+ - [ ] item 2
+ - [ ] item 3
+
+
+ === "Markdown"
+ ```
+ Task List
+
+ - [X] item 1
+ * [X] item A
+ * [ ] item B
+ more text
+ + [x] item a
+ + [ ] item b
+ + [x] item c
+ * [X] item C
+ - [ ] item 2
+ - [ ] item 3
+ ```
diff --git a/preview/docs/preview_example/tilde.md b/preview/docs/preview_example/tilde.md
new file mode 100644
index 0000000000000000000000000000000000000000..c54c92e39205cd26f909f62881b93345cae57948
--- /dev/null
+++ b/preview/docs/preview_example/tilde.md
@@ -0,0 +1,32 @@
+## [Tilde](https://facelessuser.github.io/pymdown-extensions/extensions/tilde)
+
+??? info "Tilde"
+
+ ### Delete
+
+ !!! example "Delete Example"
+
+ === "Output"
+ ~~Delete me~~
+
+ === "Markdown"
+ ```
+ ~~Delete me~~
+ ```
+
+ ### Subscript
+
+ !!! example "Subscript Example"
+
+ === "Output"
+ CH~3~CH~2~OH
+
+ text~a\ subscript~
+
+ === "Markdown"
+ ```
+ CH~3~CH~2~OH
+
+ text~a\ subscript~
+ ```
+