can be used, but if there is markdown formatting within it, you must add a "markdown" attribute:
Some safe attributes are also allowed, permitting basic styling and layout:
Individual ampersands (&) and less-than signs (<) are fine, they will be shown as expected.
Les balises HTML au niveau du bloc, comme `
`, peuvent être utilisées, mais si elles contiennent un formatage markdown, vous devez ajouter un attribut "markdown" : `
`
Certains attributs sûrs sont également autorisés, permettant un style et une mise en page de base : `
`
Les esperluettes (`&`) et les signes moins que (`<`) sont acceptables, ils seront affichés comme prévu.
un
deux
trois
Foo1
Foo2
Foo3
### Code et Syntaxe Highlighting
Pour écrire un morceau de code dans un texte, Markdown l’identifie au moyen du caractère appelé le Backtick ou apostrophe inversée. Attention, à ne pas confondre avec les guillemets. Le marquage est donc constitué d’une apostrophe inversée au début et à la fin du segment correspondant au code. C’est ainsi que vous pourrez incorporer directement le code source ou une commande logicielle dans le texte.
```
Le `code` en ligne est entouré de `back-ticks`.
```
Le `code` en ligne est entouré de `back-ticks`.
Les blocs de code sont soit délimités par des lignes comportant trois crochets, soit indentés de quatre espaces. Je recommande de n'utiliser que les blocs de code clôturés : ils sont plus faciles à utiliser et sont les seuls à prendre en charge la coloration syntaxique.
```
s = "Code with space indent"
print s
```
highlighting codes
```bash
#!/bin/sh
#lancement jekyll
cd /srv/wikistatic/
#bundle exec jekyll serve
/usr/local/bin/bundle exec jekyll build --watch
```
Exemples de code
bash
```bash
#/bin/bash
fichierindex="indexA.html"
echo '
Fichiers html
' > $fichierindex
OIFS=$IFS
IFS=$'\n'
for file in $(find /home/yannick/Documents/html/ -name "*.html")
do
lien=$(basename ${file%.*})
echo '
' >> $fichierindex
```
Entre deux \` \` (altgr 7)
`entre deux altgr 7`
python
```python
#!/usr/bin/env python
import os
from gi.repository import Gtk
from gi.repository import AppIndicator3
class AppIndicatorExample:
def __init__(self, indicator_id):
self.ind = AppIndicator3.Indicator.new(str(indicator_id), os.path.abspath('sample_icon.svg'), AppIndicator3.IndicatorCategory.SYSTEM_SERVICES)
self.ind.set_status(AppIndicator3.IndicatorStatus.ACTIVE)
# create a menu
self.menu = Gtk.Menu()
item = Gtk.MenuItem(str(indicator_id))
item.show()
self.menu.append(item)
image = Gtk.ImageMenuItem(Gtk.STOCK_QUIT)
self.menu.append(image)
self.menu.show()
self.ind.set_menu(self.menu)
def quit(self, widget, data=None):
Gtk.main_quit()
if __name__ == "__main__":
indicator = AppIndicatorExample(1)
Gtk.main()
```
perl
```perl
#!/usr/bin/perl -w
use strict;
use warnings;
use constant VERSION => 0.03;
if(scalar @ARGV != 4) {
&help;
}
my $image_web;
my $dimensions;
# Détermination des arguments
for(my $i = 0; $i < scalar @ARGV; $i +=2) {
if($ARGV[$i] eq "-s") {
$dimensions = $ARGV[$i + 1];
}
elsif($ARGV[$i] eq "-i") {
$image_web = $ARGV[$i + 1];
}
else {
print STDERR "Argument $ARGV[$i] inconnu\n";
&help;
}
}
```
javascript
```javascript
function init() {
/* Sidebar height set */
$sidebarStyles = $('.sidebar').attr('style')
$sidebarStyles += ' min-height: ' + $(document).height() + 'px;';
$('.sidebar').attr('style', $sidebarStyles);
/* Secondary contact links */
var $scontacts = $('#contact-list-secondary');
var $contactList = $('#contact-list');
$scontacts.hide();
$contactList.mouseenter(function(){ $scontacts.fadeIn(); });
$contactList.mouseleave(function(){ $scontacts.fadeOut(); });
/**
* Tags & categories tab activation based on hash value. If hash is undefined then first tab is activated.
*/
function activateTab() {
if(['/tags.html', '/categories.html'].indexOf(window.location.pathname) > -1) {
var hash = window.location.hash;
if(hash)
$('.tab-pane').length && $('a[href="' + hash + '"]').tab('show');
else
$('.tab-pane').length && $($('.cat-tag-menu li a')[0]).tab('show');
}
}
// watch hash change and activate relevant tab
$(window).on('hashchange', activateTab);
// initial activation
activateTab();
};
```
**Liste des formats du bloc de code Markdown**
Les langues prises en charge dépendent fortement de l'analyseur Markdown que vous utilisez. Ce qui suit est une liste de plusieurs langues et formats courants que vous pouvez essayer. Si votre langue ne figure pas dans cette liste, je vous suggère d'essayer simplement si elle est supportée. Vous pouvez également consulter la documentation de votre langage Markdown spécifique.
```
actionscript3
apache
applescript
asp
brainfuck
c
cfm
clojure
cmake
coffee-script, coffeescript, coffee
cpp – C++
cs
csharp
css
csv
bash
diff
elixir
erb – HTML + Embedded Ruby
go
haml
http
java
javascript
json
jsx
less
lolcode
make – Makefile
markdown
matlab
nginx
objectivec
pascal
PHP
Perl
python
profile – python profiler output
rust
salt, saltstate – Salt
shell, sh, zsh, bash – Shell scripting
scss
sql
svg
swift
rb, jruby, ruby – Ruby
smalltalk
vim, viml – Vim Script
volt
vhdl
vue
xml – XML and also used for HTML with inline CSS and Javascript
yaml
```
### Tableaux
Pour créer un tableau vous devez placer une ligne de tirets (-) sous la ligne d'entête et séparer les colonnes avec des `|`.
Vous pouvez aussi préciser l'alignement en utilisant des `:. :`
```
| Aligné à gauche | Centré | Aligné à droite |
| :--------------- |:---------------:| -----:|
| Aligné à gauche | ce texte | Aligné à droite |
| Aligné à gauche | est | Aligné à droite |
| Aligné à gauche | centré | Aligné à droite |
Markdown | Less | Pretty
--- | --- | ---
*Still* | `renders` | **nicely**
1 | 2 | 3
```
| Aligné à gauche | Centré | Aligné à droite |
| :--------------- |:---------------:| -----:|
| Aligné à gauche | ce texte | Aligné à droite |
| Aligné à gauche | est | Aligné à droite |
| Aligné à gauche | centré | Aligné à droite |
Markdown | Less | Pretty
--- | --- | ---
*Still* | `renders` | **nicely**
1 | 2 | 3
### Repli texte - Citations
```
> Le repli texte à l'aide de `>` est très pratique dans les courriels pour émuler un texte de réponse.
> Cette ligne fait partie de la même citation.
Saut de citation.
> Il s'agit d'une très longue ligne qui sera toujours citée correctement lorsqu'elle sera enveloppée. Oh, continuons à écrire pour nous assurer que la ligne est assez longue pour que tout le monde puisse la lire. Oh, vous pouvez *mettre* **Markdown** dans un blockquote.
```
> Le repli texte à l'aide de `>` est très pratique dans les courriels pour émuler un texte de réponse.
> Cette ligne fait partie de la même citation.
Saut de citation.
> Il s'agit d'une très longue ligne qui sera toujours citée correctement lorsqu'elle sera enveloppée. Oh, continuons à écrire pour nous assurer que la ligne est assez longue pour que tout le monde puisse la lire. Oh, vous pouvez *mettre* **Markdown** dans un blockquote.
### Ligne Horizontale
```
Trois ou plus...
---
Traits d'union
***
Astérisques
___
Soulignés
```
**Trois ou plus...**
---
Traits d'union
***
Astérisques
___
Soulignés
### Ligne Breaks
```
Voici une ligne pour commencer.
Cette ligne est séparée de la précédente par deux nouvelles lignes, ce qui en fait un *paragraphe séparé*.
Cette ligne commence également un paragraphe séparé, mais...
Cette ligne n'est séparée que par deux espaces et une seule nouvelle ligne, c'est une ligne distincte dans le *même paragraphe*.
```
Voici une ligne pour commencer.
Cette ligne est séparée de la précédente par deux nouvelles lignes, ce qui en fait un *paragraphe séparé*.
Cette ligne commence également un paragraphe séparé, mais...
Cette ligne n'est séparée que par deux espaces et une seule nouvelle ligne, il s'agit donc d'une ligne distincte dans le *même paragraphe*.
### Titres
Par défaut, pour rédiger un titre avec Markdown, on utilise le dièse. On le sépare du texte avec une espace. Pour créer des sous-titres de hiérarchie inférieure, et donc rédigés en plus petits, il suffit d’insérer des dièses supplémentaires. Comme pour l’édition HTML, vous pourrez créer jusque 6 niveaux de sous-titres.
```
# H1
## H2
### H3
#### H4
##### H5
###### H6
Alternatively, for H1 and H2, an underline-ish style:
Alt-H1
======
Alt-H2
------
```
## Alerte et Tag
### Alerte
Success Text.
{:.success}
Info Text.
{:.info}
Warning Text.
{:.warning}
Error Text.
{:.error}
**markdown:**
Success Text.
{:.success}
^
Info Text.
{:.info}
^
Warning Text.
{:.warning}
^
Error Text.
{:.error}
### Tag
`success`{:.success}
`info`{:.info}
`warning`{:.warning}
`error`{:.error}
**markdown:**
`success`{:.success}
^
`info`{:.info}
^
`warning`{:.warning}
^
`error`{:.error}
## Boutons
| Type | Class Names |
| ---- | ---- |
| **base** | button |
| **type** | button\-\-primary, button\-\-secondary, button\-\-success, button\-\-info, button\-\-warning, button\-\-error, button\-\-outline\-primary, button\-\-outline\-secondary, button\-\-outline\-success, button\-\-outline\-info, button\-\-outline\-warning, button\-\-outline\-error |
| **shape** | button\-\-pill, button\-\-rounded, button\-\-circle |
| **size** | button\-\-md (default), button\-\-xs, button\-\-sm, button\-\-lg, button\-\-xl |
### Primaire
[BUTTON](#){:.button.button--primary.button--rounded}
```html
BUTTON
```
### Large
BUTTON
[BUTTON](#){:.button.button--primary.button--rounded.button--lg}
```html
BUTTON
```
### Extrêmement Large
BUTTON
[BUTTON](#){:.button.button--primary.button--rounded.button--xl}
```html
BUTTON
```
## Graphes
### MathJax
Ajouter au Front matter `mathjax: true`
```
When $$a \ne 0$$, there are two solutions to $$ax^2 + bx + c = 0$$
and they are
$$x_1 = {-b + \sqrt{b^2-4ac} \over 2a}$$
$$x_2 = {-b - \sqrt{b^2-4ac} \over 2a} \notag$$
```
When $$a \ne 0$$, there are two solutions to $$ax^2 + bx + c = 0$$
and they are
$$x_1 = {-b + \sqrt{b^2-4ac} \over 2a}$$
$$x_2 = {-b - \sqrt{b^2-4ac} \over 2a} \notag$$
### Mermaid
* [Jekyll - Diagram with Mermaid](https://jojozhuang.github.io/tutorial/jekyll-diagram-with-mermaid/)
Ajouter au Front matter `mermaid: true`
```mermaid
graph LR
A --- B
B-->C[Happy]
B-->D(Sad);
```
Markdown
```mermaid
graph LR
A --- B
B-->C[Happy]
B-->D(Sad);
```
Autre exemple
```mermaid
graph TD
B[peace]
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
B-->E(fa:fa-camera-retro perhaps?);
```
### Chart
ajouter au Front matter `chart: true`
**Line Chart**
```chart
{
"type": "line",
"data": {
"labels": [
"January",
"February",
"March",
"April",
"May",
"June",
"July"
],
"datasets": [
{
"label": "# of bugs",
"fill": false,
"lineTension": 0.1,
"backgroundColor": "rgba(75,192,192,0.4)",
"borderColor": "rgba(75,192,192,1)",
"borderCapStyle": "butt",
"borderDash": [],
"borderDashOffset": 0,
"borderJoinStyle": "miter",
"pointBorderColor": "rgba(75,192,192,1)",
"pointBackgroundColor": "#fff",
"pointBorderWidth": 1,
"pointHoverRadius": 5,
"pointHoverBackgroundColor": "rgba(75,192,192,1)",
"pointHoverBorderColor": "rgba(220,220,220,1)",
"pointHoverBorderWidth": 2,
"pointRadius": 1,
"pointHitRadius": 10,
"data": [
65,
59,
80,
81,
56,
55,
40
],
"spanGaps": false
}
]
},
"options": {}
}
```
**markdown:**
```chart
{
"type": "polarArea",
"data": {
"datasets": [
{
"data": [
11,
16,
7,
3,
14
],
"backgroundColor": [
"#FF6384",
"#4BC0C0",
"#FFCE56",
"#E7E9ED",
"#36A2EB"
],
"label": "My dataset"
}
],
"labels": [
"Red",
"Green",
"Yellow",
"Grey",
"Blue"
]
},
"options": {}
}
```
Pie chart
```chart
{
"type": "pie",
"data": {
"labels": ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
"datasets": [{
"label": "Votes",
"data": [12, 19, 3, 5, 2, 3],
"backgroundColor": [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)"
],
"borderColor": [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)"
],
"borderWidth": 1
}]
},
"options": {}
}
```
## Vidéos
### Youtube
**Youtube (markdown)**
On affiche la première image de la vidéo , un clic permet la lecture sur le site **youtube**
Syntaxe dans le "post"
```
[](https://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE "Video Title")
```
Exemple vidéo youtube : **Markdown tutorial**
```
[](https://www.youtube.com/watch?v=6A5EpqqDOdk "Markdown tutorial")
```
[](https://www.youtube.com/watch?v=6A5EpqqDOdk "Markdown tutorial")
**Youtube (iframe)**
```
```
### Iframe
**Syntaxe directe (iframe)**
```
```
### Video
**HTML brut (video)**
Vous pouvez toujours écrire du HTML brut dans votre document "de balisage"markdown" :
```
```
### Ted
```
```
### Soundcloud
```
```
### codepen
## Images
### Icônes
TeXt uses Font Awesome for icons, you can search available icon code snippet [HERE](https://fontawesome.com/icons?d=gallery&q=donw&m=free).
```html
```
### Exemples
```
```
Images largeur fixée (si hauteur ajouter `height="36px"`)
Avec hauteur et largeur image `{:height="36px" width="30px"}`
```
{:width="300px"}
```
{:width="300px"}
### Extrêmement Petit
```html
```
### Petit
```html
```
### Moyen
```html
```
### Large
```html
```
### Extrêmement Large
```html
```
## Elément
### Contenu
Photograph
A photograph is an image created by light falling on a photosensitive surface, usually photographic film or an electronic image sensor, such as a CCD or a CMOS chip.
```html
Photograph
...
```
### Image et Contenu
Photograph
```html
Photograph
```
Photograph
A photograph is an image created by light falling on a photosensitive surface, usually photographic film or an electronic image sensor, such as a CCD or a CMOS chip.
```html
Photograph
...
```
### Taille Image
Photograph
```html
Photograph
```
Photograph
A photograph is an image created by light falling on a photosensitive surface, usually photographic film or an electronic image sensor, such as a CCD or a CMOS chip.
```html
Photograph
...
```
Photograph
A photograph is an image created by light falling on a photosensitive surface, usually photographic film or an electronic image sensor, such as a CCD or a CMOS chip.
```html
Photograph
...
```
## Format Carte
### Image
```html
```
### Contenu
Photograph
A photograph is an image created by light falling on a photosensitive surface, usually photographic film or an electronic image sensor, such as a CCD or a CMOS chip.
```html
Photograph
...
```
### Image et Contenu
Photograph
```html
Photograph
```
Photograph
A photograph is an image created by light falling on a photosensitive surface, usually photographic film or an electronic image sensor, such as a CCD or a CMOS chip.
```html