diff --git a/404.html b/404.html index 88054b32d0..b57731aacc 100644 --- a/404.html +++ b/404.html @@ -8,21 +8,21 @@ 404 Page not found :: Hugo Relearn Theme - + - - - - - - - - - - - - - + + + + + + + + + + + + + - + +
diff --git a/basics/changelog/index.html b/basics/changelog/index.html index 5e20a811e3..2993dac398 100644 --- a/basics/changelog/index.html +++ b/basics/changelog/index.html @@ -9,21 +9,21 @@ Hugo Relearn Theme - + - - - - - - - - - - - - - + + + + + + + + + + + + + - + +
@@ -1455,12 +1460,12 @@ - - - - - - + + + + + +
- - - - + + + + diff --git a/basics/changelog/index.print.html b/basics/changelog/index.print.html index c9b74a8425..6fa798b08a 100644 --- a/basics/changelog/index.print.html +++ b/basics/changelog/index.print.html @@ -9,22 +9,22 @@ Hugo Relearn Theme - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + +
@@ -901,9 +906,9 @@
- - - - + + + + diff --git a/basics/configuration/index.html b/basics/configuration/index.html index 726a7625f3..17815e6ee7 100644 --- a/basics/configuration/index.html +++ b/basics/configuration/index.html @@ -10,21 +10,21 @@ Configuration :: Hugo Relearn Theme - + - - - - - - - - - - - - - + + + + + + + + + + + + + - + +
@@ -355,12 +360,12 @@ default values:

- - - - - - + + + + + +
- - - - + + + + diff --git a/basics/configuration/index.print.html b/basics/configuration/index.print.html index 8c06d7f5d7..edb55cfcc5 100644 --- a/basics/configuration/index.print.html +++ b/basics/configuration/index.print.html @@ -10,22 +10,22 @@ Configuration :: Hugo Relearn Theme - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + +
@@ -239,9 +244,9 @@ default values:

- - - - + + + + diff --git a/basics/customization/index.html b/basics/customization/index.html index a3fb51331a..eda822b22c 100644 --- a/basics/customization/index.html +++ b/basics/customization/index.html @@ -10,21 +10,21 @@ Customization :: Hugo Relearn Theme - + - - - - - - - - - - - - - + + + + + + + + + + + + + - + +
@@ -246,12 +251,12 @@ You could use an img HTML tag and reference an image created under - - - - - - + + + + + +
- - - - + + + + diff --git a/basics/customization/index.print.html b/basics/customization/index.print.html index d971a25b6b..cf495c57ce 100644 --- a/basics/customization/index.print.html +++ b/basics/customization/index.print.html @@ -10,22 +10,22 @@ Customization :: Hugo Relearn Theme - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + +
@@ -140,9 +145,9 @@ You could use an img HTML tag and reference an image created under
- - - - + + + + diff --git a/basics/generator/index.html b/basics/generator/index.html index c18d0fe5a0..e8391f6415 100644 --- a/basics/generator/index.html +++ b/basics/generator/index.html @@ -10,21 +10,21 @@ Stylesheet generator :: Hugo Relearn Theme - + - - - - - - - - - - - - - + + + + + + + + + + + + + - + +
@@ -222,12 +227,12 @@ window.variants && variants.generator( '#vargenerator' ); - - - - - - + + + + + +
- - - - - + + + + + - + diff --git a/basics/generator/index.print.html b/basics/generator/index.print.html index b6b731b1d7..cfaedd43c5 100644 --- a/basics/generator/index.print.html +++ b/basics/generator/index.print.html @@ -10,22 +10,22 @@ Stylesheet generator :: Hugo Relearn Theme - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + +
@@ -125,14 +130,14 @@ window.variants && variants.generator( '#vargenerator' );
- - - - - + + + + + - + diff --git a/basics/history/index.html b/basics/history/index.html index 6095cbf088..a3f5f85022 100644 --- a/basics/history/index.html +++ b/basics/history/index.html @@ -10,21 +10,21 @@ History :: Hugo Relearn Theme - + - - - - - - - - - - - - - + + + + + + + + + + + + + - + +
@@ -1458,12 +1463,12 @@ - - - - - - + + + + + +
- - - - + + + + diff --git a/basics/history/index.print.html b/basics/history/index.print.html index dc645d96e1..70cf8bb134 100644 --- a/basics/history/index.print.html +++ b/basics/history/index.print.html @@ -10,22 +10,22 @@ History :: Hugo Relearn Theme - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + +
@@ -904,9 +909,9 @@
- - - - + + + + diff --git a/basics/index.html b/basics/index.html index fbbee955ed..8c7b358665 100644 --- a/basics/index.html +++ b/basics/index.html @@ -10,21 +10,21 @@ Basics :: Hugo Relearn Theme - + - - - - - - - - - - - - - + + + + + + + + + + + + + - + +
@@ -165,12 +170,12 @@ - - - - - - + + + + + +
- - - - + + + + diff --git a/basics/index.print.html b/basics/index.print.html index 8f271fcbd5..1bbf0ad42b 100644 --- a/basics/index.print.html +++ b/basics/index.print.html @@ -10,22 +10,22 @@ Basics :: Hugo Relearn Theme - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + +
@@ -1768,14 +1773,14 @@ window.variants && variants.generator( '#vargenerator' );
- - - - - + + + + + - + diff --git a/basics/installation/index.html b/basics/installation/index.html index 557afae44e..549f359b4b 100644 --- a/basics/installation/index.html +++ b/basics/installation/index.html @@ -10,21 +10,21 @@ Installation :: Hugo Relearn Theme - + - - - - - - - - - - - - - + + + + + + + + + + + + + - + +
@@ -239,12 +244,12 @@ - - - - - - + + + + + +
- - - - + + + + diff --git a/basics/installation/index.print.html b/basics/installation/index.print.html index a9d074eebd..5e2ebd00db 100644 --- a/basics/installation/index.print.html +++ b/basics/installation/index.print.html @@ -10,22 +10,22 @@ Installation :: Hugo Relearn Theme - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + +
@@ -136,9 +141,9 @@
- - - - + + + + diff --git a/basics/migration/index.html b/basics/migration/index.html index 31360332b9..c68cc8a629 100644 --- a/basics/migration/index.html +++ b/basics/migration/index.html @@ -10,21 +10,21 @@ What's new :: Hugo Relearn Theme - + - - - - - - - - - - - - - + + + + + + + + + + + + + - + +
@@ -669,12 +674,12 @@ - - - - - - + + + + + +
- - - - + + + + diff --git a/basics/migration/index.print.html b/basics/migration/index.print.html index 867d1104fc..3887f69065 100644 --- a/basics/migration/index.print.html +++ b/basics/migration/index.print.html @@ -10,22 +10,22 @@ What's new :: Hugo Relearn Theme - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + +
@@ -543,9 +548,9 @@
- - - - + + + + diff --git a/basics/requirements/index.html b/basics/requirements/index.html index b1c3403a47..9a510ac5d8 100644 --- a/basics/requirements/index.html +++ b/basics/requirements/index.html @@ -10,21 +10,21 @@ Requirements :: Hugo Relearn Theme - + - - - - - - - - - - - - - + + + + + + + + + + + + + - + +
@@ -170,12 +175,12 @@ - - - - - - + + + + + +
- - - - + + + + diff --git a/basics/requirements/index.print.html b/basics/requirements/index.print.html index 39915741be..cf8eaaee77 100644 --- a/basics/requirements/index.print.html +++ b/basics/requirements/index.print.html @@ -10,22 +10,22 @@ Requirements :: Hugo Relearn Theme - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + +
@@ -83,9 +88,9 @@
- - - - + + + + diff --git a/categories/index.html b/categories/index.html index 77f34ee1fe..ce3a1eddcd 100644 --- a/categories/index.html +++ b/categories/index.html @@ -9,21 +9,21 @@ Categories :: Hugo Relearn Theme - + - - - - - - - - - - - - - + + + + + + + + + + + + + - + +
@@ -152,12 +157,12 @@ - - - - - - + + + + + +
- - - - + + + + diff --git a/cont/archetypes/index.html b/cont/archetypes/index.html index 649268b5a8..c9331559d1 100644 --- a/cont/archetypes/index.html +++ b/cont/archetypes/index.html @@ -10,21 +10,21 @@ Archetypes :: Hugo Relearn Theme - + - - - - - - - - - - - - - + + + + + + + + + + + + + - + +
@@ -277,12 +282,12 @@ - - - - - - + + + + + +
- - - - + + + + diff --git a/cont/archetypes/index.print.html b/cont/archetypes/index.print.html index 2792db1cee..334c8485dd 100644 --- a/cont/archetypes/index.print.html +++ b/cont/archetypes/index.print.html @@ -10,22 +10,22 @@ Archetypes :: Hugo Relearn Theme - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + +
@@ -168,9 +173,9 @@
- - - - + + + + diff --git a/cont/i18n/index.html b/cont/i18n/index.html index 08d3ae4a05..999834be65 100644 --- a/cont/i18n/index.html +++ b/cont/i18n/index.html @@ -10,21 +10,21 @@ Multilingual and i18n :: Hugo Relearn Theme - + - - - - - - - - - - - - - + + + + + + + + + + + + + - + +
@@ -274,12 +279,12 @@ You’ll see error reports in your browsers console log for each unsupported - - - - - - + + + + + +
- - - - + + + + diff --git a/cont/i18n/index.print.html b/cont/i18n/index.print.html index 763ada86f7..36eec62e82 100644 --- a/cont/i18n/index.print.html +++ b/cont/i18n/index.print.html @@ -10,22 +10,22 @@ Multilingual and i18n :: Hugo Relearn Theme - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + +
@@ -170,9 +175,9 @@ You’ll see error reports in your browsers console log for each unsupported
- - - - + + + + diff --git a/cont/icons/index.html b/cont/icons/index.html index 10362b3b42..2b3dc242d9 100644 --- a/cont/icons/index.html +++ b/cont/icons/index.html @@ -10,21 +10,21 @@ Icons and logos :: Hugo Relearn Theme - + - - - - - - - - - - - - - + + + + + + + + + + + + + - + +
@@ -196,12 +201,12 @@ - - - - - - + + + + + +
- - - - + + + + diff --git a/cont/icons/index.print.html b/cont/icons/index.print.html index a7ab6ce3d7..6d0ee93d8b 100644 --- a/cont/icons/index.print.html +++ b/cont/icons/index.print.html @@ -10,22 +10,22 @@ Icons and logos :: Hugo Relearn Theme - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + +
@@ -97,9 +102,9 @@
- - - - + + + + diff --git a/cont/index.html b/cont/index.html index 7396358d6d..af7c39315d 100644 --- a/cont/index.html +++ b/cont/index.html @@ -10,21 +10,21 @@ Content :: Hugo Relearn Theme - + - - - - - - - - - - - - - + + + + + + + + + + + + + - + +
@@ -165,12 +170,12 @@ - - - - - - + + + + + +
- - - - + + + + diff --git a/cont/index.print.html b/cont/index.print.html index f2735f2cc8..f8c83cbffe 100644 --- a/cont/index.print.html +++ b/cont/index.print.html @@ -10,22 +10,22 @@ Content :: Hugo Relearn Theme - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + +
@@ -293,13 +298,13 @@ We’ve added the menuTitle parameter for that purpose:

Markdown syntax

-

Let’s face it: Writing content for the Web is tiresome. WYSIWYG editors help alleviate this task, but they generally result in horrible code, or worse yet, ugly web pages.

+

Let’s face it: Writing content for the web is tiresome. WYSIWYG editors help alleviate this task, but they generally result in horrible code, or worse yet, ugly web pages.

Markdown is a better way to write HTML, without all the complexities and ugliness that usually accompanies it.

Some of the key benefits are:

  1. Markdown is simple to learn, with minimal extra characters so it’s also quicker to write content.
  2. Less chance of errors when writing in Markdown.
    3. -
  3. Produces valid XHTML output.
    4. +
  4. Produces valid HTML output.
  5. Keeps the content and the visual display separate, so you cannot mess up the look of your site.
  6. Write in any text editor or Markdown application you like.
  7. Markdown is a joy to use!
    8. @@ -311,269 +316,278 @@ We’ve added the menuTitle parameter for that purpose:

    Without further delay, let us go over the main elements of Markdown and what the resulting HTML looks like:

    -
    -
    Info
    +
    +
    Tip

    Bookmark this page and the official Commonmark reference for easy future reference!

    +

    Paragraphs

    +

    In Markdown your content usually spans the whole available document width. This is called a block. Blocks are always separated by whitespace to their adjacent blocks in the resulting document.

    +

    Any text not starting with a special sign is written as normal, plain text paragraph block and must be separated to its adjacent blocks by empty lines.

    +
    Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.
+
+Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.
+
    +
    +
    Result
    +
    +

    Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.

    +

    Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.

    +
    +

    Headings

    -

    Headings from h1 through h6 are constructed with a # for each level:

    +

    A good idea is to structure your content using headings and subheadings. HTML-headings from h1 through h6 are constructed with a # for each level.

    +

    In Hugo you usually don’t use h1 as this is generated by your theme and you should only have one such element in a document.

    # h1 Heading
-## h2 Heading
-### h3 Heading
-#### h4 Heading
-##### h5 Heading
-###### h6 Heading
-

    Renders to:

    - + +## h2 Heading + +### h3 Heading + +#### h4 Heading + +##### h5 Heading + +###### h6 Heading +
    +
    +
    Result
    +

    h1 Heading

    -

    h2 Heading

    h3 Heading

    h4 Heading

    h5 Heading
    h6 Heading
    -

    HTML:

    -
    <h1>h1 Heading</h1>
-<h2>h2 Heading</h2>
-<h3>h3 Heading</h3>
-<h4>h4 Heading</h4>
-<h5>h5 Heading</h5>
-<h6>h6 Heading</h6>
-

    Comments

    -

    Comments should be HTML compatible

    -
    <!--
-This is a comment
--->
-

    Comment below should NOT be seen:

    - +
    +

    Horizontal Rules

    -

    The HTML <hr> element is for creating a “thematic break” between paragraph-level elements. In Markdown, you can create a <hr> with --- - three consecutive dashes

    -

    renders to:

    +

    To further structure your content you can add horizontal rules. They create a “thematic break” between paragraph blocks. In Markdown, you can create it with three consecutive dashes ---.

    +
    Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.
+
+---
+
+Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.
+
    +
    +
    Result
    +
    +

    Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.

    -

    Paragraphs

    -

    Any text not starting with a special sign is written as normal, plain text and will be wrapped within <p></p> tags in the rendered HTML.

    -

    So this body copy:

    -
    Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.
-

    renders to this HTML:

    -
    <p>Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.</p>
-

    Text Markers

    +

    Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.

    +
    +
    +

    Text Markers

    Bold

    -

    For emphasizing a snippet of text with a heavier font-weight.

    -

    The following snippet of text is rendered as bold text.

    -
    **rendered as bold text**
-

    renders to:

    - -

    rendered as bold text

    - -

    and this HTML

    -
    <strong>rendered as bold text</strong>
-

    Italics

    -

    For emphasizing a snippet of text with italics.

    -

    The following snippet of text is rendered as italicized text.

    -
    _rendered as italicized text_
-

    renders to:

    - -

    rendered as italicized text

    - -

    and this HTML:

    -
    <em>rendered as italicized text</em>
-

    Strikethrough

    -

    In GFM (GitHub flavored Markdown) you can do strikethroughs.

    -
    ~~Strike through this text.~~
-

    Which renders to:

    -

    Strike through this text.

    -

    HTML:

    -
    <del>Strike through this text.</del>
-

    Blockquotes

    -

    For quoting blocks of content from another source within your document.

    -

    Add > before any text you want to quote.

    -
    > **Fusion Drive** combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.
-

    Renders to:

    -
    -

    Fusion Drive combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.

    -
    -

    and this HTML:

    -
    <blockquote>
-  <p><strong>Fusion Drive</strong> combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.</p>
-</blockquote>
-

    Blockquotes can also be nested:

    -
    > Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
->
-> > Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.
->
-> Mauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus.
-

    Renders to:

    -
    -

    Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.

    -
    -

    Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.

    -
    -

    Mauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus.

    -
    +

    You can show importance of a snippet of text with a heavier font-weight by enclosing it with two asterisks **.

    +
    I am rendered with **bold text**
+
    +
    +
    Result
    +
    +

    I am rendered with bold text

    +
    +
    +

    Italics

    +

    You can emphasize a snippet of text with italics by enclosing it with underscores _.

    +
    I am rendered with _italicized text_
+
    +
    +
    Result
    +
    +

    I am rendered with italicized text

    +
    +
    +

    Strikethrough

    +

    In GFM (GitHub flavored Markdown) you can do strikethroughs by enclosing text with two tildes ~~.

    +
    ~~Strike through this text~~
+
    +
    +
    Result
    +
    +

    Strike through this text

    +
    +
    +

    Text substitution

    +

    This Markdown dialect supports an extension to combine multiple punctuation characters to single typographic entities. This will only be applied to text outside of code blocks or inline code.

    +
    Double quotes `"` and single quotes `'` of enclosed text are replaced by **"double curly quotes"** and **'single curly quotes'**.
+
+Double dashes `--` and triple dashes `---` are replaced by en-dash **--** and em-dash **---** entities.
+
+Double arrows pointing left `<<` or right `>>` are replaced by arrow **<<** and **>>** entities.
+
+Three consecutive dots `...` are replaced by an ellipsis **...** entity.
+
    +
    +
    Result
    +
    +

    Double quotes " and single quotes ' of enclosed text are replaced by “double curly quotes” and ‘single curly quotes’.

    +

    Double dashes -- and triple dashes --- are replaced by en-dash – and em-dash — entities.

    +

    Double arrows pointing left << or right >> are replaced by arrow « and » entities.

    +

    Three consecutive dots ... are replaced by an ellipsis … entity.

    +
    +

    Lists

    Unordered

    -

    A list of items in which the order of the items does not explicitly matter.

    -

    You may use any of the following symbols to denote bullets for each list item:

    -
    * valid bullet
-- valid bullet
-+ valid bullet
-

    For example

    -
    + Lorem ipsum dolor sit amet
-+ Consectetur adipiscing elit
-+ Integer molestie lorem at massa
-+ Facilisis in pretium nisl aliquet
-+ Nulla volutpat aliquam velit
-  - Phasellus iaculis neque
-  - Purus sodales ultricies
+
    You can write a list of items in which the order of the items does not explicitly matter.
    
+
    It is possible to nest lists by indenting an item for the next sublevel.
    
+
    You may use any of -, * or + to denote bullets for each list item but should not switch between those symbols inside one whole list.
    
+
    - Lorem ipsum dolor sit amet
+- Consectetur adipiscing elit
   - Vestibulum laoreet porttitor sem
   - Ac tristique libero volutpat at
-+ Faucibus porta lacus fringilla vel
-+ Aenean sit amet erat nunc
-+ Eget porttitor lorem
-
    Renders to:
    
-
+    - Nulla volutpat aliquam velit
+  - Phasellus iaculis neque
+  - Purus sodales ultricies
+- Faucibus porta lacus fringilla vel
+
    +
    +
    Result
    +
    • Lorem ipsum dolor sit amet
      • -
    • Consectetur adipiscing elit
      • -
    • Integer molestie lorem at massa
      • -
    • Facilisis in pretium nisl aliquet
      • -
    • Nulla volutpat aliquam velit +
    • Consectetur adipiscing elit
        -
      • Phasellus iaculis neque
        • -
      • Purus sodales ultricies
      • Vestibulum laoreet porttitor sem
      • Ac tristique libero volutpat at
      • -
    • Faucibus porta lacus fringilla vel
      • -
    • Aenean sit amet erat nunc
      • -
    • Eget porttitor lorem
      • +
    • Nulla volutpat aliquam velit +
        +
      • Phasellus iaculis neque
        • +
      • Purus sodales ultricies
      - -

      And this HTML

      -
      <ul>
-  <li>Lorem ipsum dolor sit amet</li>
-  <li>Consectetur adipiscing elit</li>
-  <li>Integer molestie lorem at massa</li>
-  <li>Facilisis in pretium nisl aliquet</li>
-  <li>Nulla volutpat aliquam velit
-    <ul>
-      <li>Phasellus iaculis neque</li>
-      <li>Purus sodales ultricies</li>
-      <li>Vestibulum laoreet porttitor sem</li>
-      <li>Ac tristique libero volutpat at</li>
-    </ul>
-  </li>
-  <li>Faucibus porta lacus fringilla vel</li>
-  <li>Aenean sit amet erat nunc</li>
-  <li>Eget porttitor lorem</li>
-</ul>
-

      Ordered

      -

      A list of items in which the order of items does explicitly matter.

      -
      1. Lorem ipsum dolor sit amet
-4. Consectetur adipiscing elit
-2. Integer molestie lorem at massa
-8. Facilisis in pretium nisl aliquet
-4. Nulla volutpat aliquam velit
-99. Faucibus porta lacus fringilla vel
-21. Aenean sit amet erat nunc
-6. Eget porttitor lorem
-

      Renders to:

      -
        -
      1. Lorem ipsum dolor sit amet
        2. -
      2. Consectetur adipiscing elit
        3. -
      3. Integer molestie lorem at massa
        4. -
      4. Facilisis in pretium nisl aliquet
        5. -
      5. Nulla volutpat aliquam velit
        6. +
      6. Faucibus porta lacus fringilla vel
        7. -
      7. Aenean sit amet erat nunc
        8. -
      8. Eget porttitor lorem
        9. -
      -

      And this HTML:

      -
      <ol>
-  <li>Lorem ipsum dolor sit amet</li>
-  <li>Consectetur adipiscing elit</li>
-  <li>Integer molestie lorem at massa</li>
-  <li>Facilisis in pretium nisl aliquet</li>
-  <li>Nulla volutpat aliquam velit</li>
-  <li>Faucibus porta lacus fringilla vel</li>
-  <li>Aenean sit amet erat nunc</li>
-  <li>Eget porttitor lorem</li>
-</ol>
-
      -
      -
      Tip
      -
      -

      If you just use 1. for each number, Markdown will automatically number each item. For example:

      +
    +

    Ordered

    +

    You can create a list of items in which the order of items does explicitly matter.

    +

    It is possible to nest lists by indenting an item for the next sublevel.

    +

    Markdown will automatically number each of your items consecutively. This means, the order number you are providing is irrelevant.

    1. Lorem ipsum dolor sit amet
-1. Consectetur adipiscing elit
-1. Integer molestie lorem at massa
-1. Facilisis in pretium nisl aliquet
-1. Nulla volutpat aliquam velit
-1. Faucibus porta lacus fringilla vel
-1. Aenean sit amet erat nunc
-1. Eget porttitor lorem
-

    Renders to:

    +3. Consectetur adipiscing elit + 1. Integer molestie lorem at massa + 7. Facilisis in pretium nisl aliquet +99. Nulla volutpat aliquam velit + 1. Faucibus porta lacus fringilla vel + 1. Aenean sit amet erat nunc +17. Eget porttitor lorem +
