Insérer du code bash dans des articles de PluXml

Réponses

• Lokoyote Member

  mai 2014

  Salut,
  
  Tu peux essayer de voir ce qu'il faut changer en demandant à l'auteur du plugin.
  Sinon, perso j'ai créé une class "code" dans mon fichier css, ce qui fait que lorsque je veux mettre du code, je passe en mode "Source" et j'insère :
  
  <p class="code">
  Mon code blablabla
  </p>
  
  Sinon il doit y avoir un moyen plus simple, mais j'aime bien bidouiller
• soupaloignon Member

  mai 2014 mai 2014 modifié

  Hello,
  
  Merci pour ton astuce. Je me suis permis de reprendre ton CSS
  
  Cela me permettra déjà de faire quelque chose de propre en attendant de bidouiller dans les fichiers de CKEditor pour avoir ça en natif
  
  
  Edit : Tu connaîtrais un moyen d'avoir ce même css, mais lorsque l'on est en édition de l'article ?
• Lokoyote Member

  mai 2014

  Pas de souci !
  
  Qu'entends-tu par "lorsque l'on est en édition de l'article" ?
• soupaloignon Member

  mai 2014

  Lorsque j'ai fini de créer l'article, qui donc contient du bash avec ton css, et que je l'ai sauvegardé. Le css du bash n'est pas pris en compte (normal le css est pour le fronted).
  
  Connaîtrais tu le fichier css à modifier en admin pour que la mise en forme soit également prise en compte ?
  
  Heu... Je sais pas vraiment si je suis plus clair que dans le message précédent
• Lokoyote Member

  mai 2014 mai 2014 modifié

  Ah ! Mais c'est normal, mon bout de code que je t'ai passé ne fait rien, il faut que tu modifies le fichier qui se trouve dans "Thèmes > defaut > css > style.css" et que tu rajoutes (par exemple tout en haut) le code suivant :

  .code {
  	background-color: #333333;
  	font-size: 1em;
  	color: #FFF;
  	padding: 0.75em;
  	border-radius: 5px;
   	width: 85%;
  	margin-left:auto;
  	margin-right:auto;
  }
  

  
  Explication :
  
  ".code" ça veut dire que ta balise "code" est une "class", autrement dit, tu peux en mettre plusieurs par page.
  background-color: #333333 -> la couleur grise du fond de ton paragraphe de code.
  font-size: 1em -> la police de ton code a une taille normal (1em = normal)
  color: #FFF -> la couleur du texte est blanche
  padding: 0.75em -> ajoute l'espace autour de ton texte pour éviter que les bords gris s'arrêtent juste autour de ton code
  border-radius: 5px -> pour faire des bords un peu arrondi de 5 pixels
  width: 85% -> la taille de ton bloc gris dans ta page (85% pour laisser un peu de marge à gauche et à droite)
  margin-left:auto et margin-right:auto -> paragraphe centré
  
  Et quand tu tapes ton code dans CKeditor, tu n'auras plus qu'à mettre

  <p class="code">
         Mon code blablabla
  </p>
  

  
  Voilà, ça devrait être bon
• soupaloignon Member

  mai 2014 mai 2014 modifié

  Je me suis vraiment mal exprimé alors
  
  Pas de souci pour ta class .code, je l'ai bien mis dans Thèmes > defaut > css > style.css
  Ca fonctionne nickel. Mais cela ne fonctionne que sur la partie fronted (publique)
  
  Quand on est en admin il n'y a pas cette mise en forme car les fichiers css de l'admin sont différent de ceux du fronted. Ma question initiale était donc de savoir, dans ces fichiers css de l'admin, quel était celui à modifier (en y ajoutant ta class .code) pour que cette mise en forme soit prise ne compte même dans l'admin
  
  Une image valant plus que 1000 discours
  
  
• Lokoyote Member

  mai 2014 mai 2014 modifié

  Ahah carrément, mais en fait c'est moi qui avait mal compris
  
  Ah ben justement, de ce côté, c'est dans le plugin de CKEditor qu'il faut y modifier et sincèrement j'ai pas trouvé c'est pour ça que j'avais fait cette méthode...
• soupaloignon Member

  mai 2014

  Lokoyote a écrit:

  Ah ben justement, de ce côté, c'est dans le plugin de CKEditor qu'il faut y modifier et sincèrement j'ai pas trouvé c'est pour ça que j'avais fait cette méthode...

  
  Bon, je vais essayer de m'y frotter, et je te ferai un retour
• Lokoyote Member

  mai 2014

  Tout ce que je peux dire, c'est que c'est le plugin "syntaxhighlight" de CKEditor qui le fait (le "brush" normalement) mais après c'est loin de mes compétences
• soupaloignon Member

  mai 2014 mai 2014 modifié

  Yesss, j'ai trouvé
  
  Cela se passe dans : /plugins/ckeditor/ckeditor/content.css
  
  Tu modifies le contenu de pre en y mettant le contenu de ta classe .code (mais tu gardes le mot pre)
  
  Il faut certainement vider le cache de ton navigateur pour qu'il recharge le css. En tout cas ça marche
  
  
  
  
  Edit 1 : Bon, je ne l'ai plus en fronted par contre
  Il doit y avoir un "pre" a changer également
  A suivre ...
  
  
  Edit 2 : J'y suis arrivé
  
  Cela se passe dans : /plugins/ckeditor/syntaxhighlighter/styles/shThemeDefault.css
  
  Sauvegarder ce fichier sous un autre nom (histoire de pouvoir reprendre le fichier original au cas où)
  Ouvrir shThemeDefault.css
  Virer tout le css
  Rajouter

  [== CSS ==]
  .syntaxhighlighter {
  	background-color: #333333;
  	font-size: 1em;
  	color: #FFF;
  	padding: 0.75em;
  	border-radius: 5px;
   	width: 85%;
  	margin-left:auto;
  	margin-right:auto;
  }
  

  Et voilà
• Lokoyote Member

  mai 2014 mai 2014 modifié

  Oh nice ! Bravo !
  Pourtant j'ai regardé dedans
  
  Voilà qui sera plus simple
  
  Merci en tout cas
  
  Edit :
  Par contre, le content.css est pas obligatoire à changer, les pointillés suffisent pour voir le code je trouve.
  
  Tout est nickel !
• soupaloignon Member

  mai 2014

  Lokoyote a écrit:

  Edit :
  Par contre, le content.css est pas obligatoire à changer, les pointillés suffisent pour voir le code je trouve.

  
  Oui, tout à fait d'accord. Mais disons que c'était ... Une coquetterie perso