From 51fb029ca27d67d7cd67352cdede45e5b25868f7 Mon Sep 17 00:00:00 2001 From: Christoph Cullmann Date: Sun, 14 Aug 2022 19:01:21 +0200 Subject: switch back to LoveIt, other theme is deprectated --- .../posts/basic-markdown-syntax/index.fr.md | 802 --------------------- 1 file changed, 802 deletions(-) delete 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 deleted file mode 100644 index b39fcc5..0000000 --- a/themes/CodeIT/exampleSite/content/posts/basic-markdown-syntax/index.fr.md +++ /dev/null @@ -1,802 +0,0 @@ ---- -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