+
+
Result
+
  1. Lorem ipsum dolor sit amet
    2. -
  2. Consectetur adipiscing elit
    3. +
  3. Consectetur adipiscing elit +
    1. Integer molestie lorem at massa
    2. Facilisis in pretium nisl aliquet
      3. -
    3. Nulla volutpat aliquam velit
      4. +
    +
    4. +
  4. Nulla volutpat aliquam velit +
    1. Faucibus porta lacus fringilla vel
    2. Aenean sit amet erat nunc
      3. +
    +
  5. Eget porttitor lorem
+
+
+

Tasks

+

In GFM (GitHub flavored Markdown) you can add task lists resulting in checked or unchecked non-clickable items

+
- [x] Basic Test
+- [ ] More Tests
+  - [x] View
+  - [x] Hear
+  - [ ] Smell
+
+
+
Result
+
+ +
+
+

Defintions

+

This Markdown dialect supports an extension to add defintion lists. Definition lists are made of terms and definitions of these terms, much like in a dictionary.

+

A definition list in Markdown Extra is made of a single-line term followed by a colon and the definition for that term. You can also associate more than one term to a definition.

+

If you add empty lines around the definition terms, additional vertical space will be generated. Also multiple paragraphs are possible

+
Apple
+: Pomaceous fruit of plants of the genus Malus in the family Rosaceae.
+: An American computer company.
+
+Orange
+: The fruit of an evergreen tree of the genus Citrus.
+
+  You can make juice out of it.
+: A telecommunication company.
+
+  You can't make juice out of it.
+
+
+
Result
+
+
+
Apple
+
Pomaceous fruit of plants of the genus Malus in the family Rosaceae.
+
An American computer company.
+
Orange
+
The fruit of an evergreen tree of the genus Citrus. +

You can make juice out of it.

+
+
A telecommunication company. +

You can’t make juice out of it.

+
+
+
+

Code

-

Inline code

-

Wrap inline snippets of code with `.

-
In this example, `<div></div>` should be wrapped as **code**.
-

Renders to:

-

In this example, <div></div> should be wrapped as code.

-

HTML:

-
<p>In this example, <code>&lt;div&gt;&lt;/div&gt;</code> should be wrapped as <strong>code</strong>.</p>
-

Indented code

-

Or indent several lines of code by at least two spaces, as in:

-
    // Some comments
+
Inline Code

+
Inline snippets of code can be wrapped with backticks `.

+
In this example, `<div></div>` is marked as code.
+

+

+  
 Result

+  

+
In this example, <div></div> is marked as code.

+    

+

+
Indented Code Block

+
A simple code block can be generated by indenting several lines of code by at least two spaces.

+
Be impressed by my advanced code:
+
+    // Some comments
     line 1 of code
     line 2 of code
     line 3 of code
-
Renders to:

-
+
+
+
Result
+
+

Be impressed by my advanced code:

// Some comments
 line 1 of code
 line 2 of code
 line 3 of code
- -

HTML:

-
<pre>
-  <code>
-    // Some comments
-    line 1 of code
-    line 2 of code
-    line 3 of code
-  </code>
-</pre>
-

Block code “fences”

-

Use “fences” ``` to block in multiple lines of code.

-
```
-Sample text here...
-```
-

HTML:

-
<pre>
-  <code>Sample text here...</code>
-</pre>
-

Syntax highlighting

-

GFM, or “GitHub Flavored Markdown” also supports syntax highlighting. To activate it, usually you simply add the file extension of the language you want to use directly after the first code “fence”, ```js, and syntax highlighting will automatically be applied in the rendered HTML.

+
+
+

Fenced Code Block

+

If you want to gain more control of your code block you can enclose your code by at least three backticks ``` a so called fence.

+

In GFM (GitHub Flavored Markdown) you can also add a language specifier directly after the opening fence, ```js, and syntax highlighting will automatically be applied according to the selected language in the rendered HTML.

See Code Highlighting for additional documentation.

-

For example, to apply syntax highlighting to JavaScript code:

```js
 grunt.initConfig({
   assemble: {
@@ -594,7 +608,10 @@ line 3 of code
   }
 };
 ```
-

Renders to:

