source: spip-zone/_plugins_/precode/trunk/demo/simplec.html @ 106903

Last change on this file since 106903 was 106903, checked in by tetue@…, 3 years ago

Ajustements CSS

File size: 2.8 KB
Line 
1<head>
2#INSERT_HEAD_CSS
3#INSERT_HEAD
4<style type="text/css">
5.page { width: 33em; margin: 0 auto; }
6</style>
7</head>
8<body>
9        <div class="page">
10                <h1>Pre et Code</h1>
11
12<h2>Texte pré-formaté</h2>
13
14<pre>
15###### #    #   ##   #    # #####  #      ######
16#       #  #   #  #  ##  ## #    # #      #     
17#####    ##   #    # # ## # #    # #      #####
18#        ##   ###### #    # #####  #      #     
19#       #  #  #    # #    # #      #      #     
20###### #    # #    # #    # #      ###### ######
21</pre>
22
23<pre>Exemple de contenu long, très long, pouvant courir jusqu'à perte de ligne, hors champ…
24 ______________________________________________________________
25|                    |                     |                   |
26|       pre          |         p           |        br         |
27|____________________|_____________________|___________________|
28|                    |                     |                   |
29| Texte pré-formaté  |      Paragraphe     | Retour à la ligne |
30|____________________|_____________________|___________________|
31</pre>
32
33<pre>Exemple de pre long, très long, pouvant courir jusqu'à perte de ligne, hors champ…
34avec du texte {en italique}, du texte {{en gras}}
35et un [lien hypertexte->http://www.spip.net]
36</pre>
37
38<h2>Code informatique</h2>
39
40<p>Exemple de <code>code</code> (&lt;code>) en ligne, sans oublier un <kbd>raccourci-clavier</kbd> (&lt;kbd>), un <samp>extrait de script</samp> (&lt;samp>) et une <var>variable</var> (&lt;var>).</p>
41
42<h3>Blocs de code</h3>
43
44<pre><code>Exemple
45de code quelconque long, très long, pouvant courir jusqu'à perte de ligne, hors champ…
46</code></pre>
47
48<pre class="code"><code>Exemple
49de code quelconque long, très long, pouvant courir jusqu'à perte de ligne, hors champ…
50</code></pre>
51
52<pre class="spip"><code>Exemple
53de code SPIP
54
55&lt;BOUCLE_articles(ARTICLES){id_rubrique}>
56&#35;TITRE<br>
57&lt;/BOUCLE_articles>
58</code></pre>
59
60<pre class="html"><code>Exemple
61de code HTML
62
63&lt;pre>texte
64pré-formaté&lt/pre>
65
66&lt;pre>&lt;code>bloc
67de code&lt/code>&lt/pre>
68</code></pre>
69
70<pre class="css"><code>Exemple
71de code CSS
72
73.pre  { ... }
74.code { ... }
75</code></pre>
76
77<pre class="less"><code>Exemple
78de code LESS
79</code></pre>
80
81<pre class="scss"><code>Exemple
82de code SCSS
83</code></pre>
84
85<pre class="js"><code>Exemple
86de code JS
87</code></pre>
88
89<pre class="php"><code>Exemple
90de code PHP
91
92&lt;?php
93     // ceci est du langage php
94     echo "bonjour";
95?>
96</code></pre>
97
98<pre class="xml"><code>Exemple
99de code XML
100</code></pre>
101
102<hr>
103<p class="small">Pour en savoir plus, lire&nbsp;: <a href="http://romy.tetue.net/mettez-du-code-dans-vos-pages-web" class="external">Mettez du code dans vos pages&nbsp;web</a> et <a href="http://romy.tetue.net/a-quoi-sert-la-balise-pre" class="external">À&nbsp;quoi sert la balise&nbsp;&lt;pre&gt;&nbsp;?</a></p>
104
105        </div>
106</body>
Note: See TracBrowser for help on using the repository browser.