Project

General

Profile

Evolution #2504

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

Added by Anonymous over 7 years ago. Updated about 2 years ago.

Status:
Nouveau
Priority:
Bas
Assignee:
-
Category:
-
Target version:
Start date:
01/22/2012
Due date:
% Done:

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

History

#1 Updated by Anonymous over 7 years ago

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 Updated by denisb - over 7 years ago

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 Updated by cedric - over 7 years ago

  • Target version set to 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 Updated by tetue tetue about 2 years ago

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 Updated by tetue tetue about 2 years ago

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 Updated by b b about 2 years ago

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.

Also available in: Atom PDF