From 0c7cb4486a89ec6fe9680e6569ef41d4b82d557d Mon Sep 17 00:00:00 2001 From: Christoph Cullmann Date: Thu, 18 Feb 2021 22:21:36 +0100 Subject: use maintained theme --- .../posts/basic-markdown-syntax/index.fr.md | 802 +++++++++++++++++++++ 1 file changed, 802 insertions(+) create mode 100644 themes/CodeIT/exampleSite/content/posts/basic-markdown-syntax/index.fr.md (limited to 'themes/CodeIT/exampleSite/content/posts/basic-markdown-syntax/index.fr.md') diff --git a/themes/CodeIT/exampleSite/content/posts/basic-markdown-syntax/index.fr.md b/themes/CodeIT/exampleSite/content/posts/basic-markdown-syntax/index.fr.md new file mode 100644 index 0000000..b39fcc5 --- /dev/null +++ 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. + + + +{{< 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 Heading

+

h3 Heading

+

h4 Heading

+
h5 Heading
+
h6 Heading
+``` + +{{< 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 +

A Great Heading

+``` + +{{< /admonition >}} + +## 2 Comments + +Comments should be HTML compatible. + +```html + +``` + +Comment below should **NOT** be seen: + + + +## 3 Horizontal Rules + +The HTML `
` element is for creating a "thematic break" between paragraph-level elements. +In Markdown, you can create a `
` 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 `

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

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

+``` + +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. + +
This is HTML
+ +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 +rendered as bold text +``` + +### 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 +rendered as italicized text +``` + +### 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 +Strike through this text. +``` + +### 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 +bold and italics +strikethrough and bold +strikethrough and italics +bold, italics and strikethrough +``` + +## 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 +
+

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

+
+``` + +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 + +``` + +### 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 +
    +
  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. +
+``` + +{{< 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 `. + +```markdown +In this example, `
` should be wrapped as **code**. +``` + +The rendered output looks like this: + +In this example, `
` should be wrapped as **code**. + +The HTML looks like this: + +```html +

+ In this example, <section></section> should be + wrapped with code. +

+``` + +### 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 +
+  
+    // Some comments
+    line 1 of code
+    line 2 of code
+    line 3 of code
+  
+
+``` + +### Block Fenced Code + +Use "fences" ``` to block in multiple lines of code with a language attribute. + +{{< highlight markdown >}} + +```markdown +Sample text here... +``` + +{{< / highlight >}} + +The HTML looks like this: + +```html +
+  Sample text here...
+
+``` + +### 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", +```js, 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 + + + + + + + + + + + + + + + + + + + + + +
OptionDescription
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. +
extextension to be used for dest files.
+``` + +{{< 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 + + +[Assemble](https://assemble.io) +``` + +The rendered output looks like this (hover over the link, there is no tooltip): + + + + + +[Assemble](https://assemble.io) + +The HTML looks like this: + +```html +https://assemble.io +contact@revolunet.com +Assemble +``` + +### 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 +Upstage +``` + +### 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 + +Content for chapter one. + +## Chapter 2 + +Content for chapter one. + +## Chapter 3 + +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 >}} -- cgit v1.2.3