Insérer du code bash dans des articles de PluXml

soupaloignon

Bonjour à tous,

Je commence à utiliser PluXml (que j'utilise déjà pour d'autres projets) pour un site où il y aura pas mal de script bash. Je cherche donc quelque chose de basique pour présenter les scripts dans les articles.

Typiquement cette présentation serait parfaite

J'ai installé CKEditor, qui offre la possibilité d'insérer du code. Mais la présentation native ne me convient pas. Donc avant d'aller bidouiller les css j'aimerai savoir si, dans les éditeurs tant "officiels" que "non officiels" présents dans le wiki, il y en aurai un qui aurait cette présentation en natif.

Merci d'avance pour vos réponses

Lokoyote

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

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

Pas de souci !

Qu'entends-tu par "lorsque l'on est en édition de l'article" ?

soupaloignon

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

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

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

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

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

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

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

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

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