use maintained theme

2021-02-18 22:21:36 +01:00 · 2021-02-18 22:21:36 +01:00 · 0c7cb4486a
commit 0c7cb4486a
parent 640572ecab
1779 changed files with 41468 additions and 26258 deletions
--- a/themes/CodeIT/exampleSite/content/posts/basic-markdown-syntax/index.fr.md
+++ b/themes/CodeIT/exampleSite/content/posts/basic-markdown-syntax/index.fr.md
@ -0,0 +1,802 @@
+---
+weight: 4
+title: "Syntaxe de Markdown de Base"
+date: 2019-12-01T21:57:40+08:00
+lastmod: 2020-01-01T16:45:40+08:00
+draft: false
+author: "Sunt Programator!"
+authorLink: "https://suntprogramator.dev/"
+description: "Cet article présente la syntaxe et le format de base de Markdown."
+resources:
+  - name: "featured-image"
+    src: "featured-image.png"
+
+tags: ["Markdown", "HTML"]
+categories: ["Markdown"]
+
+lightgallery: true
+---
+
+Cet article propose un exemple de syntaxe Markdown de base qui peut être utilisée dans les fichiers de contenu Hugo.
+
+<!--more-->
+
+{{< admonition warning >}}
+Sorry, this article has not been completely translated into **French**.
+Welcome to take the time to propose a translation by [:(fas fa-code-branch fa-fw): making a PR](https://github.com/sunt-programator/CodeIT/pulls) to the theme!
+{{< /admonition >}}
+
+{{< admonition >}}
+This article is a shameful copy of the great [Grav original page](http://learn.getgrav.org/content/markdown).
+
+If you want to know about the extented Markdown syntax of **CodeIT** theme, please read [extended Markdown syntax page](../theme-documentation-content#extended-markdown-syntax).
+{{< /admonition >}}
+
+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. Produces valid XHTML output.
+4. Keeps the content and the visual display separate, so you cannot mess up the look of your site.
+5. Write in any text editor or Markdown application you like.
+6. Markdown is a joy to use!
+
+John Gruber, the author of Markdown, puts it like this:
+
+> The 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.
+>
+> {{< style "text-align: right;" >}}-- _John Gruber_{{< /style >}}
+
+Without further delay, let us go over the main elements of Markdown and what the resulting HTML looks like!
+
+{{< admonition tip >}}
+:(far fa-bookmark fa-fw): Bookmark this page for easy future reference!
+{{< /admonition >}}
+
+## 1 Headings
+
+Headings from `h2` through `h6` are constructed with a `#` for each level:
+
+```markdown
+## h2 Heading
+
+### h3 Heading
+
+#### h4 Heading
+
+##### h5 Heading
+
+###### h6 Heading
+```
+
+The HTML looks like this:
+
+```html
+<h2>h2 Heading</h2>
+<h3>h3 Heading</h3>
+<h4>h4 Heading</h4>
+<h5>h5 Heading</h5>
+<h6>h6 Heading</h6>
+```
+
+{{< admonition note "Heading IDs" >}}
+To add a custom heading ID, enclose the custom ID in curly braces on the same line as the heading:
+
+```markdown
+### A Great Heading {#custom-id}
+```
+
+The HTML looks like this:
+
+```html
+<h3 id="custom-id">A Great Heading</h3>
+```
+
+{{< /admonition >}}
+
+## 2 Comments
+
+Comments should be HTML compatible.
+
+```html
+<!--
+This is a comment
+-->
+```
+
+Comment below should **NOT** be seen:
+
+<!--
+This is a comment
+-->
+
+## 3 Horizontal Rules
+
+The HTML `<hr>` element is for creating a "thematic break" between paragraph-level elements.
+In Markdown, you can create a `<hr>` with any of the following:
+
+- `___`: three consecutive underscores
+- `---`: three consecutive dashes
+- `***`: three consecutive asterisks
+
+The rendered output looks like this:
+
+---
+
+---
+
+---
+
+## 4 Body Copy
+
+Body copy written as normal, plain text will be wrapped with `<p></p>` tags in the rendered HTML.
+
+So this body copy:
+
+```markdown
+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.
+```
+
+The HTML looks like 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>
+```
+
+A **line break** can be done with one blank line.
+
+## 5 Inline HTML
+
+If you need a certain HTML tag (with a class) you can simply use HTML:
+
+```html
+Paragraph in Markdown.
+
+<div class="class">This is <b>HTML</b></div>
+
+Paragraph in Markdown.
+```
+
+## 6 Emphasis
+
+### Bold
+
+For emphasizing a snippet of text with a heavier font-weight.
+
+The following snippet of text is **rendered as bold text**.
+
+```markdown
+**rendered as bold text**
+**rendered as bold text**
+```
+
+The HTML looks like 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_.
+
+```markdown
+_rendered as italicized text_
+_rendered as italicized text_
+```
+
+The HTML looks like this:
+
+```html
+<em>rendered as italicized text</em>
+```
+
+### Strikethrough
+
+In [[GFM]^(GitHub flavored Markdown)](https://github.github.com/gfm/) you can do strikethroughs.
+
+```markdown
+~~Strike through this text.~~
+```
+
+The rendered output looks like this:
+
+~~Strike through this text.~~
+
+The HTML looks like this:
+
+```html
+<del>Strike through this text.</del>
+```
+
+### Combination
+
+Bold, italics, and strikethrough can be used in combination.
+
+```markdown
+**_bold and italics_**
+~~**strikethrough and bold**~~
+~~_strikethrough and italics_~~
+~~**_bold, italics and strikethrough_**~~
+```
+
+The rendered output looks like this:
+
+**_bold and italics_**
+
+~~**strikethrough and bold**~~
+
+~~_strikethrough and italics_~~
+
+~~**_bold, italics and strikethrough_**~~
+
+The HTML looks like this:
+
+```html
+<em><strong>bold and italics</strong></em>
+<del><strong>strikethrough and bold</strong></del>
+<del><em>strikethrough and italics</em></del>
+<del
+  ><em><strong>bold, italics and strikethrough</strong></em></del
+>
+```
+
+## 7 Blockquotes
+
+For quoting blocks of content from another source within your document.
+
+Add `>` before any text you want to quote:
+
+```markdown
+> **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.
+```
+
+The rendered output looks like this:
+
+> **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.
+
+The HTML looks like 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:
+
+```markdown
+> 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.
+```
+
+The rendered output looks like this:
+
+> 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.
+
+## 8 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:
+
+```markdown
+- valid bullet
+
+* valid bullet
+
+- valid bullet
+```
+
+For example:
+
+```markdown
+- 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
+```
+
+The rendered output looks like this:
+
+- 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
+
+The HTML looks like 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.
+
+```markdown
+1. Lorem ipsum dolor sit amet
+2. Consectetur adipiscing elit
+3. Integer molestie lorem at massa
+4. Facilisis in pretium nisl aliquet
+5. Nulla volutpat aliquam velit
+6. Faucibus porta lacus fringilla vel
+7. Aenean sit amet erat nunc
+8. Eget porttitor lorem
+```
+
+The rendered output looks like this:
+
+1. Lorem ipsum dolor sit amet
+2. Consectetur adipiscing elit
+3. Integer molestie lorem at massa
+4. Facilisis in pretium nisl aliquet
+5. Nulla volutpat aliquam velit
+6. Faucibus porta lacus fringilla vel
+7. Aenean sit amet erat nunc
+8. Eget porttitor lorem
+
+The HTML looks like 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>
+```
+
+{{< admonition tip >}}
+If you just use `1.` for each number, Markdown will automatically number each item. For example:
+
+```markdown
+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
+```
+
+The rendered output looks like this:
+
+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
+   {{< /admonition >}}
+
+### Task Lists
+
+Task lists allow you to create a list of items with checkboxes. To create a task list, add dashes (`-`) and brackets with a space (`[ ]`) before task list items. To select a checkbox, add an x in between the brackets (`[x]`).
+
+```markdown
+- [x] Write the press release
+- [ ] Update the website
+- [ ] Contact the media
+```
+
+The rendered output looks like this:
+
+- [x] Write the press release
+- [ ] Update the website
+- [ ] Contact the media
+
+## 9 Code
+
+### Inline Code
+
+Wrap inline snippets of code with <code>`</code>.
+
+```markdown
+In this example, `<section></section>` should be wrapped as **code**.
+```
+
+The rendered output looks like this:
+
+In this example, `<section></section>` should be wrapped as **code**.
+
+The HTML looks like this:
+
+```html
+<p>
+  In this example, <code>&lt;section&gt;&lt;/section&gt;</code> should be
+  wrapped with <strong>code</strong>.
+</p>
+```
+
+### Indented Code
+
+Or indent several lines of code by at least four spaces, as in:
+
+```markdown
+    // Some comments
+    line 1 of code
+    line 2 of code
+    line 3 of code
+```
+
+The rendered output looks like this:
+
+    // Some comments
+    line 1 of code
+    line 2 of code
+    line 3 of code
+
+The HTML looks like this:
+
+```html
+<pre>
+  <code>
+    // Some comments
+    line 1 of code
+    line 2 of code
+    line 3 of code
+  </code>
+</pre>
+```
+
+### Block Fenced Code
+
+Use "fences" <code>```</code> to block in multiple lines of code with a language attribute.
+
+{{< highlight markdown >}}
+
+```markdown
+Sample text here...
+```
+
+{{< / highlight >}}
+
+The HTML looks like this:
+
+```html
+<pre language-html>
+  <code>Sample text here...</code>
+</pre>
+```
+
+### Syntax Highlighting
+
+[GFM]^(GitHub Flavored Markdown) also supports syntax highlighting.
+
+To activate it, simply add the file extension of the language you want to use directly after the first code "fence",
+<code>```js</code>, and syntax highlighting will automatically be applied in the rendered HTML.
+
+For example, to apply syntax highlighting to JavaScript code:
+
+{{< highlight markdown >}}
+
+```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']
+      }
+    }
+  }
+};
+```
+
+{{< / highlight >}}
+
+The rendered output looks like this:
+
+```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']
+      }
+    }
+  }
+};
+```
+
+{{< admonition >}}
+[Syntax highlighting page](https://gohugo.io/content-management/syntax-highlighting/) in **Hugo** Docs introduces more about syntax highlighting, including highlight shortcode.
+{{< /admonition >}}
+
+## 10 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.
+
+```markdown
+| Option | Description                                                               |
+| ------ | ------------------------------------------------------------------------- |
+| data   | path to data files to supply the data that will be passed into templates. |
+| engine | engine to be used for processing templates. Handlebars is the default.    |
+| ext    | extension to be used for dest files.                                      |
+```
+
+The rendered output looks like this:
+
+| 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.                                      |
+
+The HTML looks like this:
+
+```html
+<table>
+  <thead>
+    <tr>
+      <th>Option</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <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>
+  </tbody>
+</table>
+```
+
+{{< admonition note "Right or center aligned text" >}}
+Adding a colon on the right side of the dashes below any heading will right align text for that column.
+
+Adding colons on both sides of the dashes below any heading will center align text for that column.
+
+```markdown
+| Option |                                                               Description |
+| :----: | ------------------------------------------------------------------------: |
+|  data  | path to data files to supply the data that will be passed into templates. |
+| engine |    engine to be used for processing templates. Handlebars is the default. |
+|  ext   |                                      extension to be used for dest files. |
+```
+
+The rendered output looks like this:
+
+| 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. |
+
+{{< /admonition >}}
+
+## 11 Links
+
+### Basic Link {#links}
+
+```markdown
+<https://assemble.io>
+<contact@revolunet.com>
+[Assemble](https://assemble.io)
+```
+
+The rendered output looks like this (hover over the link, there is no tooltip):
+
+<https://assemble.io>
+
+<contact@revolunet.com>
+
+[Assemble](https://assemble.io)
+
+The HTML looks like this:
+
+```html
+<a href="https://assemble.io">https://assemble.io</a>
+<a href="mailto:contact@revolunet.com">contact@revolunet.com</a>
+<a href="https://assemble.io">Assemble</a>
+```
+
+### Add a Title
+
+```markdown
+[Upstage](https://github.com/upstage/ "Visit Upstage!")
+```
+
+The rendered output looks like this (hover over the link, there should be a tooltip):
+
+[Upstage](https://github.com/upstage/ "Visit Upstage!")
+
+The HTML looks like this:
+
+```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:
+
+```markdown
+## Table of Contents
+
+- [Chapter 1](#chapter-1)
+- [Chapter 2](#chapter-2)
+- [Chapter 3](#chapter-3)
+```
+
+will jump to these sections:
+
+```markdown
+## 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.
+```
+
+{{< admonition >}}
+The specific placement of the anchor tag seems to be arbitrary. They are placed inline here since it seems to be unobtrusive, and it works.
+{{< /admonition >}}
+
+## 12 Footnotes
+
+Footnotes allow you to add notes and references without cluttering the body of the document. When you create a footnote, a superscript number with a link appears where you added the footnote reference. Readers can click the link to jump to the content of the footnote at the bottom of the page.
+
+To create a footnote reference, add a caret and an identifier inside brackets (`[^1]`). Identifiers can be numbers or words, but they can’t contain spaces or tabs. Identifiers only correlate the footnote reference with the footnote itself — in the output, footnotes are numbered sequentially.
+
+Add the footnote using another caret and number inside brackets with a colon and text (`[^1]: My footnote.`). You don’t have to put footnotes at the end of the document. You can put them anywhere except inside other elements like lists, block quotes, and tables.
+
+```markdown
+This is a digital footnote[^1].
+This is a footnote with "label"[^label]
+
+[^1]: This is a digital footnote
+[^label]: This is a footnote with "label"
+```
+
+This is a digital footnote[^1].
+
+This is a footnote with "label"[^label]
+
+[^1]: This is a digital footnote
+[^label]: This is a footnote with "label"
+
+## 13 Images
+
+Images have a similar syntax to links but include a preceding exclamation point.
+
+```markdown
+![Minion](https://octodex.github.com/images/minion.png)
+```
+
+![Minion](https://octodex.github.com/images/minion.png)
+
+or:
+
+```markdown
+![Alt text](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
+```
+
+![Alt text](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
+
+Like links, images also have a footnote style syntax:
+
+```markdown
+![Alt text][id]
+```
+
+![Alt text][id]
+
+With a reference later in the document defining the URL location:
+
+```markdown
+[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
+```
+
+[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
+
+{{< admonition tip >}}
+**CodeIT** theme has [special shortcode for image](../theme-documentation-extended-shortcodes#image), which provides more features.
+{{< /admonition >}}