Entête de fichier markdown pour serveur statique jekyll

---
layout: article
title:  tmux
toc: true
ref: (falcutatif)
create: 2020-08-03
modif: 2019-03-06  
tags: [tmux,divers]
lang: fr
description:  outil permettant d'exploiter plusieurs terminaux au sein d'un seul et même affichage
---

• layout : toujours post (Obligatoire)
• title : le titre du billet (Obligatoire)
• toc : true pour avoir un menu de lien des différentes entêtes du billet
• date : respecter le format aaaa-mm-jj (Obligatoire)
• categories et tags : un mot entre crochets sans espace ni caractères spéciaux , si plusieurs une virgule pour les séparer

jekyll tips

Faire un lien interne sur un autre billet

Welcome to my Jekyll Blog. I’m exploring how Jekyll handles links:
* [An absolute link](http://203.0.113.0:4000/about/)
* [A root relative link](/jekyll/update/welcome-to-jekyll/)

Vidéos

Alternative N°1
Syntaxe dans le “post” pour inclure une video
Exemple vidéo youtube : Markdown tutorial lien https://www.youtube.com/watch?v=6A5EpqqDOdk

{%- include extensions/youtube.html id=’6A5EpqqDOdk’ -%}

Alternative N°2
On affiche la première image de la vidéo , un clic permet la lecture sur le site youtube
Syntaxe dans le “post”

[![IMAGE ALT TEXT](https://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](https://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE "Video Title")

Exemple vidéo youtube : Markdown tutorial

Alternative N°3
Syntaxe directe

<iframe src="https://player.vimeo.com/video/193567768?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" ></iframe>

Alternative N°4
Pour les autres processeurs, vous pouvez toujours écrire du HTML brut dans votre document “de balisage”markdown” :

<video width="640" height="480" controls>
  <source src="/files/k-9mail01.mp4" type="video/mp4">
</video>

Images

![alt text](/images/A20-olinuxino-micro-top.png "Top view")

Images largeur fixée (si hauteur ajouter height="36px")
Avec hauteur et largeur image {:height="36px" width="30px"}

![image](/images/A20-olinuxino-micro-top.png){:width="300px"}

Fichiers

Les fichiers sont dans le dossier /files

[Fichier téléchargeable](/files/nomFichier)

Syntaxe makdown

This is intended as a quick reference and showcase. For more complete info, see John Gruber’s original spec and the Github-flavored Markdown info page.

Note that there is also a Cheatsheet specific to Markdown Here if that’s what you’re looking for. You can also check out more Markdown tools.

Il est possible de désactiver les balises liquid en utilisant raw / endraw

Exemple

Emphasis

Emphasis, aka italics, with *asterisks* or _underscores_.
Strong emphasis, aka bold, with ***asterisks*** or __underscores__.
Combined emphasis with ***asterisks* and _underscores_**.

Emphasis, aka italics, with asterisks or underscores.
Strong emphasis, aka bold, with asterisks or underscores.
Combined emphasis with asterisks and underscores.

Test ~~texte raturé~~   
<s>this is strike through text</s>  

Test texte raturé

Lists

(In this example, leading and trailing spaces are shown with with dots: ⋅)

1. First ordered list item
2. Another item
....* Unordered sub-list. 
1. Actual numbers don't matter, just that it's a number
....1. Ordered sub-list
4. And another item.

⋅⋅⋅You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).

⋅⋅⋅To have a line break without a paragraph, you will need to use two trailing spaces.⋅⋅
⋅⋅⋅Note that this line is separate, but within the same paragraph.⋅⋅

* Unordered list can use asterisks
- Or minuses
+ Or pluses

1. First ordered list item
2. Another item
   • Unordered sub-list.
3. Actual numbers don’t matter, just that it’s a number
   1. Ordered sub-list

4. And another item.

   You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we’ll use three here to also align the raw Markdown).

   To have a line break without a paragraph, you will need to use two trailing spaces.
   Note that this line is separate, but within the same paragraph.

• Unordered list can use asterisks
• Or minuses

• Or pluses

• List 0
• List

• Hello!

  Hello

  Item 2 Hello

  Hibuli habuli!Code here

  • Item 3

• Hello again

       Hassd *code*
  

  Code here

1. Stuff

Hello

Markdown FTW!

1986. What a great season. A link here: http://www.example.com/ that should be automatically detected.

Stuff here!. This is pretty cool.

• Hello
  • Booboo

What [up to the ][name] cats n dogs :) Hello!! Some emphasized stuff here. A * star * has [born]. This * i dont know what*will happen.

1. Stuff
2. Hello
3. Again
4. Stuff

