Documentation de Qlam
#meta description:blog manager writen in c
#meta keywords:style,list, table, css, note
#meta author:Mourad Arnout
#style doc.css
#js LaTeXMathML.js
#date 9 nov 2020

#2 Documentation
#4 Table des matières
- [Styles typographiques->#Styles typographiques]
- [Titres->#Titres]
- [Listes->#Listes]
- [Tables->#Tables]
- [Code->#Code]
- [Liens->#Liens]
- [Note de bas de page->#Note de bas de page]
- [CSS->#CSS]
- [Javascript->#Javascript]
- [Entête->#Entête]
- [Divers->#Divers]

#3 Styles typographiques
Les styles de caractères disponibles sont
? Italique
	Saisie : ^Aitalique^A
	Résultat : 
italique

? Gras
	Saisie ^Bgras^B
	Résultat : gras
? Souligné
	Saisie ^Usouligné^U
	Résultat : souligné
? Code
	Saisie : ^Cfind /usr/share/ -name "c.vim"^C
	Saisie : find /usr/share/ -name "c.vim"
? Encadré
	Saisie : ^KCtrl^K
	Résultat : Ctrl

Remarque : Les caractères ^A, ^B, ^C, ^U, et ^K s'obtiennent sous linux par, respectivement Ctrl-V Ctrl-A, Ctrl-V Ctrl-B,  Ctrl-V Ctrl-C,  Ctrl-V Ctrl-U,  Ctrl-V Ctrl-K. 

Ces styles peuvent être imbriqués. Le code :
#code
Normal ^Aitalique ^Bgras et italique^A gras^B normal

donnera :
Normal 
italique gras et italique
 gras normal


Remarque : On peut modifier ces styles par des [feuilles css->#CSS].

 
[Table des matières->#top]
#3 Titres
En html il existe six niveaux de titres nommés <h1>, ..., <h6>. La balise Qlam pour les invoquer est du type #1, ..., #6. En plus Qlam crée une [ancre->#Ancre] de même nom. Exemple le titre de ce pargraphe a été codé ainsi : 
#code
#3 Titres

Ce code est un raccourci pour :
#code
<a id="Titres"></a>
<h3>Titres</h3>

Comme pour tous les éléments de la page, on ajuste les styles de présentation à son goût dans la ou les [feuilles css->#CSS].

Remarque
 : Pour que l'uri soit valide Qlam remplace les espaces par "%20", et supprime les foutus accents. L'utilisateur n'a pas à s'en préoccuper.
 
[Table des matières->#top]

#3 Listes
Trois types de listes sont pourvues : 
+ les listes à puces, 
+ les listes numérotées 
+ les listes en défition. 
Une liste est initiée par une ligne qui débute par -, + ou ?. 
#4 Listes à puces
Code :
#code
- Ligne 1
- Ligne 2
- Ligne 3

Résultat :
- Ligne 1
- Ligne 2
- Ligne 3

#4 Listes numérotées
Code :
#code
+ Ligne 1
+ Ligne 2
+ Ligne 3

Résultat :
+ Ligne 1
+ Ligne 2
+ Ligne 3

#4 Listes imbriquées
On peut imbriquer des liste en plaçant des tabulation au début de la ligne : Une tabulation par profondeur d'imbrication.
Code:
#code
- Ligne 1
	+ Ligne 11
	+ Ligne 12
	+ Ligne 13
- Ligne 2
- Ligne 3

Résultat :
- Ligne 1
	+ Ligne 11
	+ Ligne 12
	+ Ligne 13
- Ligne 2
- Ligne 3

#4 Listes en définition
Code :
#code
? Mot 1
	Définition de : Mot 1
? Mot 2
	Définition de : Mot 2

Résultat :
? Mot 1
	Définition de : Mot 1
? Mot 2
	Définition de : Mot 2


[Table des matières->#top]
#3 Tables
- Une table est initiée par la balise #table
- Les colonnes sont délimitées par le caractère |
- Une table est close par une ligne vide

Code
#code
#table
Décimal|Français|English
1      |un      |one
2      |deux    |two

L'alignement des caractères délimiteurs n'a aucune importance. Il peut ajouter au confort pour le rédacteur.
#table
Décimal|Français|English
1      |un      |one
2      |deux    |two

La balise #table accepte des arguments comme 
- #table class="bleue" : permet de personnaliser la classe.
- #table id="t1" : permet de référencer la table en javascript getElementById("t1") ou en python. Voir [Tableaux->table.html].

[Table des matières->#top]
#3 Code
Un style en ligne particulier est :
? Code
	S'obtient avec ^C\<code\>^C
	Résultat : <code>

Ce style utilise une police à chasse fixe (
monospace
). 

Une variante de style sous forme de bloc de code (
balise html <pre>
) est la suivante. Elle commence par la ligne #code et se temine par une ligne vide. 
Exemple ::
#code
#code
#!/usr/bin/env python3
from math import sqrt # racine carrée
def diviseurs(a):
	L = []
	for n in range(1, int(sqrt(a)) + 1):
		if a % n == 0:
			if n == a//n: 
				L.append(n)
			else: 
				L.extend([n, a//n])
	L.sort()
	return L

va donner :
#code
#!/usr/bin/env python3
from math import sqrt # racine carrée
def diviseurs(a):
	L = []
	for n in range(1, int(sqrt(a)) + 1):
		if a % n == 0:
			if n == a//n: 
				L.append(n)
			else: 
				L.extend([n, a//n])
	L.sort()
	return L


Remarque : On peut fournir à la balise #code un argument qui permet mettre en gras les mots clés d'un langage
, et les commentaires et les chaines de caractères en italiques. Exemple :
#code
#code c
// ctrl-A, ctrl-B, ctrl-C
for(int i=0; i<4; i++)
	printf("i: %s; ^%c", i, i + 'A');

Affichage html
#code c
// ctrl-A, ctrl-B, ctrl-C
for(int i=0; i<4; i++)
	printf("i: %s; ^%c", i, i + 'A');

Voir les fichiers c.kwds, cpp.kwds, js.kwds, bash.kwds et html.kwds. On peut en rajouter.
[Table des matières->#top]
#3 Liens
- Les liens hypertextes sont obtenus avec [Lien->cible]
- Une ancre ou une cible est une balise #: ancre Affichage..
- Les notes de bas de pages sont des liens particuliers #[1]

#4 Ancre
- Une ancre est une cible éventuelle d'un lien hypertexte.
- Elle est traduite en html en <a id=cible>Affichage</a>.
- Qlam crée une ancre invisible :
	+ pour le haut de la page <a id="top"></a>
	+ pour le bas de la page <a id="end"></a>
	+ pour chaque titre #1, ..., #6 une ancre de même nom.
On ajoute une ancre avec le code #: ancre affichage.
Exemple
#code
#: ancre ici

Résutat:
#: ancre ici

Les liens de ce document vers le haut de la page sont codés ainsi :
#code
[Table des matières->#top]

#4 Liens
? Liens internes au document
	Syntaxe : \[Table des matières->#top] 
	Résultat : [Table des matières->#top]
? Liens internes au site
	Syntaxe : \[Retourner à l'acceuil->index.html]
	Résultat : [Retourner à l'acceuil->index.html]
? Lien externe
	Syntaxe : \[Voir le site grognon->http://arad.free.fr]
	Résultat : [Voir le site grognon->http://arad.free.fr]

#4 Note de bas de page
Les notes de bas de page sont des liens particuliers dont la syntaxe a été simplifiée. Dans le texte on réalise un renvoi en bas de page avec le code #[1]. Essayez #[1]
La note de bas de page proprement dite se fait avec une balise #note suivie du numéro de la note. Une ligne vide clos le texte de la note. Exemple :
#code
#note 1
Ceci est une balise note de bas de page.
 

En fait la balise #note x ajoute le code suivant :
#code
<a id="x">(x)</a>
<div class="note">
....
</div>

Le contenu de la note de bas de page doit se terminier par une ligne vide.

[Table des matières->#top]
#3 CSS
On peut charger dans l'entête du document autant de feuilles css qu'on le souhaite. En cas de conflit la dernière recouvre les précédentes. La balise pour charger une feuille css est :
#code
#style perso

Elle est un raccourci de la balise html :
#code
<link rel="stylesheet" href="qlm/perso.css">

Les styles définis dans les pages css peuvent être utilisées soit pour surcharger les styles par défaut, soit pour définir des styles particuliers pour les balises bloc : #code, #div, #table.

On peut aussi écrire à tout moment du code html et faire appel au css.
Exemple :
#code
<div class="truc">
... <span class="emph"> .. </span>
</div>

[Table des matières->#top]
#3 Javascript
On peut invoquer du javascript soit directement en place soit à partir d'un fichier externe.
#4 Javascript en ligne
Exemple :
#code 
#js 
var now = new Date();
var h = now.getHours();
var m = now.getMinutes();
var s = now.getSeconds();
document.write('Il est ' + h + ':' + m + ':' + s); 

Ce petit javascript va afficher l'heure :
#js 
var now = new Date();
var h = now.getHours();
var m = now.getMinutes();
var s = now.getSeconds();
document.write('Il est ' + h + ':' + m + ':' + s); 

#4 Inclure un script à partir d'un fichier
Une autre façon d'insérer un script à partir d'un fichier externe. Ici un fichier date.js  a été préparé dans le dossier script. C'est le même script que ci-dessus. L'argument de la balise #js est le nom du fichier, sans indication de du dossier script.
#code
#js date.js

Le résultat est ici :
#js date.js

Cette balise correspond à 
#code
<script src="script/date.js">

Cette balise peut être utilisée dans l'entête, généralement pour inclure une librairie javascript comme par exemple LaTeXMathML.js
[Table des matières->#top]

#3 Entête
L'entête est placée au début du fichier. Cette entête constitue le \<head\> du fichier html. Elle peut comprendre
- Des balises #meta. Exemple : #meta author:moa
- Des balises #style. Exemple : #style perso
- D'autres balises. Exemple <script src="script/LaTeXMathML.js"></script>
- L'entête est close par la balise #date.

[Table des matières->#top]

#3 Divers
#4 Inclure du html
Il existe deux balises d'inclusion de code html :
#5 Inclure tout un fichier
#code
#inchtml fichier

Va inclure dans le document à l'endroit où est placée la balise, le contenu d'un fichier. Peut-être utile pour inclure des bouts de code utiles à certaines pages du site.
<hr>

#note 1
Ceci est une balise note de bas de page.

[Revenir à Note de bas de pages->#Note de bas de page]