Projet

Général

Profil

Evolution #2504

<pre> plutôt <div> pour afficher du code en bloque

Ajouté par Anonyme il y a presque 7 ans. Mis à jour il y a environ un an.

Statut:
Nouveau
Priorité:
Bas
Assigné à:
-
Catégorie:
-
Version cible:
Début:
22/01/2012
Echéance:
% réalisé:

0%

Resolution:

Description

SPIP ajoute des <br> dans <code> </code> , ce qui n'est pas pratique lorsque nous voulons formater le code en suivant les recommandations.
De plus SPIP ajoute une <div class='spip_code'> </div> , englobant le code, ce qui n'est pas une mauvaise chose, mais n'est pas très sémantique, il aurait peut être mieux valu mettre un pre toujours dans le respect des recommandations, et aussi préférer une class ltr plutot qu'un style='text-align:left;'

To represent a block of computer code, the pre element can be used with a code element; to represent a block of computer output the pre element can be used with a samp element. Similarly, the kbd element can be used within a pre element to indicate text that the user is to enter.

source : http://www.w3.org/TR/html5/grouping-content.html#the-pre-element

Pour utiliser du code "inline" utiliser <code> ma ligne de code </code>
Pour utiliser un bloc de code utiliser :

  <pre><code> mon code </code></pre> 

Une discussion intéressante à eu lieu à ce sujet :
http://stackoverflow.com/questions/4611591/code-vs-pre-vs-samp-for-inline-and-block-code-snippets

ça serait plus sympa que des textarea et autres non ?

Après avec un p'tit coup de css forward on peut faire des trucs sympa, en se basant sur une typo défini en em (16px = 1em dans ce cas) on peut faire en sorte que chaque ligne soit colorée différemment une fois sur deux.

pre {background-color: rgba(0,0,0,0.1); background-size: 3.4286em 3.4286em; background-origin: content-box; background-image: linear-gradient(rgba(255, 255, 255, .3) 50%, transparent 50%, transparent); font-size: 0.875em; line-height: 1.7143em;  }

Historique

#1 Mis à jour par Anonyme il y a presque 7 ans

Je viens de réessayer , il est impossible sous spip d'afficher du code tel que :

<pre>
 <code>
  foo
 </code>
</pre>

Sans passer par <cadre> qui nous génère un textarea, un input hidden (?), le tout englobé d'un form ,par contre ici ça passe sans soucis.

#2 Mis à jour par denisb - il y a presque 7 ans

effectivement.
sauf au prix d'une coûteuse gymnastique : http://demo.spip.org/spip.php?article21
(ou, si page disparue : http://www.spip-contrib.net/pre-code-et-autre-div)

#3 Mis à jour par cedric - il y a presque 7 ans

  • Version cible mis à 99 plus tard

le textarea a une finalité : permettre de faire un ctrl+a/ctrl+c pour selectionner tout+copier le texte. A noter que le form et input hidden ont été supprimés dans SPIP 3.0 car n'avaient plus d'utilité.

#4 Mis à jour par tetue tetue il y a plus d'un an

Contrairement à ce qu’il a été promptement répondu à ce ticket, il n’est pas « impossible sous spip » d’afficher du code avec <pre> ! Pour preuve (et POC), voici plusieurs exemples de code réunis sur une page SPIP :

http://romy.tetue.net/bien-demarrer-avec-z

Cette page présente :
1) du code inline simplement balisé par <code> ;
2) des blocs de code générés par le raccourci SPIP <code> ; ici corrigés en <pre><code> ;
3) un exemple d’arborescence simplement balisé avec <pre> ;
4) des blocs de code générés par le raccourci SPIP <cadre>, avec leur textarea et tout qui permet de copier-coller facilement le code ; et qu’on peut laisser en dehors du périmètre de ce ticket pour l'instant.

Il est possible (et bienvenu) que le raccourci SPIP <code> génère des blocs correctement balisés de <pre><code>.

En attendant, il suffit de masquer les <br> intempestifs de SPIP avec ce sale petit patch CSS :

pre code br { display: none; }
(spabô mais ça marche).

#5 Mis à jour par tetue tetue il y a environ un an

Bon bin, j'ai fait un plugin, avec Nicod :
https://zone.spip.org/trac/spip-zone/browser/_plugins_/precode/trunk/todo.txt
https://plugins.spip.net/precode
mais il reste encore des trucs à corriger pour que ça marche bien dans SPIP.

#6 Mis à jour par b b il y a environ un an

Juste une remarque sur la catégorie du plugin en question, ça n'est amha pas un "outil de développement" (outil) mais plus en rapport avec l'édition, catégorie "edition" donc.

Formats disponibles : Atom PDF