+ +
+
Result
+ 
grunt.initConfig({
   assemble: {
     options: {
@@ -613,14 +630,19 @@ line 3 of code
     }
   }
 };
-

Tables

-

Tables are created by adding pipes as dividers between each cell, and by adding a line of dashes (also separated by bars) beneath the header. Note that the pipes do not need to be vertically aligned.

+
+ +

Tables

+

In GFM (GitHub flavored Markdown) you can create tables by adding pipes as dividers between each cell, and by adding a line of dashes (also separated by bars) beneath the header. Note that the pipes do not need to be vertically aligned.

| 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. |
-

Renders to:

+ +
+
Result
+
@@ -643,205 +665,298 @@ line 3 of code
-

And this HTML:

-
<table>
-  <tr>
-    <th>Option</th>
-    <th>Description</th>
-  </tr>
-  <tr>
-    <td>data</td>
-    <td>path to data files to supply the data that will be passed into templates.</td>
-  </tr>
-  <tr>
-    <td>engine</td>
-    <td>engine to be used for processing templates. Handlebars is the default.</td>
-  </tr>
-  <tr>
-    <td>ext</td>
-    <td>extension to be used for dest files.</td>
-  </tr>
-</table>
-

Right aligned text

-

Adding a colon on the right side of the dashes below any heading will right align text for that column.

-
| 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. |
-
+ + +

Aligned Columns

+

Adding a colon on the left and/or right side of the dashes below any heading will align the text for that column accordingly.

+
| Option | Number | Description |
+| ------:|:------:|:----------- |
+| data   | 1      | path to data files to supply the data that will be passed into templates. |
+| engine | 2      | engine to be used for processing templates. Handlebars is the default. |
+| ext    | 3      | extension to be used for dest files. |
+
+
+
Result
+
+
- + + - + + - + + - + +
OptionDescriptionNumberDescription
datapath to data files to supply the data that will be passed into templates.1path to data files to supply the data that will be passed into templates.
engineengine to be used for processing templates. Handlebars is the default.2engine to be used for processing templates. Handlebars is the default.
extextension to be used for dest files.3extension to be used for dest files.
-

Two tables adjacent

- - - - - - - - - - - - - -
OptionDescription
extextension to be used for dest files.
- - - - - - - - - - - - - -
OptionDescription
extextension to be used for dest files.
- - -
[Assemble](http://assemble.io)
-

Renders to (hover over the link, there is no tooltip):

-

Assemble

-

HTML:

-
<a href="http://assemble.io">Assemble</a>
-

Add a tooltip

-
[Upstage](https://github.com/upstage/ "Visit Upstage!")
-

Renders to (hover over the link, there should be a tooltip):

-

Upstage

-

HTML:

-
<a href="https://github.com/upstage/" title="Visit Upstage!">Upstage</a>
-

Named Anchors

-

Named anchors enable you to jump to the specified anchor point on the same page. For example, each of these chapters:

-
# Table of Contents
-
-- [Chapter 1](#chapter-1)
-- [Chapter 2](#chapter-2)
-- [Chapter 3](#chapter-3)
-

will jump to these sections:

-
## Chapter 1 <a id="chapter-1"></a>
-Content for chapter one.
-
-## Chapter 2 <a id="chapter-2"></a>
-Content for chapter one.
-
-## Chapter 3 <a id="chapter-3"></a>
-Content for chapter one.
-
-
-
Note
+
+
+

Blockquotes

+

For quoting blocks of content from another source within your document add > before any text you want to quote.

+

Blockquotes can also be nested.

+
> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
+>
+> > Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.
+>
+> Mauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus.
+
+
+
Result
-

Note that specific placement of the anchor tag seems to be arbitrary. They are placed inline here since it seems to be unobtrusive, and it works.

+
+

Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.

+
+

Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.

+
+

Mauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus.

+
+
+
+ + +

In GFM (GitHub Flavored Markdown) absolute URLs will automatically be converted into a link.

+
This is a link to https://example.com.
+
+
+
Result
+
+

This is a link to https://example.com.

+
+
+ +

You can explicitly define links in case you want to use non-absolute URLs or want to give different text.

+
[Assemble](http://assemble.io)
+
+
+
Result
+
+

Assemble

+
+
+ +

For even further information, you can add an additional text, displayed in a tooltip on hovering over the link.

+
[Upstage](https://github.com/upstage/ "Visit Upstage!")
+
+
+
Result
+
+

Upstage

+
+
+ +

Links can be simplyfied for recurring reuse by using a reference ID to later define the URL location. This simplyfies writing if you want to use a link more than once in a document.

+
[Example][somelinkID]
+
+[somelinkID]: https://example.com "Go to example domain"
+
+
+
Result
+
+

Example

+
+
+

Footnotes

+

Footnotes work mostly like reference-style links. A footnote is made of two things, a marker in the text that will become a superscript number and a footnote definition that will be placed in a list of footnotes.

+

Usually the list of footnotes will be shown at the end of your document. If we use a footnote in a notice box it will instead be listed at the end of its box.

+

Footnotes can contain block elements, which means that you can put multiple paragraphs, lists, blockquotes and so on in a footnote. It works the same as for list items, just indent the following paragraphs by four spaces in the footnote definition.

+
That's some text with a footnote[^1]
+
+[^1]: And that's the footnote.
+
+That's some more text with a footnote.[^someid]
+
+[^someid]:
+    Anything of interest goes here.
+
+    Blue light glows blue.
+
+
+
Result
+
+

That’s some text with a footnote1

+

That’s some more text with a footnote.2

+
+
+
    +
  1. +

    And that’s the footnote. ↩︎

    +
    2. +
  2. +

    Anything of interest goes here.

    +

    Blue light glows blue. ↩︎

    +
    3. +
+

Images

-

Images have a similar syntax to links but include a preceding exclamation mark:

+

Basic Images

+

Images have a similar syntax to links but include a preceding exclamation mark.

![Spock](https://octodex.github.com/images/spocktocat.png)
-

+

+
+
Result
+
+

- -Spock + +Spock

-

Like links, images also have a footnote style syntax, resulting in a tooltip:

+
+
+

Image with Tooltip

+

Like links, images can also be given a tooltip.

![Picard](https://octodex.github.com/images/jean-luc-picat.jpg "Jean Luc Picard")
-

+ +

+
Result
+
+

Picard

-

Images can also be linked by reference ID to later define the URL location:

+
+
+

Image References

+

Images can also be linked by reference ID to later define the URL location. This simplyfies writing if you want to use an image more than once in a document.

![La Forge][laforge]
 
 [laforge]: https://octodex.github.com/images/trekkie.jpg "Geordi La Forge"
-

+ +

+
Result
+
+

La Forge

-

Further image formatting

-

The Hugo Markdown parser supports additional non-standard functionality.

-

Resizing image

-

Add HTTP parameters width and/or height to the link image to resize the image. Values are CSS values (default is auto).

+
+
+

Further Image Formatting

+

This theme allows additional non-standard formatting by setting query parameter at the end of the image URL.

+

Resizing

+

Add query parameter width and/or height to the link image to resize the image. Values are CSS values (default is auto).

![Minion](https://octodex.github.com/images/minion.png?width=20vw)
-

+ +

+
Result
+
+

- -Minion + +Minion

+
+
![Minion](https://octodex.github.com/images/minion.png?height=50px)
-

+ +

+
Result
+
+

- -Minion + +Minion

+
+
![Minion](https://octodex.github.com/images/minion.png?height=50px&width=40vw)
-

+ +

+
Result
+
+

- -Minion + +Minion

-

Add CSS classes

-

Add a HTTP classes parameter to the link image to add CSS classes. Add some of the predefined values or even define your own in your CSS.

-
shadow
-
![Spidertocat](https://octodex.github.com/images/spidertocat.png?classes=shadow)
-

+

+
+

CSS Classes

+

Add a query parameter classes to the link image to add CSS classes. Add some of the predefined values or even define your own in your CSS.

+
Shadow
+
![Spidertocat](https://octodex.github.com/images/spidertocat.png?classes=shadow,bg-white)
+
+
+
Result
+
+

- -Spidertocat + +Spidertocat

-
border
+
+
+
Border
![DrOctocat](https://octodex.github.com/images/droctocat.png?classes=border)
-

+ +

+
Result
+
+

DrOctocat

-
left
+
+
+
Left
![Supertocat](https://octodex.github.com/images/okal-eltocat.jpg?classes=left)
-

+ +

+
Result
+
+

Supertocat

- +
+
+ 
![Riddlocat](https://octodex.github.com/images/riddlocat.jpg?classes=right)
-

+ +

+
Result
+
+

Riddlocat

-
inline
+
+
+
Inline
![Spidertocat](https://octodex.github.com/images/spidertocat.png?classes=inline)
 ![DrOctocat](https://octodex.github.com/images/droctocat.png?classes=inline)
 ![Supertocat](https://octodex.github.com/images/okal-eltocat.jpg?classes=inline)
 ![Riddlocat](https://octodex.github.com/images/riddlocat.jpg?classes=inline)
-

+ +

+
Result
+
+

- -Spidertocat + +Spidertocat @@ -858,19 +973,33 @@ line 3 of code Riddlocat

+
+
Combination
-
![X-tocat](https://octodex.github.com/images/xtocat.jpg?width=20vw&classes=shadow,border,left)
-

+

![X-tocat](https://octodex.github.com/images/xtocat.jpg?classes=shadow,border,left)
+
+
+
Result
+
+

X-tocat

+
+
-

Add a HTTP featherlight parameter to the link image to disable lightbox. By default lightbox is enabled using the featherlight.js plugin. You can disable this by defining featherlight to false.

+

Add the query parameter featherlight=false to the image link to disable the lightbox.

![Homercat](https://octodex.github.com/images/homercat.png?featherlight=false)
-

+ +

+
Result
+
+

-Homercat

+Homercat

+
+
@@ -1202,9 +1331,9 @@ You’ll see error reports in your browsers console log for each unsupported - - - - + + + + diff --git a/cont/index.xml b/cont/index.xml index a259557747..fae6980ff1 100644 --- a/cont/index.xml +++ b/cont/index.xml @@ -37,7 +37,7 @@ Translation strings for default values (English, Arabic, Simplified Chinese, Tra https://McShelby.github.io/hugo-theme-relearn/cont/markdown/index.html Mon, 01 Jan 0001 00:00:00 +0000 https://McShelby.github.io/hugo-theme-relearn/cont/markdown/index.html - Let&rsquo;s face it: Writing content for the Web is tiresome. WYSIWYG editors help alleviate this task, but they generally result in horrible code, or worse yet, ugly web pages. + Let&rsquo;s face it: Writing content for the web is tiresome. WYSIWYG editors help alleviate this task, but they generally result in horrible code, or worse yet, ugly web pages. Markdown is a better way to write HTML, without all the complexities and ugliness that usually accompanies it. Some of the key benefits are: Markdown is simple to learn, with minimal extra characters so it&rsquo;s also quicker to write content. Less chance of errors when writing in Markdown. diff --git a/cont/markdown/index.html b/cont/markdown/index.html index 50e2372d49..878a808918 100644 --- a/cont/markdown/index.html +++ b/cont/markdown/index.html @@ -10,21 +10,21 @@ Markdown syntax :: Hugo Relearn Theme - + - - - - - - - - - - - - - + + + + + + + + + + + + + - + +
@@ -81,18 +86,9 @@
+
+
Result
+
  1. Lorem ipsum dolor sit amet
    2. -
  2. Consectetur adipiscing elit
    3. +
  3. Consectetur adipiscing elit +
    1. Integer molestie lorem at massa
    2. Facilisis in pretium nisl aliquet
      3. -
    3. Nulla volutpat aliquam velit
      4. +
    +
    4. +
  4. Nulla volutpat aliquam velit +
    1. Faucibus porta lacus fringilla vel
    2. Aenean sit amet erat nunc
      3. +
    +
  5. Eget porttitor lorem
+
+
+

Tasks

+

In GFM (GitHub flavored Markdown) you can add task lists resulting in checked or unchecked non-clickable items

+
- [x] Basic Test
+- [ ] More Tests
+  - [x] View
+  - [x] Hear
+  - [ ] Smell
+
+
+
Result
+
+
    +
  • Basic Test
    • +
  • More Tests +
      +
    • View
      • +
    • Hear
      • +
    • Smell
      • +
    +
    • +
+
+
+

Defintions

+

This Markdown dialect supports an extension to add defintion lists. Definition lists are made of terms and definitions of these terms, much like in a dictionary.

+

A definition list in Markdown Extra is made of a single-line term followed by a colon and the definition for that term. You can also associate more than one term to a definition.

+

If you add empty lines around the definition terms, additional vertical space will be generated. Also multiple paragraphs are possible

+
Apple
+: Pomaceous fruit of plants of the genus Malus in the family Rosaceae.
+: An American computer company.
+
+Orange
+: The fruit of an evergreen tree of the genus Citrus.
+
+  You can make juice out of it.
+: A telecommunication company.
+
+  You can't make juice out of it.
+
+
+
Result
+
+
+
Apple
+
Pomaceous fruit of plants of the genus Malus in the family Rosaceae.
+
An American computer company.
+
Orange
+
The fruit of an evergreen tree of the genus Citrus. +

You can make juice out of it.

+
+
A telecommunication company. +

You can’t make juice out of it.

+
+
+
+

Code

-

Inline code

-

Wrap inline snippets of code with `.

-
In this example, `<div></div>` should be wrapped as **code**.
-

Renders to:

-

In this example, <div></div> should be wrapped as code.

-

HTML:

-
<p>In this example, <code>&lt;div&gt;&lt;/div&gt;</code> should be wrapped as <strong>code</strong>.</p>
-

Indented code

-

Or indent several lines of code by at least two spaces, as in:

-
    // Some comments
+
Inline Code

+
Inline snippets of code can be wrapped with backticks `.

+
In this example, `<div></div>` is marked as code.
+

+

+  
 Result

+  

+
In this example, <div></div> is marked as code.

+    

+

+
Indented Code Block

+
A simple code block can be generated by indenting several lines of code by at least two spaces.

+
Be impressed by my advanced code:
+
+    // Some comments
     line 1 of code
     line 2 of code
     line 3 of code
-
Renders to:

-
+
+
+
Result
+
+

Be impressed by my advanced code:

// Some comments
 line 1 of code
 line 2 of code
 line 3 of code
- -

HTML:

-
<pre>
-  <code>
-    // Some comments
-    line 1 of code
-    line 2 of code
-    line 3 of code
-  </code>
-</pre>
-

Block code “fences”

-

Use “fences” ``` to block in multiple lines of code.

-
```
-Sample text here...
-```
-

HTML:

-
<pre>
-  <code>Sample text here...</code>
-</pre>
-

Syntax highlighting

-

GFM, or “GitHub Flavored Markdown” also supports syntax highlighting. To activate it, usually you simply add the file extension of the language you want to use directly after the first code “fence”, ```js, and syntax highlighting will automatically be applied in the rendered HTML.

+
+
+

Fenced Code Block

+

If you want to gain more control of your code block you can enclose your code by at least three backticks ``` a so called fence.

+

In GFM (GitHub Flavored Markdown) you can also add a language specifier directly after the opening fence, ```js, and syntax highlighting will automatically be applied according to the selected language in the rendered HTML.

See Code Highlighting for additional documentation.

-

For example, to apply syntax highlighting to JavaScript code:

```js
 grunt.initConfig({
   assemble: {
@@ -447,7 +458,10 @@ line 3 of code
   }
 };
 ```
-

Renders to:

+
+
+
Result
+ 
grunt.initConfig({
   assemble: {
     options: {
@@ -466,14 +480,19 @@ line 3 of code
     }
   }
 };
-

Tables

-

Tables are created by adding pipes as dividers between each cell, and by adding a line of dashes (also separated by bars) beneath the header. Note that the pipes do not need to be vertically aligned.

+
+ +

Tables

+

In GFM (GitHub flavored Markdown) you can create tables by adding pipes as dividers between each cell, and by adding a line of dashes (also separated by bars) beneath the header. Note that the pipes do not need to be vertically aligned.

| 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. |
-

Renders to:

+ +
+
Result
+
@@ -496,205 +515,298 @@ line 3 of code
-

And this HTML:

-
<table>
-  <tr>
-    <th>Option</th>
-    <th>Description</th>
-  </tr>
-  <tr>
-    <td>data</td>
-    <td>path to data files to supply the data that will be passed into templates.</td>
-  </tr>
-  <tr>
-    <td>engine</td>
-    <td>engine to be used for processing templates. Handlebars is the default.</td>
-  </tr>
-  <tr>
-    <td>ext</td>
-    <td>extension to be used for dest files.</td>
-  </tr>
-</table>
-

Right aligned text

-

Adding a colon on the right side of the dashes below any heading will right align text for that column.

-
| 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. |
-
+ + +

Aligned Columns

+

Adding a colon on the left and/or right side of the dashes below any heading will align the text for that column accordingly.

+
| Option | Number | Description |
+| ------:|:------:|:----------- |
+| data   | 1      | path to data files to supply the data that will be passed into templates. |
+| engine | 2      | engine to be used for processing templates. Handlebars is the default. |
+| ext    | 3      | extension to be used for dest files. |
+
+
+
Result
+
+
- + + - + + - + + - + +
OptionDescriptionNumberDescription
datapath to data files to supply the data that will be passed into templates.1path to data files to supply the data that will be passed into templates.
engineengine to be used for processing templates. Handlebars is the default.2engine to be used for processing templates. Handlebars is the default.
extextension to be used for dest files.3extension to be used for dest files.
-

Two tables adjacent

- - - - - - - - - - - - - -
OptionDescription
extextension to be used for dest files.
- - - - - - - - - - - - - -
OptionDescription
extextension to be used for dest files.
- - -
[Assemble](http://assemble.io)
-

Renders to (hover over the link, there is no tooltip):

-

Assemble

-

HTML:

-
<a href="http://assemble.io">Assemble</a>
-

Add a tooltip

-
[Upstage](https://github.com/upstage/ "Visit Upstage!")
-

Renders to (hover over the link, there should be a tooltip):

-

Upstage

-

HTML:

-
<a href="https://github.com/upstage/" title="Visit Upstage!">Upstage</a>
-

Named Anchors

-

Named anchors enable you to jump to the specified anchor point on the same page. For example, each of these chapters:

-
# Table of Contents
-
-- [Chapter 1](#chapter-1)
-- [Chapter 2](#chapter-2)
-- [Chapter 3](#chapter-3)
-

will jump to these sections:

-
## Chapter 1 <a id="chapter-1"></a>
-Content for chapter one.
-
-## Chapter 2 <a id="chapter-2"></a>
-Content for chapter one.
-
-## Chapter 3 <a id="chapter-3"></a>
-Content for chapter one.
-
-
-
Note
+
+
+

Blockquotes

+

For quoting blocks of content from another source within your document add > before any text you want to quote.

+

Blockquotes can also be nested.

+
> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
+>
+> > Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.
+>
+> Mauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus.
+
+
+
Result
-

Note that specific placement of the anchor tag seems to be arbitrary. They are placed inline here since it seems to be unobtrusive, and it works.

+
+

Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.

+
+

Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.

+
+

Mauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus.

+
+
+
+ + +

In GFM (GitHub Flavored Markdown) absolute URLs will automatically be converted into a link.

+
This is a link to https://example.com.
+
+
+
Result
+
+

This is a link to https://example.com.

+
+
+ +

You can explicitly define links in case you want to use non-absolute URLs or want to give different text.

+
[Assemble](http://assemble.io)
+
+
+
Result
+
+

Assemble

+
+
+ +

For even further information, you can add an additional text, displayed in a tooltip on hovering over the link.

+
[Upstage](https://github.com/upstage/ "Visit Upstage!")
+
+
+
Result
+
+

Upstage

+
+
+ +

Links can be simplyfied for recurring reuse by using a reference ID to later define the URL location. This simplyfies writing if you want to use a link more than once in a document.

+
[Example][somelinkID]
+
+[somelinkID]: https://example.com "Go to example domain"
+
+
+
Result
+
+

Example

+
+
+

Footnotes

+

Footnotes work mostly like reference-style links. A footnote is made of two things, a marker in the text that will become a superscript number and a footnote definition that will be placed in a list of footnotes.

+

Usually the list of footnotes will be shown at the end of your document. If we use a footnote in a notice box it will instead be listed at the end of its box.

+

Footnotes can contain block elements, which means that you can put multiple paragraphs, lists, blockquotes and so on in a footnote. It works the same as for list items, just indent the following paragraphs by four spaces in the footnote definition.

+
That's some text with a footnote[^1]
+
+[^1]: And that's the footnote.
+
+That's some more text with a footnote.[^someid]
+
+[^someid]:
+    Anything of interest goes here.
+
+    Blue light glows blue.
+
+
+
Result
+
+

That’s some text with a footnote1

+

That’s some more text with a footnote.2

+
+
+
    +
  1. +

    And that’s the footnote. ↩︎

    +
    2. +
  2. +

    Anything of interest goes here.

    +

    Blue light glows blue. ↩︎

    +
    3. +
+

Images

-

Images have a similar syntax to links but include a preceding exclamation mark:

+

Basic Images

+

Images have a similar syntax to links but include a preceding exclamation mark.

![Spock](https://octodex.github.com/images/spocktocat.png)
-

+

+
+
Result
+
+

- -Spock + +Spock

-

Like links, images also have a footnote style syntax, resulting in a tooltip:

+
+
+

Image with Tooltip

+

Like links, images can also be given a tooltip.

![Picard](https://octodex.github.com/images/jean-luc-picat.jpg "Jean Luc Picard")
-

+ +

+
Result
+
+

Picard

-

Images can also be linked by reference ID to later define the URL location:

+
+
+

Image References

+

Images can also be linked by reference ID to later define the URL location. This simplyfies writing if you want to use an image more than once in a document.

![La Forge][laforge]
 
 [laforge]: https://octodex.github.com/images/trekkie.jpg "Geordi La Forge"
-

+ +

+
Result
+
+

La Forge

-

Further image formatting

-

The Hugo Markdown parser supports additional non-standard functionality.

-

Resizing image

-

Add HTTP parameters width and/or height to the link image to resize the image. Values are CSS values (default is auto).

+
+
+

Further Image Formatting

+

This theme allows additional non-standard formatting by setting query parameter at the end of the image URL.

+

Resizing

+

Add query parameter width and/or height to the link image to resize the image. Values are CSS values (default is auto).

![Minion](https://octodex.github.com/images/minion.png?width=20vw)
-

+ +

+
Result
+
+

- -Minion + +Minion

+
+
![Minion](https://octodex.github.com/images/minion.png?height=50px)
-

+ +

+
Result
+
+

- -Minion + +Minion

+
+
![Minion](https://octodex.github.com/images/minion.png?height=50px&width=40vw)
-

+ +

+
Result
+
+

- -Minion + +Minion

-

Add CSS classes

-

Add a HTTP classes parameter to the link image to add CSS classes. Add some of the predefined values or even define your own in your CSS.

-
shadow
-
![Spidertocat](https://octodex.github.com/images/spidertocat.png?classes=shadow)
-

+

+
+

CSS Classes

+

Add a query parameter classes to the link image to add CSS classes. Add some of the predefined values or even define your own in your CSS.

+
Shadow
+
![Spidertocat](https://octodex.github.com/images/spidertocat.png?classes=shadow,bg-white)
+
+
+
Result
+
+

- -Spidertocat + +Spidertocat

-
border
+
+
+
Border
![DrOctocat](https://octodex.github.com/images/droctocat.png?classes=border)
-

+ +

+
Result
+
+

DrOctocat

-
left
+
+
+
Left
![Supertocat](https://octodex.github.com/images/okal-eltocat.jpg?classes=left)
-

+ +

+
Result
+
+

Supertocat

- +
+
+ 
![Riddlocat](https://octodex.github.com/images/riddlocat.jpg?classes=right)
-

+ +

+
Result
+
+

Riddlocat

-
inline
+
+
+
Inline
![Spidertocat](https://octodex.github.com/images/spidertocat.png?classes=inline)
 ![DrOctocat](https://octodex.github.com/images/droctocat.png?classes=inline)
 ![Supertocat](https://octodex.github.com/images/okal-eltocat.jpg?classes=inline)
 ![Riddlocat](https://octodex.github.com/images/riddlocat.jpg?classes=inline)
-

+ +

+
Result
+
+

- -Spidertocat + +Spidertocat @@ -711,19 +823,33 @@ line 3 of code Riddlocat

+
+
Combination
-
![X-tocat](https://octodex.github.com/images/xtocat.jpg?width=20vw&classes=shadow,border,left)
-

+

![X-tocat](https://octodex.github.com/images/xtocat.jpg?classes=shadow,border,left)
+
+
+
Result
+
+

X-tocat

+
+
-

Add a HTTP featherlight parameter to the link image to disable lightbox. By default lightbox is enabled using the featherlight.js plugin. You can disable this by defining featherlight to false.

+

Add the query parameter featherlight=false to the image link to disable the lightbox.

![Homercat](https://octodex.github.com/images/homercat.png?featherlight=false)
-

+ +

+
Result
+
+

-Homercat

+Homercat

+
+
@@ -803,12 +929,12 @@ line 3 of code - - - - - - + + + + + +
- - - - + + + + diff --git a/cont/markdown/index.print.html b/cont/markdown/index.print.html index 6fd31cdd41..7b60aa85b0 100644 --- a/cont/markdown/index.print.html +++ b/cont/markdown/index.print.html @@ -10,22 +10,22 @@ Markdown syntax :: Hugo Relearn Theme - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + +
@@ -70,13 +75,13 @@

Markdown syntax

-

Let’s face it: Writing content for the Web is tiresome. WYSIWYG editors help alleviate this task, but they generally result in horrible code, or worse yet, ugly web pages.

+

Let’s face it: Writing content for the web is tiresome. WYSIWYG editors help alleviate this task, but they generally result in horrible code, or worse yet, ugly web pages.

Markdown is a better way to write HTML, without all the complexities and ugliness that usually accompanies it.

Some of the key benefits are:

  1. Markdown is simple to learn, with minimal extra characters so it’s also quicker to write content.
  2. Less chance of errors when writing in Markdown.
    3. -
  3. Produces valid XHTML output.
    4. +
  4. Produces valid HTML output.
  5. Keeps the content and the visual display separate, so you cannot mess up the look of your site.
  6. Write in any text editor or Markdown application you like.
  7. Markdown is a joy to use!
    8. @@ -88,269 +93,278 @@

    Without further delay, let us go over the main elements of Markdown and what the resulting HTML looks like:

    -
    -
    Info
    +
    +
    Tip

    Bookmark this page and the official Commonmark reference for easy future reference!

    +

    Paragraphs

    +

    In Markdown your content usually spans the whole available document width. This is called a block. Blocks are always separated by whitespace to their adjacent blocks in the resulting document.

    +

    Any text not starting with a special sign is written as normal, plain text paragraph block and must be separated to its adjacent blocks by empty lines.

    +
    Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.
+
+Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.
+
    +
    +
    Result
    +
    +

    Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.

    +

    Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.

    +
    +

    Headings

    -

    Headings from h1 through h6 are constructed with a # for each level:

    +

    A good idea is to structure your content using headings and subheadings. HTML-headings from h1 through h6 are constructed with a # for each level.

    +

    In Hugo you usually don’t use h1 as this is generated by your theme and you should only have one such element in a document.

    # h1 Heading
-## h2 Heading
-### h3 Heading
-#### h4 Heading
-##### h5 Heading
-###### h6 Heading
-

    Renders to:

    - + +## h2 Heading + +### h3 Heading + +#### h4 Heading + +##### h5 Heading + +###### h6 Heading +
    +
    +
    Result
    +

    h1 Heading

    -

    h2 Heading

    h3 Heading

    h4 Heading

    h5 Heading
    h6 Heading
    -

    HTML:

    -
    <h1>h1 Heading</h1>
-<h2>h2 Heading</h2>
-<h3>h3 Heading</h3>
-<h4>h4 Heading</h4>
-<h5>h5 Heading</h5>
-<h6>h6 Heading</h6>
-

    Comments

    -

    Comments should be HTML compatible

    -
    <!--
-This is a comment
--->
-

    Comment below should NOT be seen:

    - +
    +

    Horizontal Rules

    -

    The HTML <hr> element is for creating a “thematic break” between paragraph-level elements. In Markdown, you can create a <hr> with --- - three consecutive dashes

    -

    renders to:

    +

    To further structure your content you can add horizontal rules. They create a “thematic break” between paragraph blocks. In Markdown, you can create it with three consecutive dashes ---.

    +
    Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.
+
+---
+
+Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.
+
    +
    +
    Result
    +
    +

    Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.

    -

    Paragraphs

    -

    Any text not starting with a special sign is written as normal, plain text and will be wrapped within <p></p> tags in the rendered HTML.

    -

    So this body copy:

    -
    Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.
-

    renders to this HTML:

    -
    <p>Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.</p>
-

    Text Markers

    +

    Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.

    +
    +
    +

    Text Markers

    Bold

    -

    For emphasizing a snippet of text with a heavier font-weight.

    -

    The following snippet of text is rendered as bold text.

    -
    **rendered as bold text**
-

    renders to:

    - -

    rendered as bold text

    - -

    and this HTML

    -
    <strong>rendered as bold text</strong>
-

    Italics

    -

    For emphasizing a snippet of text with italics.

    -

    The following snippet of text is rendered as italicized text.

    -
    _rendered as italicized text_
-

    renders to:

    - -

    rendered as italicized text

    - -

    and this HTML:

    -
    <em>rendered as italicized text</em>
-

    Strikethrough

    -

    In GFM (GitHub flavored Markdown) you can do strikethroughs.

    -
    ~~Strike through this text.~~
-

    Which renders to:

    -

    Strike through this text.

    -

    HTML:

    -
    <del>Strike through this text.</del>
-

    Blockquotes

    -

    For quoting blocks of content from another source within your document.

    -

    Add > before any text you want to quote.

    -
    > **Fusion Drive** combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.
-

    Renders to:

    -
    -

    Fusion Drive combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.

    -
    -

    and this HTML:

    -
    <blockquote>
-  <p><strong>Fusion Drive</strong> combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.</p>
-</blockquote>
-

    Blockquotes can also be nested:

    -
    > Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
->
-> > Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.
->
-> Mauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus.
-

    Renders to:

    -
    -

    Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.

    -
    -

    Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.

    -
    -

    Mauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus.

    -
    +

    You can show importance of a snippet of text with a heavier font-weight by enclosing it with two asterisks **.

    +
    I am rendered with **bold text**
+
    +
    +
    Result
    +
    +

    I am rendered with bold text

    +
    +
    +

    Italics

    +

    You can emphasize a snippet of text with italics by enclosing it with underscores _.

    +
    I am rendered with _italicized text_
+
    +
    +
    Result
    +
    +

    I am rendered with italicized text

    +
    +
    +

    Strikethrough

    +

    In GFM (GitHub flavored Markdown) you can do strikethroughs by enclosing text with two tildes ~~.

    +
    ~~Strike through this text~~
+
    +
    +
    Result
    +
    +

    Strike through this text

    +
    +
    +

    Text substitution

    +

    This Markdown dialect supports an extension to combine multiple punctuation characters to single typographic entities. This will only be applied to text outside of code blocks or inline code.

    +
    Double quotes `"` and single quotes `'` of enclosed text are replaced by **"double curly quotes"** and **'single curly quotes'**.
+
+Double dashes `--` and triple dashes `---` are replaced by en-dash **--** and em-dash **---** entities.
+
+Double arrows pointing left `<<` or right `>>` are replaced by arrow **<<** and **>>** entities.
+
+Three consecutive dots `...` are replaced by an ellipsis **...** entity.
+
    +
    +
    Result
    +
    +

    Double quotes " and single quotes ' of enclosed text are replaced by “double curly quotes” and ‘single curly quotes’.

    +

    Double dashes -- and triple dashes --- are replaced by en-dash – and em-dash — entities.

    +

    Double arrows pointing left << or right >> are replaced by arrow « and » entities.

    +

    Three consecutive dots ... are replaced by an ellipsis … entity.

    +
    +

    Lists

    Unordered

    -

    A list of items in which the order of the items does not explicitly matter.

    -

    You may use any of the following symbols to denote bullets for each list item:

    -
    * valid bullet
-- valid bullet
-+ valid bullet
-

    For example

    -
    + Lorem ipsum dolor sit amet
-+ Consectetur adipiscing elit
-+ Integer molestie lorem at massa
-+ Facilisis in pretium nisl aliquet
-+ Nulla volutpat aliquam velit
-  - Phasellus iaculis neque
-  - Purus sodales ultricies
+
    You can write a list of items in which the order of the items does not explicitly matter.
    
+
    It is possible to nest lists by indenting an item for the next sublevel.
    
+
    You may use any of -, * or + to denote bullets for each list item but should not switch between those symbols inside one whole list.
    
+
    - Lorem ipsum dolor sit amet
+- Consectetur adipiscing elit
   - Vestibulum laoreet porttitor sem
   - Ac tristique libero volutpat at
-+ Faucibus porta lacus fringilla vel
-+ Aenean sit amet erat nunc
-+ Eget porttitor lorem
-
    Renders to:
    
-
+    - Nulla volutpat aliquam velit
+  - Phasellus iaculis neque
+  - Purus sodales ultricies
+- Faucibus porta lacus fringilla vel
+
    +
    +
    Result
    +
    • Lorem ipsum dolor sit amet
      • -
    • Consectetur adipiscing elit
      • -
    • Integer molestie lorem at massa
      • -
    • Facilisis in pretium nisl aliquet
      • -
    • Nulla volutpat aliquam velit +
    • Consectetur adipiscing elit
        -
      • Phasellus iaculis neque
        • -
      • Purus sodales ultricies
      • Vestibulum laoreet porttitor sem
      • Ac tristique libero volutpat at
      • -
    • Faucibus porta lacus fringilla vel
      • -
    • Aenean sit amet erat nunc
      • -
    • Eget porttitor lorem
      • +
    • Nulla volutpat aliquam velit +
        +
      • Phasellus iaculis neque
        • +
      • Purus sodales ultricies
      - -

      And this HTML

      -
      <ul>
-  <li>Lorem ipsum dolor sit amet</li>
-  <li>Consectetur adipiscing elit</li>
-  <li>Integer molestie lorem at massa</li>
-  <li>Facilisis in pretium nisl aliquet</li>
-  <li>Nulla volutpat aliquam velit
-    <ul>
-      <li>Phasellus iaculis neque</li>
-      <li>Purus sodales ultricies</li>
-      <li>Vestibulum laoreet porttitor sem</li>
-      <li>Ac tristique libero volutpat at</li>
-    </ul>
-  </li>
-  <li>Faucibus porta lacus fringilla vel</li>
-  <li>Aenean sit amet erat nunc</li>
-  <li>Eget porttitor lorem</li>
-</ul>
-

      Ordered

      -

      A list of items in which the order of items does explicitly matter.

      -
      1. Lorem ipsum dolor sit amet
-4. Consectetur adipiscing elit
-2. Integer molestie lorem at massa
-8. Facilisis in pretium nisl aliquet
-4. Nulla volutpat aliquam velit
-99. Faucibus porta lacus fringilla vel
-21. Aenean sit amet erat nunc
-6. Eget porttitor lorem
-

      Renders to:

      -
        -
      1. Lorem ipsum dolor sit amet
        2. -
      2. Consectetur adipiscing elit
        3. -
      3. Integer molestie lorem at massa
        4. -
      4. Facilisis in pretium nisl aliquet
        5. -
      5. Nulla volutpat aliquam velit
        6. +
      6. Faucibus porta lacus fringilla vel
        7. -
      7. Aenean sit amet erat nunc
        8. -
      8. Eget porttitor lorem
        9. -
      -

      And this HTML:

      -
      <ol>
-  <li>Lorem ipsum dolor sit amet</li>
-  <li>Consectetur adipiscing elit</li>
-  <li>Integer molestie lorem at massa</li>
-  <li>Facilisis in pretium nisl aliquet</li>
-  <li>Nulla volutpat aliquam velit</li>
-  <li>Faucibus porta lacus fringilla vel</li>
-  <li>Aenean sit amet erat nunc</li>
-  <li>Eget porttitor lorem</li>
-</ol>
-
      -
      -
      Tip
      -
      -

      If you just use 1. for each number, Markdown will automatically number each item. For example:

      +
    +

    Ordered

    +

    You can create a list of items in which the order of items does explicitly matter.

    +

    It is possible to nest lists by indenting an item for the next sublevel.

    +

    Markdown will automatically number each of your items consecutively. This means, the order number you are providing is irrelevant.

    1. Lorem ipsum dolor sit amet
-1. Consectetur adipiscing elit
-1. Integer molestie lorem at massa
-1. Facilisis in pretium nisl aliquet
-1. Nulla volutpat aliquam velit
-1. Faucibus porta lacus fringilla vel
-1. Aenean sit amet erat nunc
-1. Eget porttitor lorem
-

    Renders to:

    +3. Consectetur adipiscing elit + 1. Integer molestie lorem at massa + 7. Facilisis in pretium nisl aliquet +99. Nulla volutpat aliquam velit + 1. Faucibus porta lacus fringilla vel + 1. Aenean sit amet erat nunc +17. Eget porttitor lorem +
+
+
Result
+
  1. Lorem ipsum dolor sit amet
    2. -
  2. Consectetur adipiscing elit
    3. +
  3. Consectetur adipiscing elit +
    1. Integer molestie lorem at massa
    2. Facilisis in pretium nisl aliquet
      3. -
    3. Nulla volutpat aliquam velit
      4. +
    +
    4. +
  4. Nulla volutpat aliquam velit +
    1. Faucibus porta lacus fringilla vel
    2. Aenean sit amet erat nunc
      3. +
    +
  5. Eget porttitor lorem
+
+
+

Tasks

+

In GFM (GitHub flavored Markdown) you can add task lists resulting in checked or unchecked non-clickable items

+
- [x] Basic Test
+- [ ] More Tests
+  - [x] View
+  - [x] Hear
+  - [ ] Smell
+
+
+
Result
+
+
    +
  • Basic Test
    • +
  • More Tests +
      +
    • View
      • +
    • Hear
      • +
    • Smell
      • +
    +
    • +
+
+
+

Defintions

+

This Markdown dialect supports an extension to add defintion lists. Definition lists are made of terms and definitions of these terms, much like in a dictionary.

+

A definition list in Markdown Extra is made of a single-line term followed by a colon and the definition for that term. You can also associate more than one term to a definition.

+

If you add empty lines around the definition terms, additional vertical space will be generated. Also multiple paragraphs are possible

+
Apple
+: Pomaceous fruit of plants of the genus Malus in the family Rosaceae.
+: An American computer company.
+
+Orange
+: The fruit of an evergreen tree of the genus Citrus.
+
+  You can make juice out of it.
+: A telecommunication company.
+
+  You can't make juice out of it.
+
+
+
Result
+
+
+
Apple
+
Pomaceous fruit of plants of the genus Malus in the family Rosaceae.
+
An American computer company.
+
Orange
+
The fruit of an evergreen tree of the genus Citrus. +

You can make juice out of it.

+
+
A telecommunication company. +

You can’t make juice out of it.

+
+
+
+

Code

-

Inline code

-

Wrap inline snippets of code with `.

-
In this example, `<div></div>` should be wrapped as **code**.
-

Renders to:

-

In this example, <div></div> should be wrapped as code.

-

HTML:

-
<p>In this example, <code>&lt;div&gt;&lt;/div&gt;</code> should be wrapped as <strong>code</strong>.</p>
-

Indented code

-

Or indent several lines of code by at least two spaces, as in:

-
    // Some comments
+
Inline Code

+
Inline snippets of code can be wrapped with backticks `.

+
In this example, `<div></div>` is marked as code.
+

+

+  
 Result

+  

+
In this example, <div></div> is marked as code.

+    

+

+
Indented Code Block

+
A simple code block can be generated by indenting several lines of code by at least two spaces.

+
Be impressed by my advanced code:
+
+    // Some comments
     line 1 of code
     line 2 of code
     line 3 of code
-
Renders to:

-
+
+
+
Result
+
+

Be impressed by my advanced code:

// Some comments
 line 1 of code
 line 2 of code
 line 3 of code
- -

HTML:

-
<pre>
-  <code>
-    // Some comments
-    line 1 of code
-    line 2 of code
-    line 3 of code
-  </code>
-</pre>
-

Block code “fences”

-

Use “fences” ``` to block in multiple lines of code.

-
```
-Sample text here...
-```
-

HTML:

-
<pre>
-  <code>Sample text here...</code>
-</pre>
-

Syntax highlighting

-

GFM, or “GitHub Flavored Markdown” also supports syntax highlighting. To activate it, usually you simply add the file extension of the language you want to use directly after the first code “fence”, ```js, and syntax highlighting will automatically be applied in the rendered HTML.

+
+
+

Fenced Code Block

+

If you want to gain more control of your code block you can enclose your code by at least three backticks ``` a so called fence.

+

In GFM (GitHub Flavored Markdown) you can also add a language specifier directly after the opening fence, ```js, and syntax highlighting will automatically be applied according to the selected language in the rendered HTML.

See Code Highlighting for additional documentation.

-

For example, to apply syntax highlighting to JavaScript code:

```js
 grunt.initConfig({
   assemble: {
@@ -371,7 +385,10 @@ line 3 of code
   }
 };
 ```
-

Renders to:

+ +
+
Result
+ 
grunt.initConfig({
   assemble: {
     options: {
@@ -390,14 +407,19 @@ line 3 of code
     }
   }
 };
-

Tables

-

Tables are created by adding pipes as dividers between each cell, and by adding a line of dashes (also separated by bars) beneath the header. Note that the pipes do not need to be vertically aligned.

+
+ +

Tables

+

In GFM (GitHub flavored Markdown) you can create tables by adding pipes as dividers between each cell, and by adding a line of dashes (also separated by bars) beneath the header. Note that the pipes do not need to be vertically aligned.

| 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. |
-

Renders to:

+ +
+
Result
+
@@ -420,205 +442,298 @@ line 3 of code
-

And this HTML:

-
<table>
-  <tr>
-    <th>Option</th>
-    <th>Description</th>
-  </tr>
-  <tr>
-    <td>data</td>
-    <td>path to data files to supply the data that will be passed into templates.</td>
-  </tr>
-  <tr>
-    <td>engine</td>
-    <td>engine to be used for processing templates. Handlebars is the default.</td>
-  </tr>
-  <tr>
-    <td>ext</td>
-    <td>extension to be used for dest files.</td>
-  </tr>
-</table>
-

Right aligned text

-

Adding a colon on the right side of the dashes below any heading will right align text for that column.

-
| 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. |
-
+ + +

Aligned Columns

+

Adding a colon on the left and/or right side of the dashes below any heading will align the text for that column accordingly.

+
| Option | Number | Description |
+| ------:|:------:|:----------- |
+| data   | 1      | path to data files to supply the data that will be passed into templates. |
+| engine | 2      | engine to be used for processing templates. Handlebars is the default. |
+| ext    | 3      | extension to be used for dest files. |
+
+
+
Result
+
+
- + + - + + - + + - + +
OptionDescriptionNumberDescription
datapath to data files to supply the data that will be passed into templates.1path to data files to supply the data that will be passed into templates.
engineengine to be used for processing templates. Handlebars is the default.2engine to be used for processing templates. Handlebars is the default.
extextension to be used for dest files.3extension to be used for dest files.
-

Two tables adjacent

- - - - - - - - - - - - - -
OptionDescription
extextension to be used for dest files.
- - - - - - - - - - - - - -
OptionDescription
extextension to be used for dest files.
- - -
[Assemble](http://assemble.io)
-

Renders to (hover over the link, there is no tooltip):

-

Assemble

-

HTML:

-
<a href="http://assemble.io">Assemble</a>
-

Add a tooltip

-
[Upstage](https://github.com/upstage/ "Visit Upstage!")
-

Renders to (hover over the link, there should be a tooltip):

-

Upstage

-

HTML:

-
<a href="https://github.com/upstage/" title="Visit Upstage!">Upstage</a>
-

Named Anchors

-

Named anchors enable you to jump to the specified anchor point on the same page. For example, each of these chapters:

-
# Table of Contents
-
-- [Chapter 1](#chapter-1)
-- [Chapter 2](#chapter-2)
-- [Chapter 3](#chapter-3)
-

will jump to these sections:

-
## Chapter 1 <a id="chapter-1"></a>
-Content for chapter one.
-
-## Chapter 2 <a id="chapter-2"></a>
-Content for chapter one.
-
-## Chapter 3 <a id="chapter-3"></a>
-Content for chapter one.
-
-
-
Note
+
+
+

Blockquotes

+

For quoting blocks of content from another source within your document add > before any text you want to quote.

+

Blockquotes can also be nested.

+
> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
+>
+> > Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.
+>
+> Mauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus.
+
+
+
Result
-

Note that specific placement of the anchor tag seems to be arbitrary. They are placed inline here since it seems to be unobtrusive, and it works.

+
+

Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.

+
+

Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.

+
+

Mauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus.

+
+
+
+ + +

In GFM (GitHub Flavored Markdown) absolute URLs will automatically be converted into a link.

+
This is a link to https://example.com.
+
+
+
Result
+
+

This is a link to https://example.com.

+
+
+ +

You can explicitly define links in case you want to use non-absolute URLs or want to give different text.

+
[Assemble](http://assemble.io)
+
+
+
Result
+
+

Assemble

+
+
+ +

For even further information, you can add an additional text, displayed in a tooltip on hovering over the link.

+
[Upstage](https://github.com/upstage/ "Visit Upstage!")
+
+
+
Result
+
+

Upstage

+
+
+ +

Links can be simplyfied for recurring reuse by using a reference ID to later define the URL location. This simplyfies writing if you want to use a link more than once in a document.

+
[Example][somelinkID]
+
+[somelinkID]: https://example.com "Go to example domain"
+
+
+
Result
+
+

Example

+
+
+

Footnotes

+

Footnotes work mostly like reference-style links. A footnote is made of two things, a marker in the text that will become a superscript number and a footnote definition that will be placed in a list of footnotes.

+

Usually the list of footnotes will be shown at the end of your document. If we use a footnote in a notice box it will instead be listed at the end of its box.

+

Footnotes can contain block elements, which means that you can put multiple paragraphs, lists, blockquotes and so on in a footnote. It works the same as for list items, just indent the following paragraphs by four spaces in the footnote definition.

+
That's some text with a footnote[^1]
+
+[^1]: And that's the footnote.
+
+That's some more text with a footnote.[^someid]
+
+[^someid]:
+    Anything of interest goes here.
+
+    Blue light glows blue.
+
+
+
Result
+
+

That’s some text with a footnote1

+

That’s some more text with a footnote.2

+
+
+
    +
  1. +

    And that’s the footnote. ↩︎

    +
    2. +
  2. +

    Anything of interest goes here.

    +

    Blue light glows blue. ↩︎

    +
    3. +
+

Images

-

Images have a similar syntax to links but include a preceding exclamation mark:

+

Basic Images

+

Images have a similar syntax to links but include a preceding exclamation mark.

![Spock](https://octodex.github.com/images/spocktocat.png)
-

+

+
+
Result
+
+

- -Spock + +Spock

-

Like links, images also have a footnote style syntax, resulting in a tooltip:

+
+
+

Image with Tooltip

+

Like links, images can also be given a tooltip.

![Picard](https://octodex.github.com/images/jean-luc-picat.jpg "Jean Luc Picard")
-

+ +

+
Result
+
+

Picard

-

Images can also be linked by reference ID to later define the URL location:

+
+
+

Image References

+

Images can also be linked by reference ID to later define the URL location. This simplyfies writing if you want to use an image more than once in a document.

![La Forge][laforge]
 
 [laforge]: https://octodex.github.com/images/trekkie.jpg "Geordi La Forge"
-

+ +

+
Result
+
+

La Forge

-

Further image formatting

-

The Hugo Markdown parser supports additional non-standard functionality.

-

Resizing image

-

Add HTTP parameters width and/or height to the link image to resize the image. Values are CSS values (default is auto).

+
+
+

Further Image Formatting

+

This theme allows additional non-standard formatting by setting query parameter at the end of the image URL.

+

Resizing

+

Add query parameter width and/or height to the link image to resize the image. Values are CSS values (default is auto).

![Minion](https://octodex.github.com/images/minion.png?width=20vw)
-

+ +

+
Result
+
+

- -Minion + +Minion

+
+
![Minion](https://octodex.github.com/images/minion.png?height=50px)
-

+ +

+
Result
+
+

- -Minion + +Minion

+
+
![Minion](https://octodex.github.com/images/minion.png?height=50px&width=40vw)
-

+ +

+
Result
+
+

- -Minion + +Minion

-

Add CSS classes

-

Add a HTTP classes parameter to the link image to add CSS classes. Add some of the predefined values or even define your own in your CSS.

-
shadow
-
![Spidertocat](https://octodex.github.com/images/spidertocat.png?classes=shadow)
-

+

+
+

CSS Classes

+

Add a query parameter classes to the link image to add CSS classes. Add some of the predefined values or even define your own in your CSS.

+
Shadow
+
![Spidertocat](https://octodex.github.com/images/spidertocat.png?classes=shadow,bg-white)
+
+
+
Result
+
+

- -Spidertocat + +Spidertocat

-
border
+
+
+
Border
![DrOctocat](https://octodex.github.com/images/droctocat.png?classes=border)
-

+ +

+
Result
+
+

DrOctocat

-
left
+
+
+
Left
![Supertocat](https://octodex.github.com/images/okal-eltocat.jpg?classes=left)
-

+ +

+
Result
+
+

Supertocat

- +
+
+ 
![Riddlocat](https://octodex.github.com/images/riddlocat.jpg?classes=right)
-

+ +

+
Result
+
+

Riddlocat

-
inline
+
+
+
Inline
![Spidertocat](https://octodex.github.com/images/spidertocat.png?classes=inline)
 ![DrOctocat](https://octodex.github.com/images/droctocat.png?classes=inline)
 ![Supertocat](https://octodex.github.com/images/okal-eltocat.jpg?classes=inline)
 ![Riddlocat](https://octodex.github.com/images/riddlocat.jpg?classes=inline)
-

+ +

+
Result
+
+

- -Spidertocat + +Spidertocat @@ -635,19 +750,33 @@ line 3 of code Riddlocat

+
+
Combination
-
![X-tocat](https://octodex.github.com/images/xtocat.jpg?width=20vw&classes=shadow,border,left)
-

+

![X-tocat](https://octodex.github.com/images/xtocat.jpg?classes=shadow,border,left)
+
+
+
Result
+
+

X-tocat

+
+
-

Add a HTTP featherlight parameter to the link image to disable lightbox. By default lightbox is enabled using the featherlight.js plugin. You can disable this by defining featherlight to false.

+

Add the query parameter featherlight=false to the image link to disable the lightbox.

![Homercat](https://octodex.github.com/images/homercat.png?featherlight=false)
-

+ +

+
Result
+
+

-Homercat

+Homercat

+
+
@@ -655,9 +784,9 @@ line 3 of code - - - - + + + + diff --git a/cont/menushortcuts/index.html b/cont/menushortcuts/index.html index 1b9486e212..6bc9823272 100644 --- a/cont/menushortcuts/index.html +++ b/cont/menushortcuts/index.html @@ -10,21 +10,21 @@ Menu extra shortcuts :: Hugo Relearn Theme - + - - - - - - - - - - - - - + + + + + + + + + + + + + - + +
@@ -283,12 +288,12 @@ However, if you want to keep the title but change its value, it can be overridde - - - - - - + + + + + +
- - - - + + + + diff --git a/cont/menushortcuts/index.print.html b/cont/menushortcuts/index.print.html index c9abb79bae..581884996c 100644 --- a/cont/menushortcuts/index.print.html +++ b/cont/menushortcuts/index.print.html @@ -10,22 +10,22 @@ Menu extra shortcuts :: Hugo Relearn Theme - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + +
@@ -185,9 +190,9 @@ However, if you want to keep the title but change its value, it can be overridde
- - - - + + + + diff --git a/cont/pages/index.html b/cont/pages/index.html index 5586c4755e..308636fc14 100644 --- a/cont/pages/index.html +++ b/cont/pages/index.html @@ -10,21 +10,21 @@ Pages organization :: Hugo Relearn Theme - + - - - - - - - - - - - - - + + + + + + + + + + + + + - + +
@@ -288,12 +293,12 @@ We’ve added the menuTitle parameter for that purpose:

- - - - - - + + + + + +
- - - - + + + + diff --git a/cont/pages/index.print.html b/cont/pages/index.print.html index 3dd3ff04b0..580c2723cf 100644 --- a/cont/pages/index.print.html +++ b/cont/pages/index.print.html @@ -10,22 +10,22 @@ Pages organization :: Hugo Relearn Theme - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + +
@@ -182,9 +187,9 @@ We’ve added the menuTitle parameter for that purpose:

- - - - + + + + diff --git a/cont/syntaxhighlight/index.html b/cont/syntaxhighlight/index.html index 98e7deb25c..73e3108324 100644 --- a/cont/syntaxhighlight/index.html +++ b/cont/syntaxhighlight/index.html @@ -10,21 +10,21 @@ Code highlighting :: Hugo Relearn Theme - + - - - - - - - - - - - - - + + + + + + + + + + + + + - + +
@@ -221,12 +226,12 @@ - - - - - - + + + + + +
- - - - + + + + diff --git a/cont/syntaxhighlight/index.print.html b/cont/syntaxhighlight/index.print.html index 7c441978c2..5c285e12fc 100644 --- a/cont/syntaxhighlight/index.print.html +++ b/cont/syntaxhighlight/index.print.html @@ -10,22 +10,22 @@ Code highlighting :: Hugo Relearn Theme - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + +
@@ -122,9 +127,9 @@
- - - - + + + + diff --git a/cont/tags/index.html b/cont/tags/index.html index 4bbbd94f8f..93e3be59ea 100644 --- a/cont/tags/index.html +++ b/cont/tags/index.html @@ -10,21 +10,21 @@ Tags :: Hugo Relearn Theme - + - - - - - - - - - - - - - + + + + + + + + + + + + + - + +
@@ -197,12 +202,12 @@ - - - - - - + + + + + +
- - - - + + + + diff --git a/cont/tags/index.print.html b/cont/tags/index.print.html index efcb0ce671..ce761aeeea 100644 --- a/cont/tags/index.print.html +++ b/cont/tags/index.print.html @@ -10,22 +10,22 @@ Tags :: Hugo Relearn Theme - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + +
@@ -98,9 +103,9 @@
- - - - + + + + diff --git a/css/ie.css b/css/ie.css index 2440aa0ac7..84480ccec4 100644 --- a/css/ie.css +++ b/css/ie.css @@ -65,6 +65,10 @@ border-bottom-left-radius: 0; } + article ul li:has(input[type="checkbox"]) { + margin-left: -1rem; + } + /* set default colors as in variant.css for IE11 */ body { background-color: #ffffff; /* var(--MAIN-BG-color) */ @@ -293,6 +297,10 @@ color: #000000; /* var(--CODE-BLOCK-color) */ } + table { + background-color: #ffffff; /* var(--INTERNAL-MAIN-BG-color) */ + } + div.featherlight .featherlight-content{ background-color: #ffffff /* var(--INTERNAL-MAIN-BG-color); */ } @@ -566,6 +574,15 @@ color: #4a4a4a; /* var(--MAIN-TITLES-TEXT-color) */ } + article ul li input[type="checkbox"] { + background-color: #ffffff; /* var(--INTERNAL-MAIN-BG-color); */ + color: #101010; /* var(--INTERNAL-MAIN-TEXT-color) */ + } + + article ul li input[type="checkbox"]::before { + box-shadow: inset 1em 1em #7dc903; /* var(--INTERNAL-PRIMARY-color) */ + } + /* set further styles to fix broken stuff in IE11 */ /* turn off animiation in IE because this causes the menu diff --git a/css/theme.css b/css/theme.css index 210e76411f..6562a802fa 100644 --- a/css/theme.css +++ b/css/theme.css @@ -45,6 +45,19 @@ th { font-weight: 600; } +ul { + list-style: disc; +} + +dt { + font-style: italic; +} + +dd { + display: list-item; + list-style: circle; +} + .default-animation{ transition: all 0.35s ease; } @@ -320,8 +333,7 @@ th { #body img.border, #body .video-container.border { - border: 2px solid #e6e6e6; - padding: 2px; + border: 2px solid rgba( 134, 134, 134, .125 ); } #body img.shadow, @@ -466,18 +478,20 @@ div.box > .box-label { } div.box > .box-content { - padding-bottom: .1rem; + padding-top: 1rem; + padding-bottom: 1rem; padding-left: 1rem; padding-right: 1rem; } -#body div.box > .box-content > :first-child { +#body div.box > .box-content > :first-child, +#body div.box > .box-content > :first-child :first-child { margin-top: 0; - padding-top: 1rem; } -#body div.box > .box-content > :last-child { - margin-bottom: 1rem; +#body div.box > .box-content > :last-child, +#body div.box > .box-content > :last-child :last-child { + margin-bottom: 0; } /* attachments shortcode */ @@ -1644,3 +1658,48 @@ input[type="search"]::-webkit-search-results-decoration { display: none; } border-start-start-radius: 0; border-end-start-radius: 0; } + +/* task list and its checkboxes */ +article ul li:has(input[type="checkbox"]) { + list-style: none; + margin-inline-start: -1rem; +} + +article ul li:has(input[type="checkbox"])::before { + content: "\200B"; /* accessibilty for Safari https://developer.mozilla.org/en-US/docs/Web/CSS/list-style */ +} + +/* https://moderncss.dev/pure-css-custom-checkbox-style/ */ +article ul li input[type="checkbox"] { + -webkit-appearance: none; + appearance: none; + /* For iOS < 15 */ + background-color: var(--INTERNAL-MAIN-BG-color); /* box background */ + border: 0.15em solid currentColor; + border-radius: 0.15em; + color: var(--INTERNAL-MAIN-TEXT-color); + display: inline-grid; + font: inherit; + height: 1.15em; + margin: 0; + place-content: center; + transform: translateY(-0.075em); + width: 1.15em; +} + +article ul li input[type="checkbox"]::before { + box-shadow: inset 1em 1em var(--INTERNAL-PRIMARY-color); + clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); + content: ""; + height: 0.65em; + transform: scale(0); + transform-origin: bottom left; + transition: 120ms transform ease-in-out; + width: 0.65em; + /* Windows High Contrast Mode fallback must be last */ + background-color: CanvasText; +} + +article ul li input[type="checkbox"]:checked::before { + transform: scale(1); +} diff --git a/css/variant.css b/css/variant.css index 36758e3c0d..3ac6ae8b59 100644 --- a/css/variant.css +++ b/css/variant.css @@ -307,6 +307,10 @@ pre { color: var(--INTERNAL-CODE-BLOCK-color); } +table { + background-color: var(--INTERNAL-MAIN-BG-color); +} + div.featherlight .featherlight-content{ background-color: var(--INTERNAL-MAIN-BG-color); } diff --git a/index.html b/index.html index e8566fe1c3..37c7b3873f 100644 --- a/index.html +++ b/index.html @@ -10,21 +10,21 @@ Hugo Relearn Theme - + - - - - - - - - - - - - - + + + + + + + + + + + + + - + +
@@ -232,12 +237,12 @@ - - - - - - + + + + + +
- - - - + + + + diff --git a/index.print.html b/index.print.html index 0f2a3a50a1..12533afdd4 100644 --- a/index.print.html +++ b/index.print.html @@ -10,22 +10,22 @@ Hugo Relearn Theme - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + +
@@ -2058,13 +2063,13 @@ We’ve added the menuTitle parameter for that purpose:

Markdown syntax

-

Let’s face it: Writing content for the Web is tiresome. WYSIWYG editors help alleviate this task, but they generally result in horrible code, or worse yet, ugly web pages.

+

Let’s face it: Writing content for the web is tiresome. WYSIWYG editors help alleviate this task, but they generally result in horrible code, or worse yet, ugly web pages.

Markdown is a better way to write HTML, without all the complexities and ugliness that usually accompanies it.

Some of the key benefits are:

  1. Markdown is simple to learn, with minimal extra characters so it’s also quicker to write content.
  2. Less chance of errors when writing in Markdown.
    3. -
  3. Produces valid XHTML output.
    4. +
  4. Produces valid HTML output.
  5. Keeps the content and the visual display separate, so you cannot mess up the look of your site.
  6. Write in any text editor or Markdown application you like.
  7. Markdown is a joy to use!
    8. @@ -2076,269 +2081,278 @@ We’ve added the menuTitle parameter for that purpose:

    Without further delay, let us go over the main elements of Markdown and what the resulting HTML looks like:

    -
    -
    Info
    +
    +
    Tip

    Bookmark this page and the official Commonmark reference for easy future reference!

    +

    Paragraphs

    +

    In Markdown your content usually spans the whole available document width. This is called a block. Blocks are always separated by whitespace to their adjacent blocks in the resulting document.

    +

    Any text not starting with a special sign is written as normal, plain text paragraph block and must be separated to its adjacent blocks by empty lines.

    +
    Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.
+
+Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.
+
    +
    +
    Result
    +
    +

    Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.

    +

    Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.

    +
    +

    Headings

    -

    Headings from h1 through h6 are constructed with a # for each level:

    +

    A good idea is to structure your content using headings and subheadings. HTML-headings from h1 through h6 are constructed with a # for each level.

    +

    In Hugo you usually don’t use h1 as this is generated by your theme and you should only have one such element in a document.

    # h1 Heading
-## h2 Heading
-### h3 Heading
-#### h4 Heading
-##### h5 Heading
-###### h6 Heading
-

    Renders to:

    - + +## h2 Heading + +### h3 Heading + +#### h4 Heading + +##### h5 Heading + +###### h6 Heading +
    +
    +
    Result
    +

    h1 Heading

    -

    h2 Heading

    h3 Heading

    h4 Heading

    h5 Heading
    h6 Heading
    -

    HTML:

    -
    <h1>h1 Heading</h1>
-<h2>h2 Heading</h2>
-<h3>h3 Heading</h3>
-<h4>h4 Heading</h4>
-<h5>h5 Heading</h5>
-<h6>h6 Heading</h6>
-

    Comments

    -

    Comments should be HTML compatible

    -
    <!--
-This is a comment
--->
-

    Comment below should NOT be seen:

    - +
    +

    Horizontal Rules

    -

    The HTML <hr> element is for creating a “thematic break” between paragraph-level elements. In Markdown, you can create a <hr> with --- - three consecutive dashes

    -

    renders to:

    +

    To further structure your content you can add horizontal rules. They create a “thematic break” between paragraph blocks. In Markdown, you can create it with three consecutive dashes ---.

    +
    Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.
+
+---
+
+Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.
+
    +
    +
    Result
    +
    +

    Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.

    -

    Paragraphs

    -

    Any text not starting with a special sign is written as normal, plain text and will be wrapped within <p></p> tags in the rendered HTML.

    -

    So this body copy:

    -
    Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.
-

    renders to this HTML:

    -
    <p>Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.</p>
-

    Text Markers

    +

    Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.

    +
    +
    +

    Text Markers

    Bold

    -

    For emphasizing a snippet of text with a heavier font-weight.

    -

    The following snippet of text is rendered as bold text.

    -
    **rendered as bold text**
-

    renders to:

    - -

    rendered as bold text

    - -

    and this HTML

    -
    <strong>rendered as bold text</strong>
-

    Italics

    -

    For emphasizing a snippet of text with italics.

    -

    The following snippet of text is rendered as italicized text.

    -
    _rendered as italicized text_
-

    renders to:

    - -

    rendered as italicized text

    - -

    and this HTML:

    -
    <em>rendered as italicized text</em>
-

    Strikethrough

    -

    In GFM (GitHub flavored Markdown) you can do strikethroughs.

    -
    ~~Strike through this text.~~
-

    Which renders to:

    -

    Strike through this text.

    -

    HTML:

    -
    <del>Strike through this text.</del>
-

    Blockquotes

    -

    For quoting blocks of content from another source within your document.

    -

    Add > before any text you want to quote.

    -
    > **Fusion Drive** combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.
-

    Renders to:

    -
    -

    Fusion Drive combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.

    -
    -

    and this HTML:

    -
    <blockquote>
-  <p><strong>Fusion Drive</strong> combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.</p>
-</blockquote>
-

    Blockquotes can also be nested:

    -
    > Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
->
-> > Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.
->
-> Mauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus.
-

    Renders to:

    -
    -

    Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.

    -
    -

    Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.

    -
    -

    Mauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus.

    -
    +

    You can show importance of a snippet of text with a heavier font-weight by enclosing it with two asterisks **.

    +
    I am rendered with **bold text**
+
    +
    +
    Result
    +
    +

    I am rendered with bold text

    +
    +
    +

    Italics

    +

    You can emphasize a snippet of text with italics by enclosing it with underscores _.

    +
    I am rendered with _italicized text_
+
    +
    +
    Result
    +
    +

    I am rendered with italicized text

    +
    +
    +

    Strikethrough

    +

    In GFM (GitHub flavored Markdown) you can do strikethroughs by enclosing text with two tildes ~~.

    +
    ~~Strike through this text~~
+
    +
    +
    Result
    +
    +

    Strike through this text

    +
    +
    +

    Text substitution

    +

    This Markdown dialect supports an extension to combine multiple punctuation characters to single typographic entities. This will only be applied to text outside of code blocks or inline code.

    +
    Double quotes `"` and single quotes `'` of enclosed text are replaced by **"double curly quotes"** and **'single curly quotes'**.
+
+Double dashes `--` and triple dashes `---` are replaced by en-dash **--** and em-dash **---** entities.
+
+Double arrows pointing left `<<` or right `>>` are replaced by arrow **<<** and **>>** entities.
+
+Three consecutive dots `...` are replaced by an ellipsis **...** entity.
+
    +
    +
    Result
    +
    +

    Double quotes " and single quotes ' of enclosed text are replaced by “double curly quotes” and ‘single curly quotes’.

    +

    Double dashes -- and triple dashes --- are replaced by en-dash – and em-dash — entities.

    +

    Double arrows pointing left << or right >> are replaced by arrow « and » entities.

    +

    Three consecutive dots ... are replaced by an ellipsis … entity.

    +
    +

    Lists

    Unordered

    -

    A list of items in which the order of the items does not explicitly matter.

    -

    You may use any of the following symbols to denote bullets for each list item:

    -
    * valid bullet
-- valid bullet
-+ valid bullet
-

    For example

    -
    + Lorem ipsum dolor sit amet
-+ Consectetur adipiscing elit
-+ Integer molestie lorem at massa
-+ Facilisis in pretium nisl aliquet
-+ Nulla volutpat aliquam velit
-  - Phasellus iaculis neque
-  - Purus sodales ultricies
+
    You can write a list of items in which the order of the items does not explicitly matter.
    
+
    It is possible to nest lists by indenting an item for the next sublevel.
    
+
    You may use any of -, * or + to denote bullets for each list item but should not switch between those symbols inside one whole list.
    
+
    - Lorem ipsum dolor sit amet
+- Consectetur adipiscing elit
   - Vestibulum laoreet porttitor sem
   - Ac tristique libero volutpat at
-+ Faucibus porta lacus fringilla vel
-+ Aenean sit amet erat nunc
-+ Eget porttitor lorem
-
    Renders to:
    
-
+    - Nulla volutpat aliquam velit
+  - Phasellus iaculis neque
+  - Purus sodales ultricies
+- Faucibus porta lacus fringilla vel
+
    +
    +
    Result
    +
    • Lorem ipsum dolor sit amet
      • -
    • Consectetur adipiscing elit
      • -
    • Integer molestie lorem at massa
      • -
    • Facilisis in pretium nisl aliquet
      • -
    • Nulla volutpat aliquam velit +
    • Consectetur adipiscing elit
        -
      • Phasellus iaculis neque
        • -
      • Purus sodales ultricies
      • Vestibulum laoreet porttitor sem
      • Ac tristique libero volutpat at
      • -
    • Faucibus porta lacus fringilla vel
      • -
    • Aenean sit amet erat nunc
      • -
    • Eget porttitor lorem
      • +
    • Nulla volutpat aliquam velit +
        +
      • Phasellus iaculis neque
        • +
      • Purus sodales ultricies
      - -

      And this HTML

      -
      <ul>
-  <li>Lorem ipsum dolor sit amet</li>
-  <li>Consectetur adipiscing elit</li>
-  <li>Integer molestie lorem at massa</li>
-  <li>Facilisis in pretium nisl aliquet</li>
-  <li>Nulla volutpat aliquam velit
-    <ul>
-      <li>Phasellus iaculis neque</li>
-      <li>Purus sodales ultricies</li>
-      <li>Vestibulum laoreet porttitor sem</li>
-      <li>Ac tristique libero volutpat at</li>
-    </ul>
-  </li>
-  <li>Faucibus porta lacus fringilla vel</li>
-  <li>Aenean sit amet erat nunc</li>
-  <li>Eget porttitor lorem</li>
-</ul>
-

      Ordered

      -

      A list of items in which the order of items does explicitly matter.

      -
      1. Lorem ipsum dolor sit amet
-4. Consectetur adipiscing elit
-2. Integer molestie lorem at massa
-8. Facilisis in pretium nisl aliquet
-4. Nulla volutpat aliquam velit
-99. Faucibus porta lacus fringilla vel
-21. Aenean sit amet erat nunc
-6. Eget porttitor lorem
-

      Renders to:

      -
        -
      1. Lorem ipsum dolor sit amet
        2. -
      2. Consectetur adipiscing elit
        3. -
      3. Integer molestie lorem at massa
        4. -
      4. Facilisis in pretium nisl aliquet
        5. -
      5. Nulla volutpat aliquam velit
        6. +
      6. Faucibus porta lacus fringilla vel
        7. -
      7. Aenean sit amet erat nunc
        8. -
      8. Eget porttitor lorem
        9. -
      -

      And this HTML:

      -
      <ol>
-  <li>Lorem ipsum dolor sit amet</li>
-  <li>Consectetur adipiscing elit</li>
-  <li>Integer molestie lorem at massa</li>
-  <li>Facilisis in pretium nisl aliquet</li>
-  <li>Nulla volutpat aliquam velit</li>
-  <li>Faucibus porta lacus fringilla vel</li>
-  <li>Aenean sit amet erat nunc</li>
-  <li>Eget porttitor lorem</li>
-</ol>
-
      -
      -
      Tip
      -
      -

      If you just use 1. for each number, Markdown will automatically number each item. For example:

      +
    +

    Ordered

    +

    You can create a list of items in which the order of items does explicitly matter.

    +

    It is possible to nest lists by indenting an item for the next sublevel.

    +

    Markdown will automatically number each of your items consecutively. This means, the order number you are providing is irrelevant.

    1. Lorem ipsum dolor sit amet
-1. Consectetur adipiscing elit
-1. Integer molestie lorem at massa
-1. Facilisis in pretium nisl aliquet
-1. Nulla volutpat aliquam velit
-1. Faucibus porta lacus fringilla vel
-1. Aenean sit amet erat nunc
-1. Eget porttitor lorem
-

    Renders to:

    +3. Consectetur adipiscing elit + 1. Integer molestie lorem at massa + 7. Facilisis in pretium nisl aliquet +99. Nulla volutpat aliquam velit + 1. Faucibus porta lacus fringilla vel + 1. Aenean sit amet erat nunc +17. Eget porttitor lorem +
+
+
Result
+
  1. Lorem ipsum dolor sit amet
    2. -
  2. Consectetur adipiscing elit
    3. +
  3. Consectetur adipiscing elit +
    1. Integer molestie lorem at massa
    2. Facilisis in pretium nisl aliquet
      3. -
    3. Nulla volutpat aliquam velit
      4. +
    +
    4. +
  4. Nulla volutpat aliquam velit +
    1. Faucibus porta lacus fringilla vel
    2. Aenean sit amet erat nunc
      3. +
    +
  5. Eget porttitor lorem
+
+
+

Tasks

+

In GFM (GitHub flavored Markdown) you can add task lists resulting in checked or unchecked non-clickable items

+
- [x] Basic Test
+- [ ] More Tests
+  - [x] View
+  - [x] Hear
+  - [ ] Smell
+
+
+
Result
+
+
    +
  • Basic Test
    • +
  • More Tests +
      +
    • View
      • +
    • Hear
      • +
    • Smell
      • +
    +
    • +
+
+
+

Defintions

+

This Markdown dialect supports an extension to add defintion lists. Definition lists are made of terms and definitions of these terms, much like in a dictionary.

+

A definition list in Markdown Extra is made of a single-line term followed by a colon and the definition for that term. You can also associate more than one term to a definition.

+

If you add empty lines around the definition terms, additional vertical space will be generated. Also multiple paragraphs are possible

+
Apple
+: Pomaceous fruit of plants of the genus Malus in the family Rosaceae.
+: An American computer company.
+
+Orange
+: The fruit of an evergreen tree of the genus Citrus.
+
+  You can make juice out of it.
+: A telecommunication company.
+
+  You can't make juice out of it.
+
+
+
Result
+
+
+
Apple
+
Pomaceous fruit of plants of the genus Malus in the family Rosaceae.
+
An American computer company.
+
Orange
+
The fruit of an evergreen tree of the genus Citrus. +

You can make juice out of it.

+
+
A telecommunication company. +

You can’t make juice out of it.

+
+
+
+

Code

-

Inline code

-

Wrap inline snippets of code with `.

-
In this example, `<div></div>` should be wrapped as **code**.
-

Renders to:

-

In this example, <div></div> should be wrapped as code.

-

HTML:

-
<p>In this example, <code>&lt;div&gt;&lt;/div&gt;</code> should be wrapped as <strong>code</strong>.</p>
-

Indented code

-

Or indent several lines of code by at least two spaces, as in:

-
    // Some comments
+
Inline Code

+
Inline snippets of code can be wrapped with backticks `.

+
In this example, `<div></div>` is marked as code.
+

+

+  
 Result

+  

+
In this example, <div></div> is marked as code.

+    

+

+
Indented Code Block

+
A simple code block can be generated by indenting several lines of code by at least two spaces.

+
Be impressed by my advanced code:
+
+    // Some comments
     line 1 of code
     line 2 of code
     line 3 of code
-
Renders to:

-
+
+
+
Result
+
+

Be impressed by my advanced code:

// Some comments
 line 1 of code
 line 2 of code
 line 3 of code
- -

HTML:

-
<pre>
-  <code>
-    // Some comments
-    line 1 of code
-    line 2 of code
-    line 3 of code
-  </code>
-</pre>
-

Block code “fences”

-

Use “fences” ``` to block in multiple lines of code.

-
```
-Sample text here...
-```
-

HTML:

-
<pre>
-  <code>Sample text here...</code>
-</pre>
-

Syntax highlighting

-

GFM, or “GitHub Flavored Markdown” also supports syntax highlighting. To activate it, usually you simply add the file extension of the language you want to use directly after the first code “fence”, ```js, and syntax highlighting will automatically be applied in the rendered HTML.

+
+
+

Fenced Code Block

+

If you want to gain more control of your code block you can enclose your code by at least three backticks ``` a so called fence.

+

In GFM (GitHub Flavored Markdown) you can also add a language specifier directly after the opening fence, ```js, and syntax highlighting will automatically be applied according to the selected language in the rendered HTML.

See Code Highlighting for additional documentation.

-

For example, to apply syntax highlighting to JavaScript code:

```js
 grunt.initConfig({
   assemble: {
@@ -2359,7 +2373,10 @@ line 3 of code
   }
 };
 ```
-

Renders to:

+ +
+
Result
+ 
grunt.initConfig({
   assemble: {
     options: {
@@ -2378,14 +2395,19 @@ line 3 of code
     }
   }
 };
-

Tables

-

Tables are created by adding pipes as dividers between each cell, and by adding a line of dashes (also separated by bars) beneath the header. Note that the pipes do not need to be vertically aligned.

+
+ +

Tables

+

In GFM (GitHub flavored Markdown) you can create tables by adding pipes as dividers between each cell, and by adding a line of dashes (also separated by bars) beneath the header. Note that the pipes do not need to be vertically aligned.

| 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. |
-

Renders to:

+ +
+
Result
+
@@ -2408,205 +2430,298 @@ line 3 of code
-

And this HTML:

-
<table>
-  <tr>
-    <th>Option</th>
-    <th>Description</th>
-  </tr>
-  <tr>
-    <td>data</td>
-    <td>path to data files to supply the data that will be passed into templates.</td>
-  </tr>
-  <tr>
-    <td>engine</td>
-    <td>engine to be used for processing templates. Handlebars is the default.</td>
-  </tr>
-  <tr>
-    <td>ext</td>
-    <td>extension to be used for dest files.</td>
-  </tr>
-</table>
-

Right aligned text

-

Adding a colon on the right side of the dashes below any heading will right align text for that column.

-
| 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. |
-
+ + +

Aligned Columns

+

Adding a colon on the left and/or right side of the dashes below any heading will align the text for that column accordingly.

+
| Option | Number | Description |
+| ------:|:------:|:----------- |
+| data   | 1      | path to data files to supply the data that will be passed into templates. |
+| engine | 2      | engine to be used for processing templates. Handlebars is the default. |
+| ext    | 3      | extension to be used for dest files. |
+
+
+
Result
+
+
- + + - + + - + + - + +
OptionDescriptionNumberDescription
datapath to data files to supply the data that will be passed into templates.1path to data files to supply the data that will be passed into templates.
engineengine to be used for processing templates. Handlebars is the default.2engine to be used for processing templates. Handlebars is the default.
extextension to be used for dest files.3extension to be used for dest files.
-

Two tables adjacent

- - - - - - - - - - - - - -
OptionDescription
extextension to be used for dest files.
- - - - - - - - - - - - - -
OptionDescription
extextension to be used for dest files.
- - -
[Assemble](http://assemble.io)
-

Renders to (hover over the link, there is no tooltip):

-

Assemble

-

HTML:

-
<a href="http://assemble.io">Assemble</a>
-

Add a tooltip

-
[Upstage](https://github.com/upstage/ "Visit Upstage!")
-

Renders to (hover over the link, there should be a tooltip):

-

Upstage

-

HTML:

-
<a href="https://github.com/upstage/" title="Visit Upstage!">Upstage</a>
-

Named Anchors

-

Named anchors enable you to jump to the specified anchor point on the same page. For example, each of these chapters:

-
# Table of Contents
-
-- [Chapter 1](#chapter-1)
-- [Chapter 2](#chapter-2)
-- [Chapter 3](#chapter-3)
-

will jump to these sections:

-
## Chapter 1 <a id="chapter-1"></a>
-Content for chapter one.
-
-## Chapter 2 <a id="chapter-2"></a>
-Content for chapter one.
-
-## Chapter 3 <a id="chapter-3"></a>
-Content for chapter one.
-
-
-
Note
+
+
+

Blockquotes

+

For quoting blocks of content from another source within your document add > before any text you want to quote.

+

Blockquotes can also be nested.

+
> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
+>
+> > Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.
+>
+> Mauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus.
+
+
+
Result
-

Note that specific placement of the anchor tag seems to be arbitrary. They are placed inline here since it seems to be unobtrusive, and it works.

+
+

Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.

+
+

Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.

+
+

Mauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus.

+
+
+
+ + +

In GFM (GitHub Flavored Markdown) absolute URLs will automatically be converted into a link.

+
This is a link to https://example.com.
+
+
+
Result
+
+

This is a link to https://example.com.

+
+
+ +

You can explicitly define links in case you want to use non-absolute URLs or want to give different text.

+
[Assemble](http://assemble.io)
+
+
+
Result
+
+

Assemble

+
+
+ +

For even further information, you can add an additional text, displayed in a tooltip on hovering over the link.

+
[Upstage](https://github.com/upstage/ "Visit Upstage!")
+
+
+
Result
+
+

Upstage

+
+
+ +

Links can be simplyfied for recurring reuse by using a reference ID to later define the URL location. This simplyfies writing if you want to use a link more than once in a document.

+
[Example][somelinkID]
+
+[somelinkID]: https://example.com "Go to example domain"
+
+
+
Result
+
+

Example

+
+
+

Footnotes

+

Footnotes work mostly like reference-style links. A footnote is made of two things, a marker in the text that will become a superscript number and a footnote definition that will be placed in a list of footnotes.

+

Usually the list of footnotes will be shown at the end of your document. If we use a footnote in a notice box it will instead be listed at the end of its box.

+

Footnotes can contain block elements, which means that you can put multiple paragraphs, lists, blockquotes and so on in a footnote. It works the same as for list items, just indent the following paragraphs by four spaces in the footnote definition.

+
That's some text with a footnote[^1]
+
+[^1]: And that's the footnote.
+
+That's some more text with a footnote.[^someid]
+
+[^someid]:
+    Anything of interest goes here.
+
+    Blue light glows blue.
+
+
+
Result
+
+

That’s some text with a footnote1

+

That’s some more text with a footnote.2

+
+
+
    +
  1. +

    And that’s the footnote. ↩︎

    +
    2. +
  2. +

    Anything of interest goes here.

    +

    Blue light glows blue. ↩︎

    +
    3. +
+

Images

-

Images have a similar syntax to links but include a preceding exclamation mark:

+

Basic Images

+

Images have a similar syntax to links but include a preceding exclamation mark.

![Spock](https://octodex.github.com/images/spocktocat.png)
-

+

+
+
Result
+
+

- -Spock + +Spock

-

Like links, images also have a footnote style syntax, resulting in a tooltip:

+
+
+

Image with Tooltip

+

Like links, images can also be given a tooltip.

![Picard](https://octodex.github.com/images/jean-luc-picat.jpg "Jean Luc Picard")
-

+ +

+
Result
+
+

Picard

-

Images can also be linked by reference ID to later define the URL location:

+
+
+

Image References

+

Images can also be linked by reference ID to later define the URL location. This simplyfies writing if you want to use an image more than once in a document.

![La Forge][laforge]
 
 [laforge]: https://octodex.github.com/images/trekkie.jpg "Geordi La Forge"
-

+ +

+
Result
+
+

La Forge

-

Further image formatting

-

The Hugo Markdown parser supports additional non-standard functionality.

-

Resizing image

-

Add HTTP parameters width and/or height to the link image to resize the image. Values are CSS values (default is auto).

+
+
+

Further Image Formatting

+

This theme allows additional non-standard formatting by setting query parameter at the end of the image URL.

+

Resizing

+

Add query parameter width and/or height to the link image to resize the image. Values are CSS values (default is auto).

![Minion](https://octodex.github.com/images/minion.png?width=20vw)
-

+ +

+
Result
+
+

- -Minion + +Minion

+
+
![Minion](https://octodex.github.com/images/minion.png?height=50px)
-

+ +

+
Result
+
+

- -Minion + +Minion

+
+
![Minion](https://octodex.github.com/images/minion.png?height=50px&width=40vw)
-

+ +

+
Result
+
+

- -Minion + +Minion

-

Add CSS classes

-

Add a HTTP classes parameter to the link image to add CSS classes. Add some of the predefined values or even define your own in your CSS.

-
shadow
-
![Spidertocat](https://octodex.github.com/images/spidertocat.png?classes=shadow)
-

+

+
+

CSS Classes

+

Add a query parameter classes to the link image to add CSS classes. Add some of the predefined values or even define your own in your CSS.

+
Shadow
+
![Spidertocat](https://octodex.github.com/images/spidertocat.png?classes=shadow,bg-white)
+
+
+
Result
+
+

- -Spidertocat + +Spidertocat

-
border
+
+
+
Border
![DrOctocat](https://octodex.github.com/images/droctocat.png?classes=border)
-

+ +

+
Result
+
+

DrOctocat

-
left
+
+
+
Left
![Supertocat](https://octodex.github.com/images/okal-eltocat.jpg?classes=left)
-

+ +

+
Result
+
+

Supertocat

- +
+
+ 
![Riddlocat](https://octodex.github.com/images/riddlocat.jpg?classes=right)
-

+ +

+
Result
+
+

Riddlocat

-
inline
+
+
+
Inline
![Spidertocat](https://octodex.github.com/images/spidertocat.png?classes=inline)
 ![DrOctocat](https://octodex.github.com/images/droctocat.png?classes=inline)
 ![Supertocat](https://octodex.github.com/images/okal-eltocat.jpg?classes=inline)
 ![Riddlocat](https://octodex.github.com/images/riddlocat.jpg?classes=inline)
-

+ +

+
Result
+
+

- -Spidertocat + +Spidertocat @@ -2623,19 +2738,33 @@ line 3 of code Riddlocat

+
+
Combination
-
![X-tocat](https://octodex.github.com/images/xtocat.jpg?width=20vw&classes=shadow,border,left)
-

+

![X-tocat](https://octodex.github.com/images/xtocat.jpg?classes=shadow,border,left)
+
+
+
Result
+
+

X-tocat

+
+
-

Add a HTTP featherlight parameter to the link image to disable lightbox. By default lightbox is enabled using the featherlight.js plugin. You can disable this by defining featherlight to false.

+

Add the query parameter featherlight=false to the image link to disable the lightbox.

![Homercat](https://octodex.github.com/images/homercat.png?featherlight=false)
-

+ +

+
Result
+
+

-Homercat

+Homercat

+
+
@@ -5727,9 +5856,9 @@ mindmap - - - + + + - - - + + + - + - + diff --git a/index.search.js b/index.search.js index dcca95cb96..49ceb83a97 100644 --- a/index.search.js +++ b/index.search.js @@ -42,7 +42,7 @@ var relearn_search_index = [ "uri": "/basics/migration/index.html" }, { - "content": "Let’s face it: Writing content for the Web is tiresome. WYSIWYG editors help alleviate this task, but they generally result in horrible code, or worse yet, ugly web pages.\nMarkdown is a better way to write HTML, without all the complexities and ugliness that usually accompanies it.\nSome of the key benefits are:\nMarkdown is simple to learn, with minimal extra characters so it’s also quicker to write content. Less chance of errors when writing in Markdown. Produces valid XHTML output. Keeps the content and the visual display separate, so you cannot mess up the look of your site. Write in any text editor or Markdown application you like. Markdown is a joy to use! John Gruber, the author of Markdown, puts it like this:\nThe overriding design goal for Markdown’s formatting syntax is to make it as readable as possible. The idea is that a Markdown-formatted document should be publishable as-is, as plain text, without looking like it’s been marked up with tags or formatting instructions. While Markdown’s syntax has been influenced by several existing text-to-HTML filters, the single biggest source of inspiration for Markdown’s syntax is the format of plain text email. John Gruber\nWithout further delay, let us go over the main elements of Markdown and what the resulting HTML looks like:\nInfo Bookmark this page and the official Commonmark reference for easy future reference!\nHeadings Headings from h1 through h6 are constructed with a # for each level:\n# h1 Heading ## h2 Heading ### h3 Heading #### h4 Heading ##### h5 Heading ###### h6 Heading Renders to:\nh1 Heading h2 Heading h3 Heading h4 Heading h5 Heading h6 Heading HTML:\n\u003ch1\u003eh1 Heading\u003c/h1\u003e \u003ch2\u003eh2 Heading\u003c/h2\u003e \u003ch3\u003eh3 Heading\u003c/h3\u003e \u003ch4\u003eh4 Heading\u003c/h4\u003e \u003ch5\u003eh5 Heading\u003c/h5\u003e \u003ch6\u003eh6 Heading\u003c/h6\u003e Comments Comments should be HTML compatible\n\u003c!-- This is a comment --\u003e Comment below should NOT be seen:\nHorizontal Rules The HTML \u003chr\u003e element is for creating a “thematic break” between paragraph-level elements. In Markdown, you can create a \u003chr\u003e with --- - three consecutive dashes\nrenders to:\nParagraphs Any text not starting with a special sign is written as normal, plain text and will be wrapped within \u003cp\u003e\u003c/p\u003e tags in the rendered HTML.\nSo this body copy:\nLorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad. renders to this HTML:\n\u003cp\u003eLorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.\u003c/p\u003e Text Markers Bold For emphasizing a snippet of text with a heavier font-weight.\nThe following snippet of text is rendered as bold text.\n**rendered as bold text** renders to:\nrendered as bold text\nand this HTML\n\u003cstrong\u003erendered as bold text\u003c/strong\u003e Italics For emphasizing a snippet of text with italics.\nThe following snippet of text is rendered as italicized text.\n_rendered as italicized text_ renders to:\nrendered as italicized text\nand this HTML:\n\u003cem\u003erendered as italicized text\u003c/em\u003e Strikethrough In GFM (GitHub flavored Markdown) you can do strikethroughs.\n~~Strike through this text.~~ Which renders to:\nStrike through this text.\nHTML:\n\u003cdel\u003eStrike through this text.\u003c/del\u003e Blockquotes For quoting blocks of content from another source within your document.\nAdd \u003e before any text you want to quote.\n\u003e **Fusion Drive** combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined. Renders to:\nFusion Drive combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.\nand this HTML:\n\u003cblockquote\u003e \u003cp\u003e\u003cstrong\u003eFusion Drive\u003c/strong\u003e combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.\u003c/p\u003e \u003c/blockquote\u003e Blockquotes can also be nested:\n\u003e Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi. \u003e \u003e \u003e Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam. \u003e \u003e Mauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus. Renders to:\nDonec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.\nSed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.\nMauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus.\nLists Unordered A list of items in which the order of the items does not explicitly matter.\nYou may use any of the following symbols to denote bullets for each list item:\n* valid bullet - valid bullet + valid bullet For example\n+ Lorem ipsum dolor sit amet + Consectetur adipiscing elit + Integer molestie lorem at massa + Facilisis in pretium nisl aliquet + Nulla volutpat aliquam velit - Phasellus iaculis neque - Purus sodales ultricies - Vestibulum laoreet porttitor sem - Ac tristique libero volutpat at + Faucibus porta lacus fringilla vel + Aenean sit amet erat nunc + Eget porttitor lorem Renders to:\nLorem ipsum dolor sit amet Consectetur adipiscing elit Integer molestie lorem at massa Facilisis in pretium nisl aliquet Nulla volutpat aliquam velit Phasellus iaculis neque Purus sodales ultricies Vestibulum laoreet porttitor sem Ac tristique libero volutpat at Faucibus porta lacus fringilla vel Aenean sit amet erat nunc Eget porttitor lorem And this HTML\n\u003cul\u003e \u003cli\u003eLorem ipsum dolor sit amet\u003c/li\u003e \u003cli\u003eConsectetur adipiscing elit\u003c/li\u003e \u003cli\u003eInteger molestie lorem at massa\u003c/li\u003e \u003cli\u003eFacilisis in pretium nisl aliquet\u003c/li\u003e \u003cli\u003eNulla volutpat aliquam velit \u003cul\u003e \u003cli\u003ePhasellus iaculis neque\u003c/li\u003e \u003cli\u003ePurus sodales ultricies\u003c/li\u003e \u003cli\u003eVestibulum laoreet porttitor sem\u003c/li\u003e \u003cli\u003eAc tristique libero volutpat at\u003c/li\u003e \u003c/ul\u003e \u003c/li\u003e \u003cli\u003eFaucibus porta lacus fringilla vel\u003c/li\u003e \u003cli\u003eAenean sit amet erat nunc\u003c/li\u003e \u003cli\u003eEget porttitor lorem\u003c/li\u003e \u003c/ul\u003e Ordered A list of items in which the order of items does explicitly matter.\n1. Lorem ipsum dolor sit amet 4. Consectetur adipiscing elit 2. Integer molestie lorem at massa 8. Facilisis in pretium nisl aliquet 4. Nulla volutpat aliquam velit 99. Faucibus porta lacus fringilla vel 21. Aenean sit amet erat nunc 6. Eget porttitor lorem Renders to:\nLorem ipsum dolor sit amet Consectetur adipiscing elit Integer molestie lorem at massa Facilisis in pretium nisl aliquet Nulla volutpat aliquam velit Faucibus porta lacus fringilla vel Aenean sit amet erat nunc Eget porttitor lorem And this HTML:\n\u003col\u003e \u003cli\u003eLorem ipsum dolor sit amet\u003c/li\u003e \u003cli\u003eConsectetur adipiscing elit\u003c/li\u003e \u003cli\u003eInteger molestie lorem at massa\u003c/li\u003e \u003cli\u003eFacilisis in pretium nisl aliquet\u003c/li\u003e \u003cli\u003eNulla volutpat aliquam velit\u003c/li\u003e \u003cli\u003eFaucibus porta lacus fringilla vel\u003c/li\u003e \u003cli\u003eAenean sit amet erat nunc\u003c/li\u003e \u003cli\u003eEget porttitor lorem\u003c/li\u003e \u003c/ol\u003e Tip If you just use 1. for each number, Markdown will automatically number each item. For example:\n1. Lorem ipsum dolor sit amet 1. Consectetur adipiscing elit 1. Integer molestie lorem at massa 1. Facilisis in pretium nisl aliquet 1. Nulla volutpat aliquam velit 1. Faucibus porta lacus fringilla vel 1. Aenean sit amet erat nunc 1. Eget porttitor lorem Renders to:\nLorem ipsum dolor sit amet Consectetur adipiscing elit Integer molestie lorem at massa Facilisis in pretium nisl aliquet Nulla volutpat aliquam velit Faucibus porta lacus fringilla vel Aenean sit amet erat nunc Eget porttitor lorem Code Inline code Wrap inline snippets of code with `.\nIn this example, `\u003cdiv\u003e\u003c/div\u003e` should be wrapped as **code**. Renders to:\nIn this example, \u003cdiv\u003e\u003c/div\u003e should be wrapped as code.\nHTML:\n\u003cp\u003eIn this example, \u003ccode\u003e\u0026lt;div\u0026gt;\u0026lt;/div\u0026gt;\u003c/code\u003e should be wrapped as \u003cstrong\u003ecode\u003c/strong\u003e.\u003c/p\u003e Indented code Or indent several lines of code by at least two spaces, as in:\n// Some comments line 1 of code line 2 of code line 3 of code Renders to:\n// Some comments line 1 of code line 2 of code line 3 of code HTML:\n\u003cpre\u003e \u003ccode\u003e // Some comments line 1 of code line 2 of code line 3 of code \u003c/code\u003e \u003c/pre\u003e Block code “fences” Use “fences” ``` to block in multiple lines of code.\n``` Sample text here... ``` HTML:\n\u003cpre\u003e \u003ccode\u003eSample text here...\u003c/code\u003e \u003c/pre\u003e Syntax highlighting GFM, or “GitHub Flavored Markdown” also supports syntax highlighting. To activate it, usually you simply add the file extension of the language you want to use directly after the first code “fence”, ```js, and syntax highlighting will automatically be applied in the rendered HTML.\nSee Code Highlighting for additional documentation.\nFor example, to apply syntax highlighting to JavaScript code:\n```js grunt.initConfig({ assemble: { options: { assets: 'docs/assets', data: 'src/data/*.{json,yml}', helpers: 'src/custom-helpers.js', partials: ['src/partials/**/*.{hbs,md}'] }, pages: { options: { layout: 'default.hbs' }, files: { './': ['src/templates/pages/index.hbs'] } } } }; ``` Renders to:\ngrunt.initConfig({ assemble: { options: { assets: 'docs/assets', data: 'src/data/*.{json,yml}', helpers: 'src/custom-helpers.js', partials: ['src/partials/**/*.{hbs,md}'] }, pages: { options: { layout: 'default.hbs' }, files: { './': ['src/templates/pages/index.hbs'] } } } }; Tables Tables are created by adding pipes as dividers between each cell, and by adding a line of dashes (also separated by bars) beneath the header. Note that the pipes do not need to be vertically aligned.\n| 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. | Renders to:\nOption 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. And this HTML:\n\u003ctable\u003e \u003ctr\u003e \u003cth\u003eOption\u003c/th\u003e \u003cth\u003eDescription\u003c/th\u003e \u003c/tr\u003e \u003ctr\u003e \u003ctd\u003edata\u003c/td\u003e \u003ctd\u003epath to data files to supply the data that will be passed into templates.\u003c/td\u003e \u003c/tr\u003e \u003ctr\u003e \u003ctd\u003eengine\u003c/td\u003e \u003ctd\u003eengine to be used for processing templates. Handlebars is the default.\u003c/td\u003e \u003c/tr\u003e \u003ctr\u003e \u003ctd\u003eext\u003c/td\u003e \u003ctd\u003eextension to be used for dest files.\u003c/td\u003e \u003c/tr\u003e \u003c/table\u003e Right aligned text Adding a colon on the right side of the dashes below any heading will right align text for that column.\n| 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. | 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. Two tables adjacent Option Description ext extension to be used for dest files. Option Description ext extension to be used for dest files. Links Basic link [Assemble](http://assemble.io) Renders to (hover over the link, there is no tooltip):\nAssemble\nHTML:\n\u003ca href=\"http://assemble.io\"\u003eAssemble\u003c/a\u003e Add a tooltip [Upstage](https://github.com/upstage/ \"Visit Upstage!\") Renders to (hover over the link, there should be a tooltip):\nUpstage\nHTML:\n\u003ca href=\"https://github.com/upstage/\" title=\"Visit Upstage!\"\u003eUpstage\u003c/a\u003e Named Anchors Named anchors enable you to jump to the specified anchor point on the same page. For example, each of these chapters:\n# Table of Contents - [Chapter 1](#chapter-1) - [Chapter 2](#chapter-2) - [Chapter 3](#chapter-3) will jump to these sections:\n## Chapter 1 \u003ca id=\"chapter-1\"\u003e\u003c/a\u003e Content for chapter one. ## Chapter 2 \u003ca id=\"chapter-2\"\u003e\u003c/a\u003e Content for chapter one. ## Chapter 3 \u003ca id=\"chapter-3\"\u003e\u003c/a\u003e Content for chapter one. Note Note that specific placement of the anchor tag seems to be arbitrary. They are placed inline here since it seems to be unobtrusive, and it works.\nImages Images have a similar syntax to links but include a preceding exclamation mark:\n![Spock](https://octodex.github.com/images/spocktocat.png) Like links, images also have a footnote style syntax, resulting in a tooltip:\n![Picard](https://octodex.github.com/images/jean-luc-picat.jpg \"Jean Luc Picard\") Images can also be linked by reference ID to later define the URL location:\n![La Forge][laforge] [laforge]: https://octodex.github.com/images/trekkie.jpg \"Geordi La Forge\" Further image formatting The Hugo Markdown parser supports additional non-standard functionality.\nResizing image Add HTTP parameters width and/or height to the link image to resize the image. Values are CSS values (default is auto).\n![Minion](https://octodex.github.com/images/minion.png?width=20vw) ![Minion](https://octodex.github.com/images/minion.png?height=50px) ![Minion](https://octodex.github.com/images/minion.png?height=50px\u0026width=40vw) Add CSS classes Add a HTTP classes parameter to the link image to add CSS classes. Add some of the predefined values or even define your own in your CSS.\nshadow ![Spidertocat](https://octodex.github.com/images/spidertocat.png?classes=shadow) border ![DrOctocat](https://octodex.github.com/images/droctocat.png?classes=border) left ![Supertocat](https://octodex.github.com/images/okal-eltocat.jpg?classes=left) right ![Riddlocat](https://octodex.github.com/images/riddlocat.jpg?classes=right) inline ![Spidertocat](https://octodex.github.com/images/spidertocat.png?classes=inline) ![DrOctocat](https://octodex.github.com/images/droctocat.png?classes=inline) ![Supertocat](https://octodex.github.com/images/okal-eltocat.jpg?classes=inline) ![Riddlocat](https://octodex.github.com/images/riddlocat.jpg?classes=inline) Combination ![X-tocat](https://octodex.github.com/images/xtocat.jpg?width=20vw\u0026classes=shadow,border,left) Lightbox Add a HTTP featherlight parameter to the link image to disable lightbox. By default lightbox is enabled using the featherlight.js plugin. You can disable this by defining featherlight to false.\n![Homercat](https://octodex.github.com/images/homercat.png?featherlight=false) ", + "content": "Let’s face it: Writing content for the web is tiresome. WYSIWYG editors help alleviate this task, but they generally result in horrible code, or worse yet, ugly web pages.\nMarkdown is a better way to write HTML, without all the complexities and ugliness that usually accompanies it.\nSome of the key benefits are:\nMarkdown is simple to learn, with minimal extra characters so it’s also quicker to write content. Less chance of errors when writing in Markdown. Produces valid HTML output. Keeps the content and the visual display separate, so you cannot mess up the look of your site. Write in any text editor or Markdown application you like. Markdown is a joy to use! John Gruber, the author of Markdown, puts it like this:\nThe overriding design goal for Markdown’s formatting syntax is to make it as readable as possible. The idea is that a Markdown-formatted document should be publishable as-is, as plain text, without looking like it’s been marked up with tags or formatting instructions. While Markdown’s syntax has been influenced by several existing text-to-HTML filters, the single biggest source of inspiration for Markdown’s syntax is the format of plain text email. John Gruber\nWithout further delay, let us go over the main elements of Markdown and what the resulting HTML looks like:\nTip Bookmark this page and the official Commonmark reference for easy future reference!\nParagraphs In Markdown your content usually spans the whole available document width. This is called a block. Blocks are always separated by whitespace to their adjacent blocks in the resulting document.\nAny text not starting with a special sign is written as normal, plain text paragraph block and must be separated to its adjacent blocks by empty lines.\nLorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad. Result Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.\nEt legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.\nHeadings A good idea is to structure your content using headings and subheadings. HTML-headings from h1 through h6 are constructed with a # for each level.\nIn Hugo you usually don’t use h1 as this is generated by your theme and you should only have one such element in a document.\n# h1 Heading ## h2 Heading ### h3 Heading #### h4 Heading ##### h5 Heading ###### h6 Heading Result h1 Heading h2 Heading h3 Heading h4 Heading h5 Heading h6 Heading Horizontal Rules To further structure your content you can add horizontal rules. They create a “thematic break” between paragraph blocks. In Markdown, you can create it with three consecutive dashes ---.\nLorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. --- Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad. Result Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.\nEt legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.\nText Markers Bold You can show importance of a snippet of text with a heavier font-weight by enclosing it with two asterisks **.\nI am rendered with **bold text** Result I am rendered with bold text\nItalics You can emphasize a snippet of text with italics by enclosing it with underscores _.\nI am rendered with _italicized text_ Result I am rendered with italicized text\nStrikethrough In GFM (GitHub flavored Markdown) you can do strikethroughs by enclosing text with two tildes ~~.\n~~Strike through this text~~ Result Strike through this text\nText substitution This Markdown dialect supports an extension to combine multiple punctuation characters to single typographic entities. This will only be applied to text outside of code blocks or inline code.\nDouble quotes `\"` and single quotes `'` of enclosed text are replaced by **\"double curly quotes\"** and **'single curly quotes'**. Double dashes `--` and triple dashes `---` are replaced by en-dash **--** and em-dash **---** entities. Double arrows pointing left `\u003c\u003c` or right `\u003e\u003e` are replaced by arrow **\u003c\u003c** and **\u003e\u003e** entities. Three consecutive dots `...` are replaced by an ellipsis **...** entity. Result Double quotes \" and single quotes ' of enclosed text are replaced by “double curly quotes” and ‘single curly quotes’.\nDouble dashes -- and triple dashes --- are replaced by en-dash – and em-dash — entities.\nDouble arrows pointing left \u003c\u003c or right \u003e\u003e are replaced by arrow « and » entities.\nThree consecutive dots ... are replaced by an ellipsis … entity.\nLists Unordered You can write a list of items in which the order of the items does not explicitly matter.\nIt is possible to nest lists by indenting an item for the next sublevel.\nYou may use any of -, * or + to denote bullets for each list item but should not switch between those symbols inside one whole list.\n- Lorem ipsum dolor sit amet - Consectetur adipiscing elit - Vestibulum laoreet porttitor sem - Ac tristique libero volutpat at - Nulla volutpat aliquam velit - Phasellus iaculis neque - Purus sodales ultricies - Faucibus porta lacus fringilla vel Result Lorem ipsum dolor sit amet Consectetur adipiscing elit Vestibulum laoreet porttitor sem Ac tristique libero volutpat at Nulla volutpat aliquam velit Phasellus iaculis neque Purus sodales ultricies Faucibus porta lacus fringilla vel Ordered You can create a list of items in which the order of items does explicitly matter.\nIt is possible to nest lists by indenting an item for the next sublevel.\nMarkdown will automatically number each of your items consecutively. This means, the order number you are providing is irrelevant.\n1. Lorem ipsum dolor sit amet 3. Consectetur adipiscing elit 1. Integer molestie lorem at massa 7. Facilisis in pretium nisl aliquet 99. Nulla volutpat aliquam velit 1. Faucibus porta lacus fringilla vel 1. Aenean sit amet erat nunc 17. Eget porttitor lorem Result Lorem ipsum dolor sit amet Consectetur adipiscing elit Integer molestie lorem at massa Facilisis in pretium nisl aliquet Nulla volutpat aliquam velit Faucibus porta lacus fringilla vel Aenean sit amet erat nunc Eget porttitor lorem Tasks In GFM (GitHub flavored Markdown) you can add task lists resulting in checked or unchecked non-clickable items\n- [x] Basic Test - [ ] More Tests - [x] View - [x] Hear - [ ] Smell Result Basic Test More Tests View Hear Smell Defintions This Markdown dialect supports an extension to add defintion lists. Definition lists are made of terms and definitions of these terms, much like in a dictionary.\nA definition list in Markdown Extra is made of a single-line term followed by a colon and the definition for that term. You can also associate more than one term to a definition.\nIf you add empty lines around the definition terms, additional vertical space will be generated. Also multiple paragraphs are possible\nApple : Pomaceous fruit of plants of the genus Malus in the family Rosaceae. : An American computer company. Orange : The fruit of an evergreen tree of the genus Citrus. You can make juice out of it. : A telecommunication company. You can't make juice out of it. Result Apple Pomaceous fruit of plants of the genus Malus in the family Rosaceae. An American computer company. Orange The fruit of an evergreen tree of the genus Citrus. You can make juice out of it.\nA telecommunication company. You can’t make juice out of it.\nCode Inline Code Inline snippets of code can be wrapped with backticks `.\nIn this example, `\u003cdiv\u003e\u003c/div\u003e` is marked as code. Result In this example, \u003cdiv\u003e\u003c/div\u003e is marked as code.\nIndented Code Block A simple code block can be generated by indenting several lines of code by at least two spaces.\nBe impressed by my advanced code: // Some comments line 1 of code line 2 of code line 3 of code Result Be impressed by my advanced code:\n// Some comments line 1 of code line 2 of code line 3 of code Fenced Code Block If you want to gain more control of your code block you can enclose your code by at least three backticks ``` a so called fence.\nIn GFM (GitHub Flavored Markdown) you can also add a language specifier directly after the opening fence, ```js, and syntax highlighting will automatically be applied according to the selected language in the rendered HTML.\nSee Code Highlighting for additional documentation.\n```js grunt.initConfig({ assemble: { options: { assets: 'docs/assets', data: 'src/data/*.{json,yml}', helpers: 'src/custom-helpers.js', partials: ['src/partials/**/*.{hbs,md}'] }, pages: { options: { layout: 'default.hbs' }, files: { './': ['src/templates/pages/index.hbs'] } } } }; ``` Result grunt.initConfig({ assemble: { options: { assets: 'docs/assets', data: 'src/data/*.{json,yml}', helpers: 'src/custom-helpers.js', partials: ['src/partials/**/*.{hbs,md}'] }, pages: { options: { layout: 'default.hbs' }, files: { './': ['src/templates/pages/index.hbs'] } } } }; Tables In GFM (GitHub flavored Markdown) you can create tables by adding pipes as dividers between each cell, and by adding a line of dashes (also separated by bars) beneath the header. Note that the pipes do not need to be vertically aligned.\n| 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. | Result 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. Aligned Columns Adding a colon on the left and/or right side of the dashes below any heading will align the text for that column accordingly.\n| Option | Number | Description | | ------:|:------:|:----------- | | data | 1 | path to data files to supply the data that will be passed into templates. | | engine | 2 | engine to be used for processing templates. Handlebars is the default. | | ext | 3 | extension to be used for dest files. | Result Option Number Description data 1 path to data files to supply the data that will be passed into templates. engine 2 engine to be used for processing templates. Handlebars is the default. ext 3 extension to be used for dest files. Blockquotes For quoting blocks of content from another source within your document add \u003e before any text you want to quote.\nBlockquotes can also be nested.\n\u003e Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi. \u003e \u003e \u003e Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam. \u003e \u003e Mauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus. Result Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.\nSed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.\nMauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus.\nLinks Autolink In GFM (GitHub Flavored Markdown) absolute URLs will automatically be converted into a link.\nThis is a link to https://example.com. Result This is a link to https://example.com.\nBasic Link You can explicitly define links in case you want to use non-absolute URLs or want to give different text.\n[Assemble](http://assemble.io) Result Assemble\nLink with Tooltip For even further information, you can add an additional text, displayed in a tooltip on hovering over the link.\n[Upstage](https://github.com/upstage/ \"Visit Upstage!\") Result Upstage\nLink References Links can be simplyfied for recurring reuse by using a reference ID to later define the URL location. This simplyfies writing if you want to use a link more than once in a document.\n[Example][somelinkID] [somelinkID]: https://example.com \"Go to example domain\" Result Example\nFootnotes Footnotes work mostly like reference-style links. A footnote is made of two things, a marker in the text that will become a superscript number and a footnote definition that will be placed in a list of footnotes.\nUsually the list of footnotes will be shown at the end of your document. If we use a footnote in a notice box it will instead be listed at the end of its box.\nFootnotes can contain block elements, which means that you can put multiple paragraphs, lists, blockquotes and so on in a footnote. It works the same as for list items, just indent the following paragraphs by four spaces in the footnote definition.\nThat's some text with a footnote[^1] [^1]: And that's the footnote. That's some more text with a footnote.[^someid] [^someid]: Anything of interest goes here. Blue light glows blue. Result That’s some text with a footnote1\nThat’s some more text with a footnote.2\nAnd that’s the footnote. ↩︎\nAnything of interest goes here.\nBlue light glows blue. ↩︎\nImages Basic Images Images have a similar syntax to links but include a preceding exclamation mark.\n![Spock](https://octodex.github.com/images/spocktocat.png) Result Image with Tooltip Like links, images can also be given a tooltip.\n![Picard](https://octodex.github.com/images/jean-luc-picat.jpg \"Jean Luc Picard\") Result Image References Images can also be linked by reference ID to later define the URL location. This simplyfies writing if you want to use an image more than once in a document.\n![La Forge][laforge] [laforge]: https://octodex.github.com/images/trekkie.jpg \"Geordi La Forge\" Result Further Image Formatting This theme allows additional non-standard formatting by setting query parameter at the end of the image URL.\nResizing Add query parameter width and/or height to the link image to resize the image. Values are CSS values (default is auto).\n![Minion](https://octodex.github.com/images/minion.png?width=20vw) Result ![Minion](https://octodex.github.com/images/minion.png?height=50px) Result ![Minion](https://octodex.github.com/images/minion.png?height=50px\u0026width=40vw) Result CSS Classes Add a query parameter classes to the link image to add CSS classes. Add some of the predefined values or even define your own in your CSS.\nShadow ![Spidertocat](https://octodex.github.com/images/spidertocat.png?classes=shadow,bg-white) Result Border ![DrOctocat](https://octodex.github.com/images/droctocat.png?classes=border) Result Left ![Supertocat](https://octodex.github.com/images/okal-eltocat.jpg?classes=left) Result Right ![Riddlocat](https://octodex.github.com/images/riddlocat.jpg?classes=right) Result Inline ![Spidertocat](https://octodex.github.com/images/spidertocat.png?classes=inline) ![DrOctocat](https://octodex.github.com/images/droctocat.png?classes=inline) ![Supertocat](https://octodex.github.com/images/okal-eltocat.jpg?classes=inline) ![Riddlocat](https://octodex.github.com/images/riddlocat.jpg?classes=inline) Result Combination ![X-tocat](https://octodex.github.com/images/xtocat.jpg?classes=shadow,border,left) Result Lightbox Add the query parameter featherlight=false to the image link to disable the lightbox.\n![Homercat](https://octodex.github.com/images/homercat.png?featherlight=false) Result ", "description": "", "tags": null, "title": "Markdown syntax", diff --git a/more/credits/index.html b/more/credits/index.html index 531050edb0..0348f6d139 100644 --- a/more/credits/index.html +++ b/more/credits/index.html @@ -10,21 +10,21 @@ Credits :: Hugo Relearn Theme - + - - - - - - - - - - - - - + + + + + + + + + + + + + - + +
@@ -189,12 +194,12 @@ - - - - - - + + + + + +
- - - - + + + + diff --git a/more/credits/index.print.html b/more/credits/index.print.html index 5e6c3dfef5..f4b77419d3 100644 --- a/more/credits/index.print.html +++ b/more/credits/index.print.html @@ -10,22 +10,22 @@ Credits :: Hugo Relearn Theme - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + +
@@ -102,9 +107,9 @@
- - - - + + + + diff --git a/more/showcase/index.html b/more/showcase/index.html index 33a4946cbe..2674166a3a 100644 --- a/more/showcase/index.html +++ b/more/showcase/index.html @@ -10,21 +10,21 @@ Showcase :: Hugo Relearn Theme - + - - - - - - - - - - - - - + + + + + + + + + + + + + - + +
@@ -193,12 +198,12 @@ - - - - - - + + + + + +
- - - - + + + + diff --git a/more/showcase/index.print.html b/more/showcase/index.print.html index 735081cb39..4689548e17 100644 --- a/more/showcase/index.print.html +++ b/more/showcase/index.print.html @@ -10,22 +10,22 @@ Showcase :: Hugo Relearn Theme - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + +
@@ -94,9 +99,9 @@
- - - - + + + + diff --git a/pir/404.html b/pir/404.html index 3a79a05ad4..22cb772f27 100644 --- a/pir/404.html +++ b/pir/404.html @@ -8,21 +8,21 @@ 404 Page not found :: Cap'n Hugo Relearrrn Theme - + - - - - - - - - - - - - - + + + + + + + + + + + + + - + +
diff --git a/pir/basics/configuration/index.html b/pir/basics/configuration/index.html index 809db85033..0b4ec59a09 100644 --- a/pir/basics/configuration/index.html +++ b/pir/basics/configuration/index.html @@ -10,21 +10,21 @@ Configurrrat'n :: Cap'n Hugo Relearrrn Theme - + - - - - - - - - - - - - - + + + + + + + + + + + + + - + +
@@ -334,12 +339,12 @@ default values:

- - - - - - + + + + + +
    @@ -455,13 +460,13 @@ default values:

    Star Fork

    Built with by Hugo

    - +
- - - - + + + + diff --git a/pir/basics/configuration/index.print.html b/pir/basics/configuration/index.print.html index 2173877efe..6287aac879 100644 --- a/pir/basics/configuration/index.print.html +++ b/pir/basics/configuration/index.print.html @@ -10,22 +10,22 @@ Configurrrat'n :: Cap'n Hugo Relearrrn Theme - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + +
@@ -247,9 +252,9 @@ default values:

- - - - + + + + diff --git a/pir/basics/customization/index.html b/pir/basics/customization/index.html index 26209d11de..c5457ced0a 100644 --- a/pir/basics/customization/index.html +++ b/pir/basics/customization/index.html @@ -10,21 +10,21 @@ Customizat'n :: Cap'n Hugo Relearrrn Theme - + - - - - - - - - - - - - - + + + + + + + + + + + + + - + +
@@ -235,12 +240,12 @@ Ye could use an img HTML tag an' reference an image created under t - - - - - - + + + + + +
- - - - + + + + diff --git a/pir/basics/customization/index.print.html b/pir/basics/customization/index.print.html index 5eae8d61f1..0d05fe7412 100644 --- a/pir/basics/customization/index.print.html +++ b/pir/basics/customization/index.print.html @@ -10,22 +10,22 @@ Customizat'n :: Cap'n Hugo Relearrrn Theme - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + +
@@ -148,9 +153,9 @@ Ye could use an img HTML tag an' reference an image created under t
- - - - + + + + diff --git a/pir/basics/generator/index.html b/pir/basics/generator/index.html index 485fcb7aa0..8382cea6ff 100644 --- a/pir/basics/generator/index.html +++ b/pir/basics/generator/index.html @@ -10,21 +10,21 @@ Stylesheet generrrat'r :: Cap'n Hugo Relearrrn Theme - + - - - - - - - - - - - - - + + + + + + + + + + + + + - + +
@@ -220,12 +225,12 @@ window.variants && variants.generator( '#vargenerator' ); - - - - - - + + + + + +
- - - - + + + + diff --git a/pir/basics/generator/index.print.html b/pir/basics/generator/index.print.html index b7c4c6f9ed..2d5528689d 100644 --- a/pir/basics/generator/index.print.html +++ b/pir/basics/generator/index.print.html @@ -10,22 +10,22 @@ Stylesheet generrrat'r :: Cap'n Hugo Relearrrn Theme - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + +
@@ -133,9 +138,9 @@ window.variants && variants.generator( '#vargenerator' );
- - - - + + + + diff --git a/pir/basics/history/index.html b/pir/basics/history/index.html index 54d475e12b..b002d25f75 100644 --- a/pir/basics/history/index.html +++ b/pir/basics/history/index.html @@ -10,21 +10,21 @@ Historrry :: Cap'n Hugo Relearrrn Theme - + - - - - - - - - - - - - - + + + + + + + + + + + + + - + +
@@ -999,12 +1004,12 @@ - - - - - - + + + + + +
- - - - + + + + diff --git a/pir/basics/history/index.print.html b/pir/basics/history/index.print.html index 5446e4f2a3..fca4a4f11e 100644 --- a/pir/basics/history/index.print.html +++ b/pir/basics/history/index.print.html @@ -10,22 +10,22 @@ Historrry :: Cap'n Hugo Relearrrn Theme - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + +
@@ -912,9 +917,9 @@
- - - - + + + + diff --git a/pir/basics/index.html b/pir/basics/index.html index 06b842716a..a3520fbb59 100644 --- a/pir/basics/index.html +++ b/pir/basics/index.html @@ -10,21 +10,21 @@ Basics :: Cap'n Hugo Relearrrn Theme - + - - - - - - - - - - - - - + + + + + + + + + + + + + - + +
@@ -173,12 +178,12 @@ - - - - - - + + + + + +
- - - - + + + + diff --git a/pir/basics/index.print.html b/pir/basics/index.print.html index d168aff2d9..853eb7a39f 100644 --- a/pir/basics/index.print.html +++ b/pir/basics/index.print.html @@ -10,22 +10,22 @@ Basics :: Cap'n Hugo Relearrrn Theme - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + +
@@ -1832,9 +1837,9 @@ window.variants && variants.generator( '#vargenerator' );
- - - - + + + + diff --git a/pir/basics/installation/index.html b/pir/basics/installation/index.html index 81373046e3..326c66451a 100644 --- a/pir/basics/installation/index.html +++ b/pir/basics/installation/index.html @@ -10,21 +10,21 @@ Installat'n :: Cap'n Hugo Relearrrn Theme - + - - - - - - - - - - - - - + + + + + + + + + + + + + - + +
@@ -231,12 +236,12 @@ - - - - - - + + + + + +
- - - - + + + + diff --git a/pir/basics/installation/index.print.html b/pir/basics/installation/index.print.html index 68e2b638f5..7aed9d4314 100644 --- a/pir/basics/installation/index.print.html +++ b/pir/basics/installation/index.print.html @@ -10,22 +10,22 @@ Installat'n :: Cap'n Hugo Relearrrn Theme - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + +
@@ -144,9 +149,9 @@
- - - - + + + + diff --git a/pir/basics/migration/index.html b/pir/basics/migration/index.html index 63fe3a4d5c..8d1d482ee7 100644 --- a/pir/basics/migration/index.html +++ b/pir/basics/migration/index.html @@ -10,21 +10,21 @@ What's new :: Cap'n Hugo Relearrrn Theme - + - - - - - - - - - - - - - + + + + + + + + + + + + + - + +
@@ -638,12 +643,12 @@ - - - - - - + + + + + +
- - - - + + + + diff --git a/pir/basics/migration/index.print.html b/pir/basics/migration/index.print.html index 4fc20db115..ccff10d10f 100644 --- a/pir/basics/migration/index.print.html +++ b/pir/basics/migration/index.print.html @@ -10,22 +10,22 @@ What's new :: Cap'n Hugo Relearrrn Theme - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + +
@@ -551,9 +556,9 @@
- - - - + + + + diff --git a/pir/basics/requirements/index.html b/pir/basics/requirements/index.html index e13ced6471..40426ff0e3 100644 --- a/pir/basics/requirements/index.html +++ b/pir/basics/requirements/index.html @@ -10,21 +10,21 @@ Requirrrements :: Cap'n Hugo Relearrrn Theme - + - - - - - - - - - - - - - + + + + + + + + + + + + + - + +
@@ -178,12 +183,12 @@ - - - - - - + + + + + +
- - - - + + + + diff --git a/pir/basics/requirements/index.print.html b/pir/basics/requirements/index.print.html index 6021d7bcff..bc4901ae7b 100644 --- a/pir/basics/requirements/index.print.html +++ b/pir/basics/requirements/index.print.html @@ -10,22 +10,22 @@ Requirrrements :: Cap'n Hugo Relearrrn Theme - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + +
@@ -91,9 +96,9 @@
- - - - + + + + diff --git a/pir/categories/index.html b/pir/categories/index.html index 58f171b9f4..85d482c3b3 100644 --- a/pir/categories/index.html +++ b/pir/categories/index.html @@ -9,21 +9,21 @@ Categories :: Cap'n Hugo Relearrrn Theme - + - - - - - - - - - - - - - + + + + + + + + + + + + + - + +
@@ -152,12 +157,12 @@ - - - - - - + + + + + +
- - - - + + + + diff --git a/pir/cont/archetypes/index.html b/pir/cont/archetypes/index.html index 8e8448e5e5..7aab5b8c2a 100644 --- a/pir/cont/archetypes/index.html +++ b/pir/cont/archetypes/index.html @@ -10,21 +10,21 @@ Arrrchetypes :: Cap'n Hugo Relearrrn Theme - + - - - - - - - - - - - - - + + + + + + + + + + + + + - + +
@@ -263,12 +268,12 @@ - - - - - - + + + + + +
- - - - + + + + diff --git a/pir/cont/archetypes/index.print.html b/pir/cont/archetypes/index.print.html index 81e21c4916..4c07497f57 100644 --- a/pir/cont/archetypes/index.print.html +++ b/pir/cont/archetypes/index.print.html @@ -10,22 +10,22 @@ Arrrchetypes :: Cap'n Hugo Relearrrn Theme - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + +
@@ -176,9 +181,9 @@
- - - - + + + + diff --git a/pir/cont/i18n/index.html b/pir/cont/i18n/index.html index 12587da57b..dfbeb10e1b 100644 --- a/pir/cont/i18n/index.html +++ b/pir/cont/i18n/index.html @@ -10,21 +10,21 @@ Multilingual an' i18n :: Cap'n Hugo Relearrrn Theme - + - - - - - - - - - - - - - + + + + + + + + + + + + + - + +
@@ -265,12 +270,12 @@ You’ll see error reports 'n yer browsers console log fer each unsupported - - - - - - + + + + + +
- - - - + + + + diff --git a/pir/cont/i18n/index.print.html b/pir/cont/i18n/index.print.html index 70ece73330..4b16349069 100644 --- a/pir/cont/i18n/index.print.html +++ b/pir/cont/i18n/index.print.html @@ -10,22 +10,22 @@ Multilingual an' i18n :: Cap'n Hugo Relearrrn Theme - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + +
@@ -178,9 +183,9 @@ You’ll see error reports 'n yer browsers console log fer each unsupported
- - - - + + + + diff --git a/pir/cont/icons/index.html b/pir/cont/icons/index.html index bcced58ad8..8ef4ec1ce9 100644 --- a/pir/cont/icons/index.html +++ b/pir/cont/icons/index.html @@ -10,21 +10,21 @@ Ay'cons an' logos :: Cap'n Hugo Relearrrn Theme - + - - - - - - - - - - - - - + + + + + + + + + + + + + - + +
@@ -192,12 +197,12 @@ - - - - - - + + + + + +
- - - - + + + + diff --git a/pir/cont/icons/index.print.html b/pir/cont/icons/index.print.html index f0f5ae5bad..82596da53c 100644 --- a/pir/cont/icons/index.print.html +++ b/pir/cont/icons/index.print.html @@ -10,22 +10,22 @@ Ay'cons an' logos :: Cap'n Hugo Relearrrn Theme - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + +
@@ -105,9 +110,9 @@
- - - - + + + + diff --git a/pir/cont/index.html b/pir/cont/index.html index 4e669bd1b3..91a87f33ff 100644 --- a/pir/cont/index.html +++ b/pir/cont/index.html @@ -10,21 +10,21 @@ Rambl'n :: Cap'n Hugo Relearrrn Theme - + - - - - - - - - - - - - - + + + + + + + + + + + + + - + +
@@ -173,12 +178,12 @@ - - - - - - + + + + + +
- - - - + + + + diff --git a/pir/cont/index.print.html b/pir/cont/index.print.html index 559563a35d..aea4a63a55 100644 --- a/pir/cont/index.print.html +++ b/pir/cont/index.print.html @@ -10,22 +10,22 @@ Rambl'n :: Cap'n Hugo Relearrrn Theme - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + +
@@ -324,13 +329,13 @@ We’ve added th' menuTitle parameter fer that purpose:

Fello' pirrates, be awarrre some stuff may not work fer us in this trrranslat'n. Like table of rrramblings, see'ng Merrrmaids, do'ng math or chemistrrry and stuff.

-

Let’s face it: Writ'n rrrambl'n fer th' Web be tiresome. WYSIWYG editors help alleviate this task, but they generally result 'n horr'ble code, or worse yet, ugly web planks.

+

Let’s face it: Writ'n rrrambl'n fer th' web be tiresome. WYSIWYG editors help alleviate this task, but they generally result 'n horr'ble code, or worse yet, ugly web planks.

Marrrkdown be a better way t' write HTML, without all th' complexities an' ugliness that usually accompanies it.

Some o' th' key benefits be:

  1. Marrrkdown be simple t' learn, wit' minimal extra characters so it’s also quicker t' write rrrambl'n.
  2. Less chance o' errors when writ'n 'n Marrrkdown.
    3. -
  3. Produces valid XHTML output.
    4. +
  4. Produces valid HTML output.
  5. Keeps th' rrrambl'n an' th' visual display separate, so ye cannot mess up th' look o' yer ship.
  6. Write 'n any text editor or Marrrkdown applicat'n ye like.
  7. Marrrkdown be a joy t' use!
    8. @@ -342,269 +347,278 @@ We’ve added th' menuTitle parameter fer that purpose:

    Without further delay, let us go over th' main elements o' Marrrkdown an' what th' result'n HTML looks like:

    -
    -
    Ahoi
    +
    +
    Smarrrt Arrrse

    Bookmark this plank an' th' official Commonmark reference fer easy future reference!

    +

    Paragraphs

    +

    In Marrrkdown yer rrrambl'n usually spans th' whole avail'ble document width. This be called a block. Blocks be always separated by whitespace t' their adjacent blocks 'n th' result'n document.

    +

    Any text not start'n wit' a special sign be written as normal, plain text paragraph block an' must be separated t' its adjacent blocks by empty lines.

    +
    Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.
+
+Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.
+
    +
    +
    Result
    +
    +

    Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.

    +

    Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.

    +
    +

    Head'ns

    -

    Head'ns from h1 through h6 be constructed wit' a # fer each level:

    +

    A bloody idea be t' structure yer rrrambl'n us'n head'ns an' subhead'ns. HTML-head'ns from h1 through h6 be constructed wit' a # fer each level.

    +

    In Hugo ye usually don’t use h1 as this be generated by yer theme an' ye should only have one such element 'n a document.

    # h1 Head'n
-## h2 Head'n
-### h3 Head'n
-#### h4 Head'n
-##### h5 Head'n
-###### h6 Head'n
-

    Renders t':

    - + +## h2 Head'n + +### h3 Head'n + +#### h4 Head'n + +##### h5 Head'n + +###### h6 Head'n +
    +
    +
    Result
    +

    h1 Head'n

    -

    h2 Head'n

    h3 Head'n

    h4 Head'n

    h5 Head'n
    h6 Head'n
    -

    HTML:

    -
    <h1>h1 Head'n</h1>
-<h2>h2 Head'n</h2>
-<h3>h3 Head'n</h3>
-<h4>h4 Head'n</h4>
-<h5>h5 Head'n</h5>
-<h6>h6 Head'n</h6>
-

    Comments

    -

    Comments should be HTML compat'ble

    -
    <!--
-This be a comment
--->
-

    Comment below should NOT be seen:

    - +
    +

    Horizontal Rules

    -

    Th' HTML <hr> element be fer creat'n a “thematic break” between paragraph-level elements. In Marrrkdown, ye can create a <hr> wit' --- - three consecutive dashes

    -

    renders t':

    +

    T' further structure yer rrrambl'n ye can add horizontal rules. They create a “thematic break” between paragraph blocks. In Marrrkdown, ye can create it wit' three consecutive dashes ---.

    +
    Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.
+
+---
+
+Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.
+
    +
    +
    Result
    +
    +

    Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.

    -

    Paragraphs

    -

    Any text not start'n wit' a special sign be written as normal, plain text an' will be wrapped within <p></p> tags 'n th' rendered HTML.

    -

    So this body copy:

    -
    Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.
-

    renders t' this HTML:

    -
    <p>Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.</p>
-

    Text Markers

    +

    Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.

    +
    +
    +

    Text Markers

    Bold

    -

    For emphasiz'n a snippet o' text wit' a heavier font-weight.

    -

    Th' follow'n snippet o' text be rendered as bold text.

    -
    **rendered as bold text**
-

    renders t':

    - -

    rendered as bold text

    - -

    an' this HTML

    -
    <strong>rendered as bold text</strong>
-

    Italics

    -

    For emphasiz'n a snippet o' text wit' italics.

    -

    Th' follow'n snippet o' text be rendered as italicized text.

    -
    _rendered as italicized text_
-

    renders t':

    - -

    rendered as italicized text

    - -

    an' this HTML:

    -
    <em>rendered as italicized text</em>
-

    Strikethrough

    -

    In GFM (GitHub flavored Markdown) ye can do strikethroughs.

    -
    ~~Strike through this text.~~
-

    Which renders t':

    -

    Strike through this text.

    -

    HTML:

    -
    <del>Strike through this text.</del>
-

    Blockquotes

    -

    For quot'n blocks o' rrrambl'n from another source within yer document.

    -

    Add > before any text ye want t' quote.

    -
    > **Fusion Drive** combines a hard drive wit' a flash storage (solid-state drive) an' presents it as a single logical volume wit' th' space o' both drives combined.
-

    Renders t':

    -
    -

    Fusion Drive combines a hard drive wit' a flash storage (solid-state drive) an' presents it as a single logical volume wit' th' space o' both drives combined.

    -
    -

    an' this HTML:

    -
    <blockquote>
-  <p><strong>Fusion Drive</strong> combines a hard drive wit' a flash storage (solid-state drive) an' presents it as a single logical volume wit' th' space o' both drives combined.</p>
-</blockquote>
-

    Blockquotes can also be nested:

    -
    > Donec massa lacus, ultricies a ullamcorper 'n, fermentum sed augue. Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
->
-> > Sed adipisc'n elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis 'n dolor tincidunt mollis ac eu diam.
->
-> Mauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus.
-

    Renders t':

    -
    -

    Donec massa lacus, ultricies a ullamcorper 'n, fermentum sed augue. Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.

    -
    -

    Sed adipisc'n elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis 'n dolor tincidunt mollis ac eu diam.

    -
    -

    Mauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus.

    -
    +

    Ye can show importance o' a snippet o' text wit' a heavier font-weight by enclos'n it wit' two asterisks **.

    +
    I am rendered wit' **bold text**
+
    +
    +
    Result
    +
    +

    I am rendered wit' bold text

    +
    +
    +

    Italics

    +

    Ye can emphasize a snippet o' text wit' italics by enclos'n it wit' underscores _.

    +
    I am rendered wit' _italicized text_
+
    +
    +
    Result
    +
    +

    I am rendered wit' italicized text

    +
    +
    +

    Strikethrough

    +

    In GFM (GitHub flavored Markdown) ye can do strikethroughs by enclos'n text wit' two tildes ~~.

    +
    ~~Strike through this text~~
+
    +
    +
    Result
    +
    +

    Strike through this text

    +
    +
    +

    Text substitut'n

    +

    This Marrrkdown dialect supports an extension t' combine multiple punctuat'n characters t' single typographic entities. This will only be applied t' text outside o' code blocks or inline code.

    +
    Do'ble quotes `"` an' single quotes `'` o' enclosed text be replaced by **"do'ble curly quotes"** an' **'single curly quotes'**.
+
+Do'ble dashes `--` an' triple dashes `---` be replaced by en-dash **--** an' em-dash **---** entities.
+
+Do'ble arrows point'n left `<<` or right `>>` be replaced by arrow **<<** an' **>>** entities.
+
+Three consecutive dots `...` be replaced by an ellipsis **...** entity.
+
    +
    +
    Result
    +
    +

    Do'ble quotes " an' single quotes ' o' enclosed text be replaced by “do'ble curly quotes” an' ‘single curly quotes’.

    +

    Do'ble dashes -- an' triple dashes --- be replaced by en-dash – an' em-dash — entities.

    +

    Do'ble arrows point'n left << or right >> be replaced by arrow « an' » entities.

    +

    Three consecutive dots ... be replaced by an ellipsis … entity.

    +
    +

    Lists

    Unordered

    -

    A list o' items 'n which th' order o' th' items does not explicitly matter.

    -

    Ye may use any o' th' follow'n symbols t' denote bullets fer each list item:

    -
    * valid bullet
-- valid bullet
-+ valid bullet
-

    For example

    -
    + Lorem ipsum dolor sit amet
-+ Consectetur adipisc'n elit
-+ Integer molestie lorem at massa
-+ Facilisis 'n pretium nisl aliquet
-+ Nulla volutpat aliquam velit
-  - Phasellus iaculis neque
-  - Purus sodales ultricies
+
    Ye can write a list o' items 'n which th' order o' th' items does not explicitly matter.
    
+
    It be poss'ble t' nest lists by indent'n an item fer th' next sublevel.
    
+
    Ye may use any o' -, * or + t' denote bullets fer each list item but should not switch between those symbols inside one whole list.
    
+
    - Lorem ipsum dolor sit amet
+- Consectetur adipisc'n elit
   - Vestibulum laoreet porttitor sem
   - Ac tristique libero volutpat at
-+ Faucibus porta lacus fringilla vel
-+ Aenean sit amet erat nunc
-+ Eget porttitor lorem
-
    Renders t':
    
-
+    - Nulla volutpat aliquam velit
+  - Phasellus iaculis neque
+  - Purus sodales ultricies
+- Faucibus porta lacus fringilla vel
+
    +
    +
    Result
    +
    • Lorem ipsum dolor sit amet
      • -
    • Consectetur adipisc'n elit
      • -
    • Integer molestie lorem at massa
      • -
    • Facilisis 'n pretium nisl aliquet
      • -
    • Nulla volutpat aliquam velit +
    • Consectetur adipisc'n elit
        -
      • Phasellus iaculis neque
        • -
      • Purus sodales ultricies
      • Vestibulum laoreet porttitor sem
      • Ac tristique libero volutpat at
      • -
    • Faucibus porta lacus fringilla vel
      • -
    • Aenean sit amet erat nunc
      • -
    • Eget porttitor lorem
      • +
    • Nulla volutpat aliquam velit +
        +
      • Phasellus iaculis neque
        • +
      • Purus sodales ultricies
      - -

      An' this HTML

      -
      <ul>
-  <li>Lorem ipsum dolor sit amet</li>
-  <li>Consectetur adipisc'n elit</li>
-  <li>Integer molestie lorem at massa</li>
-  <li>Facilisis 'n pretium nisl aliquet</li>
-  <li>Nulla volutpat aliquam velit
-    <ul>
-      <li>Phasellus iaculis neque</li>
-      <li>Purus sodales ultricies</li>
-      <li>Vestibulum laoreet porttitor sem</li>
-      <li>Ac tristique libero volutpat at</li>
-    </ul>
-  </li>
-  <li>Faucibus porta lacus fringilla vel</li>
-  <li>Aenean sit amet erat nunc</li>
-  <li>Eget porttitor lorem</li>
-</ul>
-

      Ordered

      -

      A list o' items 'n which th' order o' items does explicitly matter.

      -
      1. Lorem ipsum dolor sit amet
-4. Consectetur adipisc'n elit
-2. Integer molestie lorem at massa
-8. Facilisis 'n pretium nisl aliquet
-4. Nulla volutpat aliquam velit
-99. Faucibus porta lacus fringilla vel
-21. Aenean sit amet erat nunc
-6. Eget porttitor lorem
-

      Renders t':

      -
        -
      1. Lorem ipsum dolor sit amet
        2. -
      2. Consectetur adipisc'n elit
        3. -
      3. Integer molestie lorem at massa
        4. -
      4. Facilisis 'n pretium nisl aliquet
        5. -
      5. Nulla volutpat aliquam velit
        6. +
      6. Faucibus porta lacus fringilla vel
        7. -
      7. Aenean sit amet erat nunc
        8. -
      8. Eget porttitor lorem
        9. -
      -

      An' this HTML:

      -
      <ol>
-  <li>Lorem ipsum dolor sit amet</li>
-  <li>Consectetur adipisc'n elit</li>
-  <li>Integer molestie lorem at massa</li>
-  <li>Facilisis 'n pretium nisl aliquet</li>
-  <li>Nulla volutpat aliquam velit</li>
-  <li>Faucibus porta lacus fringilla vel</li>
-  <li>Aenean sit amet erat nunc</li>
-  <li>Eget porttitor lorem</li>
-</ol>
-
      -
      -
      Smarrrt Arrrse
      -
      -

      If ye just use 1. fer each number, Marrrkdown will automatically number each item. For example:

      +
    +

    Ordered

    +

    Ye can create a list o' items 'n which th' order o' items does explicitly matter.

    +

    It be poss'ble t' nest lists by indent'n an item fer th' next sublevel.

    +

    Marrrkdown will automatically number each o' yer items consecutively. This means, th' order number ye be provid'n be irrelevant.

    1. Lorem ipsum dolor sit amet
-1. Consectetur adipisc'n elit
-1. Integer molestie lorem at massa
-1. Facilisis 'n pretium nisl aliquet
-1. Nulla volutpat aliquam velit
-1. Faucibus porta lacus fringilla vel
-1. Aenean sit amet erat nunc
-1. Eget porttitor lorem
-

    Renders t':

    +3. Consectetur adipisc'n elit + 1. Integer molestie lorem at massa + 7. Facilisis 'n pretium nisl aliquet +99. Nulla volutpat aliquam velit + 1. Faucibus porta lacus fringilla vel + 1. Aenean sit amet erat nunc +17. Eget porttitor lorem + +
    +
    Result
    +
    1. Lorem ipsum dolor sit amet
      2. -
    2. Consectetur adipisc'n elit
      3. +
    3. Consectetur adipisc'n elit +
      1. Integer molestie lorem at massa
      2. Facilisis 'n pretium nisl aliquet
        3. -
      3. Nulla volutpat aliquam velit
        4. +
      +
      4. +
    4. Nulla volutpat aliquam velit +
      1. Faucibus porta lacus fringilla vel
      2. Aenean sit amet erat nunc
        3. +
      +
    5. Eget porttitor lorem
    +
    +
    +

    Tasks

    +

    In GFM (GitHub flavored Markdown) ye can add task lists result'n 'n checked or unchecked non-click'ble items

    +
    - [x] Basic Test
+- [ ] More Tests
+  - [x] View
+  - [x] Hear
+  - [ ] Smell
+
    +
    +
    Result
    +
    +
      +
    • Basic Test
      • +
    • More Tests +
        +
      • View
        • +
      • Hear
        • +
      • Smell
        • +
      +
      • +
    +
    +
    +

    Defint'ns

    +

    This Marrrkdown dialect supports an extension t' add defint'n lists. Definit'n lists be made o' terms an' definit'ns o' these terms, much like 'n a dictionary.

    +

    A definit'n list 'n Marrrkdown Extra be made o' a single-line term followed by a colon an' th' definit'n fer that term. Ye can also associate more than one term t' a definit'n.

    +

    If ye add empty lines around th' definit'n terms, additional vertical space will be generated. Also multiple paragraphs be poss'ble

    +
    Apple
+: Pomaceous fruit o' plants o' th' genus Malus 'n th' family Rosaceae.
+: An American computer company.
+
+Orange
+: Th' fruit o' an evergreen tree o' th' genus Citrus.
+
+  Ye can make juice out o' it.
+: A telecommunicat'n company.
+
+  Ye can't make juice out o' it.
+
    +
    +
    Result
    +
    +
    +
    Apple
    +
    Pomaceous fruit o' plants o' th' genus Malus 'n th' family Rosaceae.
    +
    An American computer company.
    +
    Orange
    +
    Th' fruit o' an evergreen tree o' th' genus Citrus. +

    Ye can make juice out o' it.

    +
    +
    A telecommunicat'n company. +

    Ye can’t make juice out o' it.

    +
    +
    +
    +

    Code

    -

    Inline code

    -

    Wrap inline snippets o' code wit' `.

    -
    In this example, `<div></div>` should be wrapped as **code**.
-

    Renders t':

    -

    In this example, <div></div> should be wrapped as code.

    -

    HTML:

    -
    <p>In this example, <code>&lt;div&gt;&lt;/div&gt;</code> should be wrapped as <strong>code</strong>.</p>
-

    Indented code

    -

    Or indent several lines o' code by at least two spaces, as 'n:

    -
        // Some comments
+
    Inline Code
    
+
    Inline snippets o' code can be wrapped wit' backticks `.
    
+
    In this example, `<div></div>` be marked as code.
+
    
+
    
+  
     Result
    
+  
    
+
    In this example, <div></div> be marked as code.
    
+    
    
+
    
+
    Indented Code Block
    
+
    A simple code block can be generated by indent'n several lines o' code by at least two spaces.
    
+
    Be impressed by my advanced code:
+
+    // Some comments
     line 1 o' code
     line 2 o' code
     line 3 o' code
-
    Renders t':
    
-
+
    +
    +
    Result
    +
    +

    Be impressed by my advanced code:

    // Some comments
 line 1 o' code
 line 2 o' code
 line 3 o' code
    - -

    HTML:

    -
    <pre>
-  <code>
-    // Some comments
-    line 1 o' code
-    line 2 o' code
-    line 3 o' code
-  </code>
-</pre>
-

    Block code “fences”

    -

    Use “fences” ``` t' block 'n multiple lines o' code.

    -
    ```
-Sample text here...
-```
-

    HTML:

    -
    <pre>
-  <code>Sample text here...</code>
-</pre>
-

    Rules highlight'n

    -

    GFM, or “GitHub Flavored Markdown” also supports rules highlight'n. T' activate it, usually ye simply add th' file extension o' th' language ye want t' use directly aft th' first code “fence”, ```js, an' rules highlight'n will automatically be applied 'n th' rendered HTML.

    +
    +
    +

    Fenced Code Block

    +

    If ye want t' gain more control o' yer code block ye can enclose yer code by at least three backticks ``` a so called fence.

    +

    In GFM (GitHub Flavored Markdown) ye can also add a language specifier directly aft th' open'n fence, ```js, an' rules highlight'n will automatically be applied accord'n t' th' selected language 'n th' rendered HTML.

    See Code Highlight'n fer additional documentat'n.

    -

    For example, t' apply rules highlight'n t' JavaScript code:

    ```js
 grunt.initConfig({
   assemble: {
@@ -625,7 +639,10 @@ line 3 o' code
   }
 };
 ```
-

    Renders t':

    + +
    +
    Result
    + 
    grunt.initConfig({
   assemble: {
     opt'ns: {
@@ -644,14 +661,19 @@ line 3 o' code
     }
   }
 };
-

    Tables

    -

    Tables be created by add'n pipes as dividers between each cell, an' by add'n a line o' dashes (also separated by bars) beneath th' header. Avast that th' pipes do not need t' be vertically aligned.

    +
    + +

    Tables

    +

    In GFM (GitHub flavored Markdown) ye can create tables by add'n pipes as dividers between each cell, an' by add'n a line o' dashes (also separated by bars) beneath th' header. Avast that th' pipes do not need t' be vertically aligned.

    | Opt'n | Descript'n |
 | ------ | ----------- |
 | data   | path t' data files t' supply th' data that will be passed into templates. |
 | engine | engine t' be used fer process'n templates. Handlebars be th' default. |
 | ext    | extension t' be used fer dest files. |
-

    Renders t':

    + +
    +
    Result
    +
    @@ -674,205 +696,298 @@ line 3 o' code
    -

    An' this HTML:

    -
    <t'ble>
-  <tr>
-    <th>Opt'n</th>
-    <th>Descript'n</th>
-  </tr>
-  <tr>
-    <td>data</td>
-    <td>path t' data files t' supply th' data that will be passed into templates.</td>
-  </tr>
-  <tr>
-    <td>engine</td>
-    <td>engine t' be used fer process'n templates. Handlebars be th' default.</td>
-  </tr>
-  <tr>
-    <td>ext</td>
-    <td>extension t' be used fer dest files.</td>
-  </tr>
-</t'ble>
-

    Right aligned text

    -

    Add'n a colon on th' right side o' th' dashes below any head'n will right align text fer that column.

    -
    | Opt'n | Descript'n |
-| ------:| -----------:|
-| data   | path t' data files t' supply th' data that will be passed into templates. |
-| engine | engine t' be used fer process'n templates. Handlebars be th' default. |
-| ext    | extension t' be used fer dest files. |
-
    + + +

    Aligned Columns

    +

    Add'n a colon on th' left and/or right side o' th' dashes below any head'n will align th' text fer that column accordingly.

    +
    | Opt'n | Number | Descript'n |
+| ------:|:------:|:----------- |
+| data   | 1      | path t' data files t' supply th' data that will be passed into templates. |
+| engine | 2      | engine t' be used fer process'n templates. Handlebars be th' default. |
+| ext    | 3      | extension t' be used fer dest files. |
+
    +
    +
    Result
    +
    +
    - + + - + + - + + - + +
    Opt'nDescript'nNumberDescript'n
    datapath t' data files t' supply th' data that will be passed into templates.1path t' data files t' supply th' data that will be passed into templates.
    engineengine t' be used fer process'n templates. Handlebars be th' default.2engine t' be used fer process'n templates. Handlebars be th' default.
    extextension t' be used fer dest files.3extension t' be used fer dest files.
    -

    Two tables adjacent

    - - - - - - - - - - - - - -
    Opt'nDescript'n
    extextension t' be used fer dest files.
    - - - - - - - - - - - - - -
    Opt'nDescript'n
    extextension t' be used fer dest files.
    - - -
    [Assemble](http://assemble.io)
-

    Renders t' (hover over th' link, there be no tooltip):

    -

    Assemble

    -

    HTML:

    -
    <a href="http://assemble.io">Assemble</a>
-

    Add a tooltip

    -
    [Upstage](https://github.com/upstage/ "Visit Upstage!")
-

    Renders t' (hover over th' link, there should be a tooltip):

    -

    Upstage

    -

    HTML:

    -
    <a href="https://github.com/upstage/" title="Visit Upstage!">Upstage</a>
-

    Named Anchors

    -

    Named anchors en'ble ye t' jump t' th' specified anchor point on th' same plank. For example, each o' these chapters:

    -
    # T'ble o' Contents
-
-- [Chapter 1](#chapter-1)
-- [Chapter 2](#chapter-2)
-- [Chapter 3](#chapter-3)
-

    will jump t' these sections:

    -
    ## Chapter 1 <a id="chapter-1"></a>
-Rrrambl'n fer chapter one.
-
-## Chapter 2 <a id="chapter-2"></a>
-Rrrambl'n fer chapter one.
-
-## Chapter 3 <a id="chapter-3"></a>
-Rrrambl'n fer chapter one.
-
    -
    -
    Avast
    +
    +
    +

    Blockquotes

    +

    For quot'n blocks o' rrrambl'n from another source within yer document add > before any text ye want t' quote.

    +

    Blockquotes can also be nested.

    +
    > Donec massa lacus, ultricies a ullamcorper 'n, fermentum sed augue. Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
+>
+> > Sed adipisc'n elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis 'n dolor tincidunt mollis ac eu diam.
+>
+> Mauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus.
+
    +
    +
    Result
    -

    Avast that specific placement o' th' anchor tag seems t' be arbitrary. They be placed inline here since it seems t' be unobtrusive, an' it works.

    +
    +

    Donec massa lacus, ultricies a ullamcorper 'n, fermentum sed augue. Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.

    +
    +

    Sed adipisc'n elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis 'n dolor tincidunt mollis ac eu diam.

    +
    +

    Mauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus.

    +
    +
    +
    + + +

    In GFM (GitHub Flavored Markdown) absolute URLs will automatically be converted into a link.

    +
    This be a link t' https://example.com.
+
    +
    +
    Result
    +
    +

    This be a link t' https://example.com.

    +
    +
    + +

    Ye can explicitly define links 'n case ye want t' use non-absolute URLs or want t' give different text.

    +
    [Assemble](http://assemble.io)
+
    +
    +
    Result
    +
    +

    Assemble

    +
    +
    + +

    For even further informat'n, ye can add an additional text, displayed 'n a tooltip on hover'n over th' link.

    +
    [Upstage](https://github.com/upstage/ "Visit Upstage!")
+
    +
    +
    Result
    +
    +

    Upstage

    +
    +
    + +

    Links can be simplyfied fer recurr'n reuse by us'n a reference ID t' later define th' URL locat'n. This simplyfies writ'n if ye want t' use a link more than once 'n a document.

    +
    [Example][somelinkID]
+
+[somelinkID]: https://example.com "Go t' example domain"
+
    +
    +
    Result
    +
    +

    Example

    +
    +
    +

    Footnotes

    +

    Footnotes work mostly like reference-style links. A footnote be made o' two th'ns, a marker 'n th' text that will become a superscript number an' a footnote definit'n that will be placed 'n a list o' footnotes.

    +

    Usually th' list o' footnotes will be shown at th' end o' yer document. If we use a footnote 'n a notice box it will instead be listed at th' end o' its box.

    +

    Footnotes can contain block elements, which means that ye can put multiple paragraphs, lists, blockquotes an' so on 'n a footnote. It works th' same as fer list items, just indent th' follow'n paragraphs by four spaces 'n th' footnote definit'n.

    +
    That's some text wit' a footnote[^1]
+
+[^1]: An' that's th' footnote.
+
+That's some more text wit' a footnote.[^someid]
+
+[^someid]:
+    Anyth'n o' interest goes here.
+
+    Blue light glows blue.
+
    +
    +
    Result
    +
    +

    That’s some text wit' a footnote1

    +

    That’s some more text wit' a footnote.2

    +
    +
    +
      +
    1. +

      An' that’s th' footnote. ↩︎

      +
      2. +
    2. +

      Anyth'n o' interest goes here.

      +

      Blue light glows blue. ↩︎

      +
      3. +
    +

    Images

    -

    Images have a similar rules t' links but include a preced'n exclamat'n mark:

    +

    Basic Images

    +

    Images have a similar rules t' links but include a preced'n exclamat'n mark.

    ![Spock](https://octodex.github.com/images/spocktocat.png)
-

    +

    +
    +
    Result
    +
    +

    - -Spock + +Spock

    -

    Like links, images also have a footnote style rules, result'n 'n a tooltip:

    +
    +
    +

    Image wit' Tooltip

    +

    Like links, images can also be given a tooltip.

    ![Picard](https://octodex.github.com/images/jean-luc-picat.jpg "Jean Luc Picard")
-

    + +

    +
    Result
    +
    +

    Picard

    -

    Images can also be linked by reference ID t' later define th' URL locat'n:

    +
    +
    +

    Image References

    +

    Images can also be linked by reference ID t' later define th' URL locat'n. This simplyfies writ'n if ye want t' use an image more than once 'n a document.

    ![La Forge][laforge]
 
 [laforge]: https://octodex.github.com/images/trekkie.jpg "Geordi La Forge"
-

    + +

    +
    Result
    +
    +

    La Forge

    -

    Further image formatt'n

    -

    Th' Cap'n Hugo Marrrkdown parser supports additional non-standard functionality.

    -

    Resiz'n image

    -

    Add HTTP parameters width and/or height t' th' link image t' resize th' image. Values be CSS values (default be auto).

    +
    +
    +

    Further Image Formatt'n

    +

    This theme allows additional non-standard formatt'n by sett'n query parameter at th' end o' th' image URL.

    +

    Resiz'n

    +

    Add query parameter width and/or height t' th' link image t' resize th' image. Values be CSS values (default be auto).

    ![Minion](https://octodex.github.com/images/minion.png?width=20vw)
-

    + +

    +
    Result
    +
    +

    - -Minion + +Minion

    +
    +
    ![Minion](https://octodex.github.com/images/minion.png?height=50px)
-

    + +

    +
    Result
    +
    +

    - -Minion + +Minion

    +
    +
    ![Minion](https://octodex.github.com/images/minion.png?height=50px&width=40vw)
-

    + +

    +
    Result
    +
    +

    - -Minion + +Minion

    -

    Add CSS classes

    -

    Add a HTTP classes parameter t' th' link image t' add CSS classes. Add some o' th' predefined values or even define yer own 'n yer CSS.

    -
    shadow
    -
    ![Spidertocat](https://octodex.github.com/images/spidertocat.png?classes=shadow)
-

    +

    +
    +

    CSS Classes

    +

    Add a query parameter classes t' th' link image t' add CSS classes. Add some o' th' predefined values or even define yer own 'n yer CSS.

    +
    Shadow
    +
    ![Spidertocat](https://octodex.github.com/images/spidertocat.png?classes=shadow,bg-white)
+
    +
    +
    Result
    +
    +

    - -Spidertocat + +Spidertocat

    -
    border
    +
    +
    +
    Border
    ![DrOctocat](https://octodex.github.com/images/droctocat.png?classes=border)
-

    + +

    +
    Result
    +
    +

    DrOctocat

    -
    left
    +
    +
    +
    Left
    ![Supertocat](https://octodex.github.com/images/okal-eltocat.jpg?classes=left)
-

    + +

    +
    Result
    +
    +

    Supertocat

    - +
    +
    + 
    ![Riddlocat](https://octodex.github.com/images/riddlocat.jpg?classes=right)
-

    + +

    +
    Result
    +
    +

    Riddlocat

    -
    inline
    +
    +
    +
    Inline
    ![Spidertocat](https://octodex.github.com/images/spidertocat.png?classes=inline)
 ![DrOctocat](https://octodex.github.com/images/droctocat.png?classes=inline)
 ![Supertocat](https://octodex.github.com/images/okal-eltocat.jpg?classes=inline)
 ![Riddlocat](https://octodex.github.com/images/riddlocat.jpg?classes=inline)
-

    + +

    +
    Result
    +
    +

    - -Spidertocat + +Spidertocat @@ -889,19 +1004,33 @@ line 3 o' code Riddlocat

    +
    +
    Combinat'n
    -
    ![X-tocat](https://octodex.github.com/images/xtocat.jpg?width=20vw&classes=shadow,border,left)
-

    +

    ![X-tocat](https://octodex.github.com/images/xtocat.jpg?classes=shadow,border,left)
+
    +
    +
    Result
    +
    +

    X-tocat

    +
    +
    -

    Add a HTTP featherlight parameter t' th' link image t' dis'ble lightbox. By default lightbox be enabled us'n th' featherlight.js plugin. Ye can dis'ble this by defin'n featherlight t' false.

    +

    Add th' query parameter featherlight=false t' th' image link t' dis'ble th' lightbox.

    ![Homercat](https://octodex.github.com/images/homercat.png?featherlight=false)
-

    + +

    +
    Result
    +
    +

    -Homercat

    +Homercat

    +
    +