This is an example inline link.

Hello **`strong text** here

These * should * not *be* selected. This* neither! should be. This *neither should* be

Links

There are two ways to create links.

[I'm an inline-style link](https://www.google.com)

[I'm an inline-style link with title](https://www.google.com "Google's Homepage")

[You can use numbers for reference-style link definitions][1]

URLs and URLs in angle brackets will automatically get turned into links in the preview. 
http://www.example.com or <http://www.example.com>

[1]: http://www.qownnotes.org

You can also put the [link URL][1] below the current paragraph
like [this][2].

   [1]: http://url
   [2]: http://another.url "A funky title"

I’m an inline-style link

I’m an inline-style link with title

You can use numbers for reference-style link definitions

URLs and URLs in angle brackets will automatically get turned into links in the preview. http://www.example.com or http://www.example.com

You can also put the link URL below the current paragraph like this.

Code and Syntax Highlighting

Inline `code` has `back-ticks around` it.

Inline code has back-ticks around it.

Blocks of code are either fenced by lines with three back-ticks, or are indented with four spaces. I recommend only using the fenced code blocks – they’re easier and only they support syntax highlighting.

	s = "Code with space indent"
	print s

highlighting codes

#!/bin/sh
#lancement jekyll
cd /srv/wikistatic/
#bundle exec jekyll serve
/usr/local/bin/bundle exec jekyll build --watch

Exemples de code

bash

#/bin/bash
fichierindex="indexA.html"
echo '<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Fichiers html</title>
</head>
<body>
 <ul>' > $fichierindex
OIFS=$IFS
IFS=$'\n'
  for file in $(find /home/yannick/Documents/html/ -name "*.html")
    do 
       lien=$(basename ${file%.*})
       echo '<li><a href="'$lien'.html">'$lien'</a></li>' >> $fichierindex
    done
IFS=$OIFS
echo '
 </ul>
</body>
</html>' >> $fichierindex

Entre deux ` ` (altgr 7)

entre deux altgr 7

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

#!/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

 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();
  };

Tables

Tables aren’t part of the core Markdown spec, but the QOwnNotes preview supports them.

Colons can be used to align columns.

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

There must be at least 3 dashes separating each header cell.
The outer pipes (|) are optional, and you don't need to make the 
raw Markdown line up prettily. You can also use inline Markdown.

Markdown | Less | Pretty
--- | --- | ---
*Still* | `renders` | **nicely**
1 | 2 | 3

Colons can be used to align columns.

Blockquotes

> Blockquotes are very handy in email to emulate reply text.
> This line is part of the same quote.

Quote break.

> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote. 

Blockquotes are very handy in email to emulate reply text. This line is part of the same quote.

Quote break.

This is a very long line that will still be quoted properly when it wraps. Oh boy let’s keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.

Horizontal Rule

Three or more...

---

Hyphens

***

Asterisks

___

Underscores

Three or more…

Hyphens

Asterisks

Underscores

Line Breaks

Here's a line for us to start with.

This line is separated from the one above by two newlines, so it will be a *separate paragraph*.

This line is also begins a separate paragraph, but...  
This line is only separated by two trailing spaces and a single newline, so it's a separate line in the *same paragraph*.

Here’s a line for us to start with.

This line is separated from the one above by two newlines, so it will be a separate paragraph.

This line is also begins a separate paragraph, but…
This line is only separated by two trailing spaces and a single newline, so it’s a separate line in the same paragraph.

Escapes and HTML

What if you want to just show asterisks, not italics?

• this shows up in italics: a happy day
• this shows the asterisks: *a happy day*

Output:

this shows up in italics: a happy day
this shows the asterisks: *a happy day*

The backslashes will disappear and leave the asterisks. You can do the same with any of the characters that have a special meaning for Markdown.

Many simple HTML tags are allowed, for example And unknown tags will be dropped. To show a literal or an unknown tag like you need escape it with HTML entities: :

<b>this will be bold</b>
you should escape &lt;unknown&gt; tags
&copy; special entities work
&amp;copy; if you want to escape it

Output:

this will be bold
you should escape <unknown> tags
© special entities work
&copy; if you want to escape it

HTML tags that are block-level like <div> can be used, but if there is markdown formatting within it, you must add a “markdown” attribute: <div markdown> Some safe attributes are also allowed, permitting basic styling and layout: <div markdown style="float:left">

Individual ampersands (&) and less-than signs (<) are fine, they will be shown as expected.

Headers

# H1
## H2
### H3
#### H4
##### H5
###### H6

Alternatively, for H1 and H2, an underline-ish style:

Alt-H1
======

Alt-H2
------

H1

H2

H3

H4

H5

H6

Alternatively, for H1 and H2, an underline-ish style:

Alt-H1

Alt-H2

Another header

Let’s see _if the emphasis

carries over_ to another paragraph.

And ` maybe this ` should Hello not be

Header

Header

Credit: markdown-here
License: CC-BY

Additional styles

Jekyll use kramdown as the default markdown processor. kramdown can adding attributes to block and span-level elements thgird-containre ALDs¹ feature. with the help of ALDs, we can defined class names to an element by {:.class-name1.class-name-2}.

TeXt offer some CSS classes that you can use in the post. You can refer to THIS POST.

Alert

Success Text.

Info Text.

Warning Text.

Error Text.

markdown:

Success Text.
{:.success}

Info Text.
{:.info}

Warning Text.
{:.warning}

Error Text.
{:.error}

Tag

success

info

warning

error

markdown:

`success`{:.success}

`info`{:.info}

`warning`{:.warning}

`error`{:.error}

Image

Border

![Image](path-to-image){:.border}

Shadow

![Image](path-to-image){:.shadow}

Rounded

![Image](path-to-image){:.rounded}

Circle

![Image](path-to-image){:.circle}

Mixture

![Image](path-to-image){:.border.rounded}

![Image](path-to-image){:.circle.shadow}

![Image](path-to-image){:.circle.border.shadow}

Icons Image Item

TeXt uses Font Awesome for icons, you can search available icon code snippet HERE.

<i class="fas fa-download"></i>

<a class="button button--success button--rounded button--lg" href="#"><i class="fas fa-download"></i> Download TeXt Theme</a>

Size

Extreme Small

<img class="image image--xs" src=""/>

Small

<img class="image image--sm" src=""/>

Middle

<img class="image image--md" src=""/>

Large

<img class="image image--lg" src=""/>

Extreme Large

<img class="image image--xl" src=""/>

Item

Content

<div class="item">
  <div class="item__content">
    <div class="item__header">
      <h4>Photograph</h4>
    </div>
    <div class="item__description">
      <p>...</p>
    </div>
  </div>
</div>

Image and Content

Photograph

<div class="item">
  <div class="item__image">
    <img class="image" src=""/>
  </div>
  <div class="item__content">
    <div class="item__header">
      <h4>Photograph</h4>
    </div>
  </div>
</div>

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.

<div class="item">
  <div class="item__image">
    <img class="image" src=""/>
  </div>
  <div class="item__content">
    <div class="item__header">
      <h4>Photograph</h4>
    </div>
    <div class="item__description">
      <p>...</p>
    </div>
  </div>
</div>

Image Size

Photograph

<div class="item">
  <div class="item__image">
    <img class="image image--xs" src=""/>
  </div>
  <div class="item__content">
    <div class="item__header">
      <h4>Photograph</h4>
    </div>
  </div>
</div>

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.

<div class="item">
  <div class="item__image">
    <img class="image image--sm" src=""/>
  </div>
  <div class="item__content">
    <div class="item__header">
      <h4>Photograph</h4>
    </div>
    <div class="item__description">
      <p>...</p>
    </div>
  </div>
</div>

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.

<div class="item">
  <div class="item__image">
    <img class="image image--lg" src=""/>
  </div>
  <div class="item__content">
    <div class="item__header">
      <h4>Photograph</h4>
    </div>
    <div class="item__description">
      <p>...</p>
    </div>
  </div>
</div>

Button

Type

Primary

[BUTTON](#){:.button.button--primary.button--pill}

<a class="button button--primary button--pill" href="">BUTTON</a>

Secondary

[BUTTON](#){:.button.button--secondary.button--pill}

<a class="button button--secondary button--pill" href="">BUTTON</a>

Success

[BUTTON](#){:.button.button--success.button--pill}

<a class="button button--success button--pill" href="">BUTTON</a>

Outline

[BUTTON](#){:.button.button--outline-success.button--pill}

<a class="button button--outline-success button--pill" href="">BUTTON</a>

Shape

Pill

[BUTTON](#){:.button.button--primary.button--pill}

<a class="button button--primary button--pill" href="">BUTTON</a>

Rounded

[BUTTON](#){:.button.button--primary.button--rounded}

<a class="button button--primary button--rounded" href="">BUTTON</a>

Circle

[X](#){:.button.button--primary.button--circle}

<a class="button button--primary button--circle" href="">X</a>

Size

Extreme Small

[BUTTON](#){:.button.button--primary.button--rounded.button--xs}

<a class="button button--primary button--rounded button--xs" href="">BUTTON</a>

Small

[BUTTON](#){:.button.button--primary.button--rounded.button--sm}

<a class="button button--primary button--rounded button--sm" href="">BUTTON</a>

Middle

[BUTTON](#){:.button.button--primary.button--rounded}

<a class="button button--primary button--rounded" href="">BUTTON</a>

Large

[BUTTON](#){:.button.button--primary.button--rounded.button--lg}

<a class="button button--primary button--rounded button--lg" href="">BUTTON</a>

Extreme Large

[BUTTON](#){:.button.button--primary.button--rounded.button--xl}

<a class="button button--primary button--rounded button--xl" href="">BUTTON</a>

card

Image

<div class="card">
  <div class="card__image">
    <img class="image" src=""/>
  </div>
</div>

Content

<div class="card">
  <div class="card__content">
    <div class="card__header">
      <h4>Photograph</h4>
    </div>
    <p>...</p>
  </div>
</div>

Image and Content

Photograph

<div class="card">
  <div class="card__image">
    <img class="image" src=""/>
  </div>
  <div class="card__content">
    <div class="card__header">
      <h4>Photograph</h4>
    </div>
  </div>
</div>

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.

<div class="card">
  <div class="card__image">
    <img class="image" src=""/>
  </div>
  <div class="card__content">
    <div class="card__header">
      <h4>Photograph</h4>
    </div>
    <p>...</p>
  </div>
</div>

Image Overlay

Photograph

<div class="card">
  <div class="card__image">
    <img class="image" src=""/>
    <div class="overlay">
      <p>Photograph</p>
    </div>
  </div>
</div>

Photograph

<div class="card">
  <div class="card__image">
    <img class="image" src=""/>
    <div class="overlay overlay--bottom">
      <p>Photograph</p>
    </div>
  </div>
</div>

Flat

Photograph

<div class="card card--flat">
  <div class="card__image">
    <img class="image" src=""/>
  </div>
  <div class="card__content">
    <div class="card__header">
      <h4>Photograph</h4>
    </div>
  </div>
</div>

Clickable

<a href="">
  <div class="card card--clickable">
    <div class="card__image">
      <img class="image" src=""/>
    </div>
  </div>
</a>

Hero

Normal

<div class="hero" style="background-color: #ccc;">
  <div class="hero__content">
    <h3>Hero</h3>
  </div>
</div>

Center

<div class="hero hero--center" style="background-color: #ccc;">
  <div class="hero__content">
    <h3>Hero</h3>
  </div>
</div>

Dark Theme

<div class="hero hero--dark" style="background-color: #123;">
  <div class="hero__content">
    <h3>Hero</h3>
  </div>
</div>

Background Image

<div class="hero hero--dark" style='background-image: url("path-to-image");'>
  <div class="hero__content">
    <h3>Hero</h3>
  </div>
</div>

<div class="hero hero--dark" style='background-image: url("path-to-image");'>
  <div class="hero__content">
    <h3>Hero</h3>
    <p>...</p>
  </div>
</div>

Height

<div class="hero hero--dark" style='height: 500px; background-image: url("path-to-image");'>
  <div class="hero__content">
    <h3>Hero</h3>
    <p>...</p>
  </div>
</div>

Background Image + Center

<div class="hero hero--center hero--dark" style='background-image: url("path-to-image");'>
  <div class="hero__content">
    <h3>Hero</h3>
    <p>...</p>
  </div>
</div>

<style>
  .hero-example--linear-gradient {
    background-image: linear-gradient(135deg, rgba(255, 69, 0, .5), rgba(255, 197, 0, .2)), url("path-to-image");
  }
</style>

<div class="hero hero--center hero--dark hero-example--linear-gradient">
  <div class="hero__content">
    <h3>Hero</h3>
    <p>...</p>
  </div>
</div>

swiper

Alpha

Normal

.swiper-demo {
  height: 220px;
}

<div class="swiper swiper-demo">
  <div class="swiper__wrapper">
    <div class="swiper__slide">1</div>
    <div class="swiper__slide">2</div>
    <div class="swiper__slide">3</div>
    <div class="swiper__slide">4</div>
    <div class="swiper__slide">5</div>
    <div class="swiper__slide">6</div>
    <div class="swiper__slide">7</div>
  </div>
  <div class="swiper__button swiper__button--prev fas fa-chevron-left"></div>
  <div class="swiper__button swiper__button--next fas fa-chevron-right"></div>
</div>

{%- include scripts/lib/swiper.js -%}
var SOURCES = window.TEXT_VARIABLES.sources;
window.Lazyload.js(SOURCES.jquery, function() {
  $('.swiper-demo').swiper();
});

Light Theme

Dark Theme

Images

Without Animation