Bac à sable - o7acode.net

Édition

See this page in english

= L'o7aCode, aussi simple que du BBCode =

L'o7aCode permet de donner forme au texte avec une syntaxe relativement simple. Par exemple, pour mettre du texte en forte emphase '''voici la syntaxe''', pour l'emphase ''c'est ainsi''. Vous pouvez aussi --barrer le texte--, ++insérer du texte++ ou ""citer du texte"". Pour citer un bloque de texte, c'est comme ça :

"""
Voici un bloque de texte cité...

... qui peut prendre plusieurs lignes.
"""

Pour faire un lien : [http://www.example.net/]intitulé du lien[/], ou plus brièvement (sans intitulé) : []http://www.example.net/[/].

Pour insérer une image :

{http://galeries.o7a.net/bertrand/mini/photos1/photo11.jpg}

Les listes :

* 1er élément,
* 2em élément,
* 3em élément ...

Je n'ai cependant pas prévu de syntaxe simple pour des éléments de mise en page "gadgets" tels que la colorisation du texte...

= L'o7aCode, aussi complet que de l'html =

Vous avez pu remarquer que pour insérer des titres il faut mettre des symboles =. Le nombre de symboles = à droite et à gauche du titre renseigne sur le niveau du titre, pour un sous-titre :

== les listes ==

Les listes numérotées :

# élément numéroté,
# élément numéroté,
# élément numéroté ...

Les listes à plusieurs niveaux :

* un élément, une sous-liste :
** un sous-élément,
** un autre sous-élément,
* un autre élément,
* un 3em élément, une sous liste numérotée :
*# un sous-élément numéroté,
*# un second, une sous-sous-liste :
*** un sous-sous-élément,
*** un autre,
* et ainsi de suite ...

== Quelques autres syntaxes ==

Vous pouvez faire des (Abréviations)abbr(/), indiquer <<les références>> d'une ""citation"", insérer des tirets d'incise ---pour faire des incises---, des retours à la ligne sans changer de paragraphe : /-/ ainsi que des barres horizontales :

 ----

Aujourd'hui, il n'est pas rare qu'un document ne soit pas rédigé en une traite ni par une seule personne, pour les wikis par exemple ; C'est là que les commentaires prennent tout leur intérêt.

Les commentaires en ligne : // après ces deux symboles, la ligne ne sera pas affichée.
	
En bloque : /* Voici un commentaire '''en bloque'''

Où l'on peut insérer plusieurs lignes qui ne seront pas ''interprétées'' ... */

== L'insertion de codes ==

L'insertion en-ligne : °°[b]du BBCode[/b]°°, et voici de l'insertion en bloque, avec colorisateur syntaxique :

php :


°°° php
function truncate($str, $lenght_max, $with_abbr=true) {
	if(strlen($str) > $lenght_max) {
		if($with_abbr) $returned = '<abbr title="'.$str.'">';
		$returned.= substr($str, 0, ($lenght_max-3)).'...';
		if($with_abbr) $returned.= '</abbr>';
	}
	else $returned = $str;
	return $returned;
}
°°°

html :

°°° html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<title>o7a.net - Home page</title>
		<link rel="stylesheet" type="text/css" href="http://o7a.net/css/main.css" media="screen" />
	</head>
	<body>
...
	</body>
</html>
°°°

Si vous ne souhaitez aucun colorisateur, n'indiquez rien :

°°°
//STRONG EMPHASIS
if($this->getParam('active_strongEmphasis')) {
	$content = preg_replace_callback('#\'\'\'(.*)\'\'\'#mU',array(&$this,'transformStrongEmphasis'),$content);
}
			
//EMPHASIS
if($this->getParam('active_emphasis')) {
	$content = preg_replace_callback('#\'\'(.*)\'\'#mU',array(&$this,'transformEmphasis'),$content);
}
°°°

== les attributs ==

L'o7aCode permet d'insérer un bon nombre de balises html, mais leur paramétrage reste jusqu'ici fort restreint ... Comment renseigner l'attribut °°title°° des liens ? Comment donner une alignement aux images ?

Il est possible de renseigner ''tous les attributs'' de ''toutes les balises'' vues jusqu'ici : aussi bien les images, liens et titres, que les balises d'emphase, les listes ou même les paragraphes !

Vous pouvez ---dans un premier temps--- renseigner des attributs prédéfinis ---dans un certain ordre---. Il faut les précéder chacun de deux deux-points. Par exemple, [http://www.example.net :: lien fictif pour l'exemple]ce lien[/] a l'attribut °°title°° de défini.

Il serait cependant fastidieux de prédéfinir tous les attributs, et l'ordre est ici imposer, ce qui restreint la syntaxe aux attributs les plus couramment utilisés. Pour renseigner un attribut choisi, la syntaxe est sensiblement différente : il faut cette fois ci précéder l'attribution de deux point-virgule, mettre l'intitulé de l'attribut, puis sa valeur (en séparant les deux d'un ou plusieurs caractères non-alphanumériques). Par exemple, l'attribut °°id°° de [http://www.example.net ;; id : lien1]ce lien[/] est défini.

Vous pouvez bien sûr mélanger les deux types d'attribution, le seul ordre à respecter est celui des attributs prédéfinis.

=== ''Toutes'' les balises :: id_for_thetitle ===

{http://galeries.o7a.net/bertrand/mini/photos2/photo5.jpg :: Gare espagnole :: right} // les class left, right et center sont définies dans la feuille de style.

''Emphase :: class_for_em'', '''forte emphase ;; onclick nefaisrien() :: class_for_strong''', °°code :: class_for_code°°, etc ...

[http://www.example.net :: title :: en :: id_for_thelink]un lien[/], [;; class lien_url]http://www.example.net[/] ; (abréviation :: fr)abbr(/) ...

Pour donner des attributs à un paragraphe, il suffit de les définir à la fin de celui-ci. :: class_for_paragraph

____ // permet d'afficher le texte en dessous de l'image et non plus à gauche.

Pour les listes :

* voici un (list item::en)°°li°°(/) avec un attribut, :: class_for_li
* et un autre avec lequel sont définis les attributs du °°ul°°, ;; id id_for_theli ]] a_class_for_ul
* Ce sont les deux symboles crochets °°]°° qui permettent de séparer les attributs du °°li°° et du °°ul°°.

---- class_for_hr


"""
Citation en bloque...

blabla...
""" moi :: fr

°°° css
h1 {
	border-bottom: 1px #c7d6df solid;
	text-align: right;
	margin: 0;
	margin-bottom: -1.5em;
}
a {
	text-decoration: none;
	color: #003c9c;
}
a:hover {
	text-decoration: underline;
}
...
°°° ;; onClick : action()
= Les Alternatives =

== Désactivation ponctuelle ==

Il arrive que certains caractères soient interprétés sans que ce soit voulu. Pour désactiver l'interprétation d'un caractère, il suffit de le précéder d'un antislash ; Pour afficher un antislash, désactivez le avec un second antislash : \\. Il est par exemple courant de précéder un mot en emphase d'une apostrophe, la solution : voici de l\'''emphase'', et de la '''forte emphase'''. Si vous enlevez l'antislash, il n'y aura pas d'apostrophe, le passage ""emphase'', et de la "" sera en forte emphase et il n'y aura pas de faible emphase.

== L'o7aCode et l'html ==

Si avec tout ça vous ne parvenez pas à obtenir ce que vous voulez, il est toujours possible d'intégrer de l'html au sein du o7aCode (un bloque non-interprété), sans avoir à rédiger tous le document en html ! Pour cela, placez votre code html entre \##> et \<##.

##>

<p>Ici de l'html...</p>

<##

= Extensions =

Evidemment la syntaxe est très modulable et n'attend que d'être améliorée ; A titre d'exemple, j'ai créé une extension pour faire rapidement des liens vers des articles de wikipedia :

* [wikipedia:Hypertext_Markup_Language]Article concernant l'(Hypertext Markup Language :: en)html(/)[/]
* [wp:html]Hypertext Markup Language[/]
* [wikipedia]html[/]
* [wp]html[/]

N'hésitez pas à proposer d'autres extensions !

Rendu final

L'o7aCode, aussi simple que du BBCode

L'o7aCode permet de donner forme au texte avec une syntaxe relativement simple. Par exemple, pour mettre du texte en forte emphase voici la syntaxe, pour l'emphase c'est ainsi. Vous pouvez aussi ~~barrer le texte~~, insérer du texte ou citer du texte. Pour citer un bloque de texte, c'est comme ça :

Voici un bloque de texte cité...

... qui peut prendre plusieurs lignes.

Pour faire un lien : intitulé du lien, ou plus brièvement (sans intitulé) : http://www.example.net/.

Pour insérer une image :

Les listes :

1er élément,
2em élément,
3em élément ...

Je n'ai cependant pas prévu de syntaxe simple pour des éléments de mise en page "gadgets" tels que la colorisation du texte...

L'o7aCode, aussi complet que de l'html

Vous avez pu remarquer que pour insérer des titres il faut mettre des symboles =. Le nombre de symboles = à droite et à gauche du titre renseigne sur le niveau du titre, pour un sous-titre :

les listes

Les listes numérotées :

élément numéroté,
élément numéroté,
élément numéroté ...

Les listes à plusieurs niveaux :

un élément, une sous-liste :
- un sous-élément,
- un autre sous-élément,
un autre élément,
un 3em élément, une sous liste numérotée :
1. un sous-élément numéroté,
2. un second, une sous-sous-liste :
  - un sous-sous-élément,
  - un autre,
et ainsi de suite ...

Quelques autres syntaxes

Vous pouvez faire des abbr, indiquer les références d'une citation, insérer des tirets d'incise –pour faire des incises–, des retours à la ligne sans changer de paragraphe :
ainsi que des barres horizontales :

Aujourd'hui, il n'est pas rare qu'un document ne soit pas rédigé en une traite ni par une seule personne, pour les wikis par exemple ; C'est là que les commentaires prennent tout leur intérêt.

Les commentaires en ligne :

En bloque :

L'insertion de codes

L'insertion en-ligne : [b]du BBCode[/b], et voici de l'insertion en bloque, avec colorisateur syntaxique :

php :

function truncate($str, $lenght_max, $with_abbr=true) {
	if(strlen($str) > $lenght_max) {
		if($with_abbr) $returned = '<abbr title="'.$str.'">';
		$returned.= substr($str, 0, ($lenght_max-3)).'...';
		if($with_abbr) $returned.= '</abbr>';
	}
	else $returned = $str;
	return $returned;
}

html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<title>o7a.net - Home page</title>
		<link rel="stylesheet" type="text/css" href="http://o7a.net/css/main.css" media="screen" />
	</head>
	<body>
...
	</body>
</html>

Si vous ne souhaitez aucun colorisateur, n'indiquez rien :

//STRONG EMPHASIS
if($this->getParam('active_strongEmphasis')) {
	$content = preg_replace_callback('#\'\'\'(.*)\'\'\'#mU',array(&$this,'transformStrongEmphasis'),$content);
}
 
//EMPHASIS
if($this->getParam('active_emphasis')) {
	$content = preg_replace_callback('#\'\'(.*)\'\'#mU',array(&$this,'transformEmphasis'),$content);
}

les attributs

L'o7aCode permet d'insérer un bon nombre de balises html, mais leur paramétrage reste jusqu'ici fort restreint ... Comment renseigner l'attribut title des liens ? Comment donner une alignement aux images ?

Il est possible de renseigner tous les attributs de toutes les balises vues jusqu'ici : aussi bien les images, liens et titres, que les balises d'emphase, les listes ou même les paragraphes !

Vous pouvez –dans un premier temps– renseigner des attributs prédéfinis –dans un certain ordre–. Il faut les précéder chacun de deux deux-points. Par exemple, ce lien a l'attribut title de défini.

Il serait cependant fastidieux de prédéfinir tous les attributs, et l'ordre est ici imposer, ce qui restreint la syntaxe aux attributs les plus couramment utilisés. Pour renseigner un attribut choisi, la syntaxe est sensiblement différente : il faut cette fois ci précéder l'attribution de deux point-virgule, mettre l'intitulé de l'attribut, puis sa valeur (en séparant les deux d'un ou plusieurs caractères non-alphanumériques). Par exemple, l'attribut id de ce lien est défini.

Vous pouvez bien sûr mélanger les deux types d'attribution, le seul ordre à respecter est celui des attributs prédéfinis.

Toutes les balises

Gare espagnole

Emphase, forte emphase, code, etc ...

un lien, http://www.example.net ; abbr ...

Pour donner des attributs à un paragraphe, il suffit de les définir à la fin de celui-ci.

Pour les listes :

voici un li avec un attribut,
et un autre avec lequel sont définis les attributs du ul,
Ce sont les deux symboles crochets ] qui permettent de séparer les attributs du li et du ul.

Citation en bloque...

blabla...

h1 {
	border-bottom: 1px #c7d6df solid;
	text-align: right;
	margin: 0;
	margin-bottom: -1.5em;
}
a {
	text-decoration: none;
	color: #003c9c;
}
a:hover {
	text-decoration: underline;
}
...

Les Alternatives

Désactivation ponctuelle

Il arrive que certains caractères soient interprétés sans que ce soit voulu. Pour désactiver l'interprétation d'un caractère, il suffit de le précéder d'un antislash ; Pour afficher un antislash, désactivez le avec un second antislash : \. Il est par exemple courant de précéder un mot en emphase d'une apostrophe, la solution : voici de l'emphase, et de la forte emphase. Si vous enlevez l'antislash, il n'y aura pas d'apostrophe, le passage emphase'', et de la sera en forte emphase et il n'y aura pas de faible emphase.

L'o7aCode et l'html

Si avec tout ça vous ne parvenez pas à obtenir ce que vous voulez, il est toujours possible d'intégrer de l'html au sein du o7aCode (un bloque non-interprété), sans avoir à rédiger tous le document en html ! Pour cela, placez votre code html entre ##> et <##.

Ici de l'html...

Extensions

Evidemment la syntaxe est très modulable et n'attend que d'être améliorée ; A titre d'exemple, j'ai créé une extension pour faire rapidement des liens vers des articles de wikipedia :

N'hésitez pas à proposer d'autres extensions !

Code XHTML

<h3>L'o7aCode, aussi simple que du BBCode</h3>
 
<p>L'o7aCode permet de donner forme au texte avec une syntaxe relativement simple. Par exemple, pour mettre du texte en forte emphase <strong>voici la syntaxe</strong>, pour l'emphase <em>c'est ainsi</em>. Vous pouvez aussi <del>barrer le texte</del>, <ins>ins&eacute;rer du texte</ins> ou <q>citer du texte</q>. Pour citer un bloque de texte, c'est comme &ccedil;a :</p>
 
<blockquote>
<p>Voici un bloque de texte cit&eacute;...</p>
 
<p>... qui peut prendre plusieurs lignes.</p>
</blockquote>
 
<p>Pour faire un lien : <a href="http://www.example.net/">intitul&eacute; du lien</a>, ou plus bri&egrave;vement (sans intitul&eacute;) : <a href="http://www.example.net/">http://www.example.net/</a>.</p>
 
<p>Pour ins&eacute;rer une image :</p>
 
<p><img src="http://galeries.o7a.net/bertrand/mini/photos1/photo11.jpg" /></p>
 
<p>Les listes :</p>
 
<ul>
	<li>1er &eacute;l&eacute;ment,</li>
	<li>2em &eacute;l&eacute;ment,</li>
	<li>3em &eacute;l&eacute;ment ...</li>
</ul>
 
<p>Je n'ai cependant pas pr&eacute;vu de syntaxe simple pour des &eacute;l&eacute;ments de mise en page &quot;gadgets&quot; tels que la colorisation du texte...</p>
 
<h3>L'o7aCode, aussi complet que de l'html</h3>
 
<p>Vous avez pu remarquer que pour ins&eacute;rer des titres il faut mettre des symboles =. Le nombre de symboles = &agrave; droite et &agrave; gauche du titre renseigne sur le niveau du titre, pour un sous-titre :</p>
 
<h4>les listes</h4>
 
<p>Les listes num&eacute;rot&eacute;es :</p>
 
<ol>
	<li>&eacute;l&eacute;ment num&eacute;rot&eacute;,</li>
	<li>&eacute;l&eacute;ment num&eacute;rot&eacute;,</li>
	<li>&eacute;l&eacute;ment num&eacute;rot&eacute; ...</li>
</ol>
 
<p>Les listes &agrave; plusieurs niveaux :</p>
 
<ul>
	<li>un &eacute;l&eacute;ment, une sous-liste :
		<ul>
			<li>un sous-&eacute;l&eacute;ment,</li>
			<li>un autre sous-&eacute;l&eacute;ment,</li>
		</ul>
	</li>
	<li>un autre &eacute;l&eacute;ment,</li>
	<li>un 3em &eacute;l&eacute;ment, une sous liste num&eacute;rot&eacute;e :
		<ol>
			<li>un sous-&eacute;l&eacute;ment num&eacute;rot&eacute;,</li>
			<li>un second, une sous-sous-liste :
				<ul>
					<li>un sous-sous-&eacute;l&eacute;ment,</li>
					<li>un autre,</li>
				</ul>
			</li>
		</ol>
	</li>
	<li>et ainsi de suite ...</li>
</ul>
 
<h4>Quelques autres syntaxes</h4>
 
<p>Vous pouvez faire des <abbr title="Abr&eacute;viations">abbr</abbr>, indiquer <cite>les r&eacute;f&eacute;rences</cite> d'une <q>citation</q>, ins&eacute;rer des tirets d'incise &ndash;pour faire des incises&ndash;, des retours &agrave; la ligne sans changer de paragraphe : <br /> ainsi que des barres horizontales :</p>
 
 <hr />
 
<p>Aujourd'hui, il n'est pas rare qu'un document ne soit pas r&eacute;dig&eacute; en une traite ni par une seule personne, pour les wikis par exemple ; C'est l&agrave; que les commentaires prennent tout leur int&eacute;r&ecirc;t.</p>
 
<p>Les commentaires en ligne :</p>
 
<p>En bloque :</p>
 
<h4>L'insertion de codes</h4>
 
<p>L'insertion en-ligne : <code>[b]du BBCode[/b]</code>, et voici de l'insertion en bloque, avec colorisateur syntaxique :</p>
 
<p>php :</p>
<pre class="code php"><span class="kw2">function</span> truncate<span class="br0">&#40;</span><span class="re0">$str</span>, <span class="re0">$lenght_max</span>, <span class="re0">$with_abbr</span>=<span class="kw2">true</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
	<span class="kw1">if</span><span class="br0">&#40;</span><a href="http://www.php.net/strlen"><span class="kw3">strlen</span></a><span class="br0">&#40;</span><span class="re0">$str</span><span class="br0">&#41;</span> &gt; <span class="re0">$lenght_max</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
		<span class="kw1">if</span><span class="br0">&#40;</span><span class="re0">$with_abbr</span><span class="br0">&#41;</span> <span class="re0">$returned</span> = <span class="st0">'&lt;abbr title=&quot;'</span>.<span class="re0">$str</span>.<span class="st0">'&quot;&gt;'</span>;
		<span class="re0">$returned</span>.= <a href="http://www.php.net/substr"><span class="kw3">substr</span></a><span class="br0">&#40;</span><span class="re0">$str</span>, <span class="nu0">0</span>, <span class="br0">&#40;</span><span class="re0">$lenght_max</span><span class="nu0">-3</span><span class="br0">&#41;</span><span class="br0">&#41;</span>.<span class="st0">'...'</span>;
		<span class="kw1">if</span><span class="br0">&#40;</span><span class="re0">$with_abbr</span><span class="br0">&#41;</span> <span class="re0">$returned</span>.= <span class="st0">'&lt;/abbr&gt;'</span>;
	<span class="br0">&#125;</span>
	<span class="kw1">else</span> <span class="re0">$returned</span> = <span class="re0">$str</span>;
	<span class="kw1">return</span> <span class="re0">$returned</span>;
<span class="br0">&#125;</span></pre>
 
<p>html :</p>
<pre class="code xml"><span class="sc0">&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;</span>
<span class="sc3"><span class="re1">&lt;html</span> <span class="re0">xmlns</span>=<span class="st0">&quot;http://www.w3.org/1999/xhtml&quot;</span> <span class="re0">xml:lang</span>=<span class="st0">&quot;fr&quot;</span><span class="re2">&gt;</span></span>
	<span class="sc3"><span class="re1">&lt;head<span class="re2">&gt;</span></span></span>
		<span class="sc3"><span class="re1">&lt;meta</span> <span class="re0">http-equiv</span>=<span class="st0">&quot;Content-Type&quot;</span> <span class="re0">content</span>=<span class="st0">&quot;text/html; charset=ISO-8859-1&quot;</span> <span class="re2">/&gt;</span></span>
		<span class="sc3"><span class="re1">&lt;title<span class="re2">&gt;</span></span></span>o7a.net - Home page<span class="sc3"><span class="re1">&lt;/title<span class="re2">&gt;</span></span></span>
		<span class="sc3"><span class="re1">&lt;link</span> <span class="re0">rel</span>=<span class="st0">&quot;stylesheet&quot;</span> <span class="re0">type</span>=<span class="st0">&quot;text/css&quot;</span> <span class="re0">href</span>=<span class="st0">&quot;http://o7a.net/css/main.css&quot;</span> <span class="re0">media</span>=<span class="st0">&quot;screen&quot;</span> <span class="re2">/&gt;</span></span>
	<span class="sc3"><span class="re1">&lt;/head<span class="re2">&gt;</span></span></span>
	<span class="sc3"><span class="re1">&lt;body<span class="re2">&gt;</span></span></span>
...
	<span class="sc3"><span class="re1">&lt;/body<span class="re2">&gt;</span></span></span>
<span class="sc3"><span class="re1">&lt;/html<span class="re2">&gt;</span></span></span></pre>
 
<p>Si vous ne souhaitez aucun colorisateur, n'indiquez rien :</p>
<pre class="code">//STRONG EMPHASIS
if($this-&gt;getParam('active_strongEmphasis')) {
	$content = preg_replace_callback('#\'\'\'(.*)\'\'\'#mU',array(&amp;$this,'transformStrongEmphasis'),$content);
}
&nbsp;
//EMPHASIS
if($this-&gt;getParam('active_emphasis')) {
	$content = preg_replace_callback('#\'\'(.*)\'\'#mU',array(&amp;$this,'transformEmphasis'),$content);
}</pre>
 
<h4>les attributs</h4>
 
<p>L'o7aCode permet d'ins&eacute;rer un bon nombre de balises html, mais leur param&eacute;trage reste jusqu'ici fort restreint ... Comment renseigner l'attribut <code>title</code> des liens ? Comment donner une alignement aux images ?</p>
 
<p>Il est possible de renseigner <em>tous les attributs</em> de <em>toutes les balises</em> vues jusqu'ici : aussi bien les images, liens et titres, que les balises d'emphase, les listes ou m&ecirc;me les paragraphes !</p>
 
<p>Vous pouvez &ndash;dans un premier temps&ndash; renseigner des attributs pr&eacute;d&eacute;finis &ndash;dans un certain ordre&ndash;. Il faut les pr&eacute;c&eacute;der chacun de deux deux-points. Par exemple, <a href="http://www.example.net" title="lien fictif pour l'exemple">ce lien</a> a l'attribut <code>title</code> de d&eacute;fini.</p>
 
<p>Il serait cependant fastidieux de pr&eacute;d&eacute;finir tous les attributs, et l'ordre est ici imposer, ce qui restreint la syntaxe aux attributs les plus couramment utilis&eacute;s. Pour renseigner un attribut choisi, la syntaxe est sensiblement diff&eacute;rente : il faut cette fois ci pr&eacute;c&eacute;der l'attribution de deux point-virgule, mettre l'intitul&eacute; de l'attribut, puis sa valeur (en s&eacute;parant les deux d'un ou plusieurs caract&egrave;res non-alphanum&eacute;riques). Par exemple, l'attribut <code>id</code> de <a href="http://www.example.net" id="lien1">ce lien</a> est d&eacute;fini.</p>
 
<p>Vous pouvez bien s&ucirc;r m&eacute;langer les deux types d'attribution, le seul ordre &agrave; respecter est celui des attributs pr&eacute;d&eacute;finis.</p>
 
<h5 id="id_for_thetitle"><em>Toutes</em> les balises</h5>
 
<p><img src="http://galeries.o7a.net/bertrand/mini/photos2/photo5.jpg" alt="Gare espagnole" class="right" /></p>
 
<p><em class="class_for_em">Emphase</em>, <strong onclick="nefaisrien()" class="class_for_strong">forte emphase</strong>, <code class="class_for_code">code</code>, etc ...</p>
 
<p><a href="http://www.example.net" title="title" lang="en" id="id_for_thelink">un lien</a>, <a href="http://www.example.net" class="lien_url">http://www.example.net</a> ; <abbr title="abr&eacute;viation" xml:lang="fr">abbr</abbr> ...</p>
 
<p class="class_for_paragraph">Pour donner des attributs &agrave; un paragraphe, il suffit de les d&eacute;finir &agrave; la fin de celui-ci.</p>
 
<div class="clearer"></div>
 
<p>Pour les listes :</p>
 
<ul class="a_class_for_ul">
	<li class="class_for_li">voici un <abbr title="list item" xml:lang="en"><code>li</code></abbr> avec un attribut,</li>
	<li id="id_for_theli">et un autre avec lequel sont d&eacute;finis les attributs du <code>ul</code>,</li>
	<li>Ce sont les deux symboles crochets <code>]</code> qui permettent de s&eacute;parer les attributs du <code>li</code> et du <code>ul</code>.</li>
</ul>
 
<hr class="class_for_hr" />
 
 
<blockquote cite="moi" lang="fr">
<p>Citation en bloque...</p>
 
<p>blabla...</p>
</blockquote>
<pre class="code css">h1 <span class="br0">&#123;</span>
	<span class="kw1">border-bottom</span>: <span class="re3">1px</span> <span class="re0">#c7d6df</span> <span class="kw2">solid</span>;
	<span class="kw1">text-align</span>: <span class="kw1">right</span>;
	<span class="kw1">margin</span>: <span class="nu0">0</span>;
	<span class="kw1">margin-bottom</span>: <span class="nu0">-1</span><span class="re1"><span class="re3">.5em</span></span>;
<span class="br0">&#125;</span>
a <span class="br0">&#123;</span>
	<span class="kw1">text-decoration</span>: <span class="kw2">none</span>;
	<span class="kw1">color</span>: <span class="re0">#003c9c</span>;
<span class="br0">&#125;</span>
a<span class="re2">:hover</span> <span class="br0">&#123;</span>
	<span class="kw1">text-decoration</span>: <span class="kw2">underline</span>;
<span class="br0">&#125;</span>
...</pre>
<h3>Les Alternatives</h3>
 
<h4>D&eacute;sactivation ponctuelle</h4>
 
<p>Il arrive que certains caract&egrave;res soient interpr&eacute;t&eacute;s sans que ce soit voulu. Pour d&eacute;sactiver l'interpr&eacute;tation d'un caract&egrave;re, il suffit de le pr&eacute;c&eacute;der d'un antislash ; Pour afficher un antislash, d&eacute;sactivez le avec un second antislash : \. Il est par exemple courant de pr&eacute;c&eacute;der un mot en emphase d'une apostrophe, la solution : voici de l'<em>emphase</em>, et de la <strong>forte emphase</strong>. Si vous enlevez l'antislash, il n'y aura pas d'apostrophe, le passage <q>emphase'', et de la</q> sera en forte emphase et il n'y aura pas de faible emphase.</p>
 
<h4>L'o7aCode et l'html</h4>
 
<p>Si avec tout &ccedil;a vous ne parvenez pas &agrave; obtenir ce que vous voulez, il est toujours possible d'int&eacute;grer de l'html au sein du o7aCode (un bloque non-interpr&eacute;t&eacute;), sans avoir &agrave; r&eacute;diger tous le document en html ! Pour cela, placez votre code html entre ##&gt; et &lt;##.</p>
 
 
 
<p>Ici de l'html...</p>
 
 
 
<h3>Extensions</h3>
 
<p>Evidemment la syntaxe est tr&egrave;s modulable et n'attend que d'&ecirc;tre am&eacute;lior&eacute;e ; A titre d'exemple, j'ai cr&eacute;&eacute; une extension pour faire rapidement des liens vers des articles de wikipedia :</p>
 
<ul>
	<li><a href="http://fr.wikipedia.org/wiki/Hypertext_Markup_Language" title="Article de Wikipedia sur &quot;Hypertext_Markup_Language&quot;">Article concernant l'<abbr title="Hypertext Markup Language" xml:lang="en">html</abbr></a></li>
	<li><a href="http://fr.wikipedia.org/wiki/html" title="Article de Wikipedia sur &quot;html&quot;">Hypertext Markup Language</a></li>
	<li><a href="http://fr.wikipedia.org/wiki/html" title="Article de Wikipedia sur &quot;html&quot;">html</a></li>
	<li><a href="http://fr.wikipedia.org/wiki/html" title="Article de Wikipedia sur &quot;html&quot;">html</a></li>
</ul>
 
<p>N'h&eacute;sitez pas &agrave; proposer d'autres extensions !</p>